I am showing 2 bars side by side using jQuery flot library.
I have set a barWidth, and it renders perfectly fine.
Problem - When one of the bar's value is 0, the bar does not show. But the other bar becomes wider.
Question - how to set the width, and let it be that in any case? I have read on min, max but could not figure out how to use them.
Please see my code below -
var myData = [{
data: plotpoints2,
color: "red",
bars: {
show: true,
barWidth: 0.9,
fillColor: "red",
align: "center",
order: 1
}
}, {
data: plotpoints2,
color: "green",
bars: {
show: true,
barWidth: 0.9,
fillColor: green,
align: "center",
order: 2
}
}];
jsfiddle to play:
http://jsfiddle.net/eb4jtea4/2/
to better understand your question, did you mean with bar value the param "barWidth" ? In my example ive set the barwidth of the second to the value "0" and its still shown.
$(function () {
var plotpoints2 = [[1, 450], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];
var myData = [{
data: plotpoints2,
color: "red",
bars: {
show: true,
barWidth: 0.6,
fillColor: "red",
align: "center",
order: 1
}
}, {
data: plotpoints2,
color: "green",
bars: {
show: true,
barWidth: 0,
fillColor: "green",
align: "center",
order: 2
}
}];
$.plot($("#placeholder"),myData);
});
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 am trying to plot multiple line charts on a graph and I have a toggle to disable / enabled some of the plots. I am destroying / updating whenever required but when I see a particular plot separately, I can see a different plot but when its a mixed graph, the line shows a different plot.
Example fiddle : https://jsfiddle.net/njmr15w9/ ( You can try to comment first two plots from the dataset array and you can see how the green plot changes and shows incorrect points, which should not be the case )
labels: [1, 2, 3, 4, 5,6,7,8],
datasets: [
{
label: "Set 1",
data: [10, 20, null, 40, 30,null,20,40],
borderColor: "#F00",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(255,0,0, 0.2)"
},
{
label: "Set 2",
data: [60, 40, 10, 50, 60,null,50,20],
borderColor: "#00F",
fill: false,
steppedLine: false,
tension: 0.5
},
{
label: "Set 2",
data: [40, 50, 30, 30, 20,null,60,40],
borderColor: "#0D0",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(5,5,255, 0.2)"
}
]
};
var chartOptions = {
responsive: true,
title: {
display: true,
text: 'Demo Fill between lines'
}
};
var chartDemo = new Chart($('#demo').get(0), {
type: 'line',
data: chartData,
options: chartOptions
});
I followed your instructions and commented out the first two datasets. The result looks fine to me.
const chartData = {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
datasets: [
/*
{
label: "Set 1",
data: [10, 20, null, 40, 30, null, 20, 40],
borderColor: "#F00",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(255,0,0, 0.2)"
},
{
label: "Set 2",
data: [60, 40, 10, 50, 60, null, 50, 20],
borderColor: "#00F",
fill: false,
steppedLine: false,
tension: 0.5
},
*/
{
label: "Set 2",
data: [40, 50, 30, 30, 20, null, 60, 40],
borderColor: "#0D0",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(5,5,255, 0.2)"
}
]
};
var chartOptions = {
responsive: true,
title: {
display: true,
text: 'Demo Fill between lines'
}
};
var chartDemo = new Chart(document.getElementById('demo'), {
type: 'line',
data: chartData,
options: chartOptions
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="demo" height="90"></canvas>
UPDATE
The problem lies in the fillBetweenLinesPlugin that simply doesn't work correctly when only one line is drawn. This can easily be fixed by changing the condition in the for loop by adding datasets.length > 1 as follows.
for (var d = 0; datasets.length > 1 && d < datasets.length; d++) {
...
}
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?