I'm using jQuery plot with the categories plugin to create charts.
I want to plot two bars side by side for each month with this code:
$.plot(".chart", [ { label: "Neue Mitglieder", data: data, order: 1 }, { label: "Fällige Kündigungen", data: data2, order: 2 } ], {
series: {
bars: {
show: true,
barWidth: 0.5,
align: "center",
}
},
xaxis: {
mode: "categories",
ticks: [[0,"Jan"], [1,"Feb"], [2,"Mär"], [3,"Apr"], [4,"Mai"],
[5,"Jun"], [6,"Jul"], [7,"Aug"], [8,"Sep"], [9,"Okt"], [10,"Nov"], [11,"Dez"]],
tickLength: 1,
},
grid: {
hoverable: true,
},
yAxis: {
allowDecimals:false,
}
});
And that's my result:
The bars are still overlapping but I want my result to look like
Does anyone know what's wrong with my code? I thought the "order" option will fix that problem, but it didn't change anything.
Here's the jsfiddle: http://jsfiddle.net/buk8mhy8/
Found 2 mistakes in your fiddle
jquery.flot.orderBars.js link is wrong.
Removed order:1 and 2 from series data
updated your series default object with this
series: {
bars: {
show: true,
barWidth: 0.15,
order: 1
}
}
Check the updated fiddle
Hope this helps.
I tried to use orderBars plugin but the result was not what I expected. So what I did was:
Use the categories plugin
Define left and right align
obs: It works only with two bars side-by-side.
The Code:
var data1 = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];
var data2 = [ ["January", 1], ["February", 5], ["March", 6], ["April", 3], ["May", 37], ["June", 39] ];
$.plot($("#placeholder"),
[{ data: data1,
bars: {
show: true,
barWidth: 0.2,
align: "left",
}
},
{
data: data2,
bars: {
show: true,
barWidth: 0.2,
align: "right",
}
}
],
{
xaxis: {
mode: "categories",
tickLength: 0
}
}
);
The result:
Related
I'm using Highcharts JS. I want to change the colors of the line, the dots and background color of the area underneath the line.
I tried many ways but none of them worked. I've create a project on JsFiddle so that you can see
the code and change it if you have the solution to help me solve this problem.
Sample on JSFiddle:
line Chart using highcharts
My code:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'charts',
type: 'area',
backgroundColor: '#4b0e26',
style: {
fontFamily: 'CairoFont',
color: "#ffffff",
}
},
xAxis: {
categories: [
'يناير',
'فبراير',
'مارس',
'إبريل',
'مايو',
'يوليو',
'يونيو',
'أغسطس',
'سبتمبر',
'أكتوبر',
'نوفمبر',
'ديسمبر',
],
reversed: true,
lineColor: '#fff',
tickColor: '#fff',
labels: {
style: {
color: '#fff',
fontFamily: 'CairoFont'
}
},
},
yAxis: {
title: {
text: false,
useHTML: Highcharts.hasBidiBug,
},
opposite: true,
lineColor: '#fff',
tickColor: '#fff',
labels: {
style: {
color: '#fff',
fontFamily: 'CairoFont'
}
},
},
title: {
text: 'الطلاب الجدد',
useHTML: Highcharts.hasBidiBug,
style:{
color: '#fff',
}
},
legend: {
enabled: false
},
tooltip: {
useHTML: true,
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderRadius: 10,
borderWidth: 3,
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
data: [
[0, 29.9],
[1, 71.5],
[3, 106.4],
[4, 300.4],
[5, 400.4],
[6, 20.4],
[7, 40.4],
[8, 120.4],
[9, 50.4],
[10, 230.4],
[11, 110.4],
[12, 500.4],
],
}]
});
If you want to adjust the color for this series, you can use https://api.highcharts.com/highcharts/plotOptions.series.color. So you would just set your series like:
series: [{
showInLegend: false,
data: [
[0, 29.9],
[1, 71.5],
[3, 106.4],
[4, 300.4],
[5, 400.4],
[6, 20.4],
[7, 40.4],
[8, 120.4],
[9, 50.4],
[10, 230.4],
[11, 110.4],
[12, 500.4],
],
color: '#ff0000'
}]
See a working demo at https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-color-specific/ from their documentation or https://jsfiddle.net/pkcrt5q2/ for your specific example.
Additionally, you can set this as a global option as described at https://api.highcharts.com/highcharts/colors.
Highcharts.setOptions({
colors: ['#ff0000']
});
Working demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/colors/
I need to build a time series horizontal bar chart that looks something like this. Each bar represents a query running on the cluster. The length of the bar represents the duration. Each query has start time and end time. Multiple queries can have either same start time or end time or both. Queries may be running in parallel.
I am using highcharts/highstocks charting library, wondering what kind of Highchart config I need to use to accomplish it. Please advise.
I would use a columnrange series. Here you have an example of it: https://jsfiddle.net/BlackLabel/6bu8gtaw
It is hardcoded for now, you can edit it and adjust to your requirements.
All used API properties you can find here: https://api.highcharts.com/highcharts
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true,
height: 200,
borderWidth: 1,
borderColor: '#d3d3d3'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
plotOptions: {
series: {
groupPadding: 0,
pointPadding: 0.1,
grouping: false,
pointWidth: 6,
borderWidth: 0
}
},
title: {
text: null
},
xAxis: {
visible: false,
reversed: false,
min: -3,
max: 7
},
yAxis: {
opposite: true,
min: -3,
max: 18
},
series: [{
data: [
[0, 10, 13]
]
}, {
data: [
[1, 2, 5]
]
}, {
data: [
[1, 6, 9]
]
}, {
data: [
[1, 12, 16]
]
}, {
data: [
[2, 3, 7]
]
}, {
data: [
[2, 7, 12]
]
}, {
data: [
[3, 0, 4]
]
}, {
data: [
[3, 5, 10]
]
}, {
data: [
[3, 10, 14]
]
}, {
data: [
[3, 16, 18]
]
}, {
data: [
[4, 0, 5]
]
}, {
data: [
[4, 6, 11]
]
}, {
data: [
[4, 11, 15]
]
}, {
data: [
[4, 16, 18]
]
}]
});
I have a line graph with data for each month. No matter where I add the color option in the option list or even as part of the data the line is still the default yellow.
Here is the code that has it working with the default.
Where do i need to add a color variable to make it display.
var plotData = [[1, data.data['Jan']], [2, data.data['Feb']], [3, data.data['Mar']], [4, data.data['Apr']], [5, data.data['May']], [6, data.data['June']], [7, data.data['July']], [8, data.data['Aug']], [9, data.data['Sep']], [10, data.data['Oct']], [11, data.data['Nov']], [12, data.data['Dec']]];
$.plot('#placeholder', [plotData]), {
series: {
lines: {
show: true,
lineWidth: 4,
},
points: {
show: true
},
shadowSize: 0
},
grid: {
hoverable: true,
clickable: false,
borderColor: '#EDEDED',
borderWidth: 1,
labelMargin: 15,
backgroundColor: '#FFF'
},
yaxis: {
min: 0,
color: '#EDEDED'
},
xaxis: {
color: '#FFF',
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: '%x: %y',
shifts: {
x: -30,
y: 25
},
defaultTheme: false
}
}
Move the ) from behind [plotdata] to the end of the options object:
$.plot('#placeholder', [plotData]), {
^
As it is now, you call plot without options, so the default options are used.
Here is a fiddle which shows the working code.
For the right way to define custom colors, see here or in the above fiddle.
I have a question with regards to plotting data using Flot.
I am looking to Plot a Priority as Series, the Month in which the Priority occured, but also an Owner of that Priority.
I am looking for the Owner to have a stacked column of priorites in the relevant month.
Below is the Fiddle, which I have the Month and priority, but I am very confused when it comes to adding in an Owner.
Any help is much appreciated.
var graphP1 = [
["JAN", 5],
["FEB", 3],
["MAR", 22]
];
var graphP2 = [
["JAN", 3],
["FEB", 12],
["MAR", 9]
];
var graphP3 = [
["JAN", 7],
["FEB", 18],
["MAR", 7]
];
var graphP4 = [
["JAN", 9],
["FEB", 9],
["MAR", 3]
];
var data = [{
label: "P1",
data: graphP1,
bars: {
show: true,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#808080",
barWidth: 0.5,
align: "center"
},
color: "#808080"
}, {
label: "P2",
data: graphP2,
bars: {
show: true,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#f00",
barWidth: 0.5,
align: "center"
},
color: "#f00"
}, {
label: "P3",
data: graphP3,
bars: {
show: true,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#ffa500",
barWidth: 0.5,
align: "center"
},
color: "#ffa500"
}, {
label: "P4",
data: graphP4,
bars: {
show: true,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#e9e96c",
barWidth: 0.5,
align: "center"
},
color: "#e9e96c"
}];
$.plot($("#thegraph"), data, {
yaxis: {
tickFormatter: function (val, axis) {
return (val);
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
Fiddle
For stacking bars you need to add the stack plugin and add the option:
series: {
stack: true
},
See the updated fiddle.
I am trying to implement a flot bar graph, but I am having a few problems
The first being that setting the yaxsis min and max does not seem to work, the graph still only goes from 0 - 14.
Second I dont know how to set individual colours and names for each bar.
This is what I have
var d2 = [{
"label": "Face",
"data": [[0 , "3"], [5, "13"]]
},
{
"label": "Telephone",
"data": [[1, "400"], [6, "337"]]
},
{
"label": "Web",
"data": [[2, "1304"], [7, "843"]]
}];
var options = {
yaxes: {min: 0, max: 25000},
xaxis: {
tickSize: [1],
autoscaleMargin: .10,
show: false
},
series: {
lines: { show: false},
bars: {
show: true,
barWidth: 0.9,
align: 'center',
multiplebars:true,
},
points: {
show: true
}
}
};
$.plot($('#graph1'), d2, options);
Does anyone know how to fix these?
Thanks
If you want a different name and color for each bar then you'll need to configure the bar settings as part of the data sets.
var data1 = [
{
label: "Face",
data: [[0 , 3], [5, 13]],
bars: {
show: true,
barWidth: 0.9,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#AA4643"
},
color: "#AA4643"
},
{
label: "Telephone",
data: [[1, "400"], [6, "337"]],
bars: {
show: true,
barWidth: 0.9,
fill: true,
lineWidth: 1,
order: 2,
fillColor: "#89A54E"
},
color: "#89A54E"
}]
Then graph them like this:
$.plot($("#placeholder"), data1, options);
As for min and max not working, what happens if you don't configure them? Does the axis fit the data correctly?