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.
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 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);
});
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:
I am trying to customize highcharts
1) I need to change the height of the plotlines
2) Show the marker value inside the marker image itself at a specific place(Inside the white circles at the top)
This is what I have achieved so far
Highcharts.setOptions({
global: {
useUTC: false
}
});
/*function updateData(x,y)
{
var series = chart.series[0];
series.addPoint([x, y], true, true);
}*/
var chart;
$(function () {
var color = '#AA34FF';
$('#container').highcharts({
chart: {
events: {
load: function(event) {
_bindCustomEvents();
}
},
backgroundColor: 'transparent'
},
series: [
{
color:
{
linearGradient:
{
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops:
[
/*[0, '#a83e3e'],
[0.21, '#d34e47'],
[0.40, '#edbb5a'],
[0.57, '#e2e57a'],
[0.76, '#8dcc63'],
[1, '#7ab237']*/
[0, '#7ab237'],
[0.21, '#8dcc63'],
[0.40, '#e2e57a'],
[0.57, '#edbb5a'],
[0.76, '#d34e47'],
[1, '#a83e3e']
]
},
lineWidth: 4,
marker: {
enabled: false,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
},
type: 'spline',
data: [1, 2, 5, 3, 6, 7, 4],
backgroundColor: 'transparent',
plotShadow : false
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc08.deviantart.net/fs71/f/2014/016/b/9/top_marker_by_skyrbe-d72ewk0.png)'
},
data: [8,8,8,8,8,8,8],
type:'scatter'
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc03.deviantart.net/fs71/f/2014/016/f/a/bottom_marker_by_skyrbe-d72ew7w.png)'
},
data: [-1,-1,-1,-1,-1,-1,-1],
type:'scatter'
}
],
xAxis: {
categories: [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat'
],
title: {
enabled: true,
text: null,
},
labels: {
style: {
fontFamily: 'gestaregular',
fontSize: '16px',
color:'#fff'
}
},
plotLines: [
{ // mark the weekend
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 0,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 1,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 2,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 3,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 4,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 5,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 6,
dashStyle: 'dash',
zIndex:10
}],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
},
yAxis: {
labels: {
enabled: false
},
title: {
enabled: true,
text: null,
}
},
legend: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
});
});
function _bindCustomEvents()
{
var chart = $('#container').highcharts();
chart.setTitle({ text: ''});
$('.highcharts-axis').hide();
$('.highcharts-grid').hide();
$('.highcharts-axis').find('path').hide();
}
FIDDLE LINK
This is how I want it to look like : Instead of '2' in the top circles , it should be the corresponding value from the center spline [1, 2, 5, 3, 6, 7, 4]
1) The plotLines are infinite. The extend as far as the plot area is. So, to limit this, how about you change your yAxis max:
yAxis: {
max: 8,
labels: {
enabled: false
},
title: {
enabled: true,
text: null
}
},
Or, you could create a column series on the points you want and give them a certain value for the height you want. Making the columns thin to mimic your plotLines will help like so:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
data: [8, 8, 8, 8, 8, 8, 8]
},
...
2) Which values in the circles (I am guessing)? The "Series 1: XX"? Or the whole tooltip?
EDIT:
For question 2 you can do this with a formatter function on the dataLabel for the scatter series (your circles). Here is the function:
var customFormatPoint = function (pointX, seriesIndex) {
var theChart = $('#container').highcharts();
var yValue = null;
var points = theChart.series[seriesIndex].options.data[pointX];
return points;
};
You call this from:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return customFormatPoint(this.point.x, 1);
}
},
data: [7.70, 7.70, 7.70, 7.70, 7.70, 7.70, 7.70]
}, {...
Key element here is that you have this.point.x which is that scatter point's xAxis location. You then need to send in which index the series is that contains the y value you want to show in the dataLabel.
I have also removed the plotLines and created a series that just contains the bars with width of 1 and no border. I had to mess around to get the end of the bar (its max value) to coincide with the scatter circle diameter.
Please see this jsFiddle.
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?