Add horizontal line stack flot chart - javascript

I will like to add an horizontal line to a stacked flot chart. Thought that I could just create a shaded area but got stuck on how to remove the rest of the area below it.
Here is a working fiddle: http://jsfiddle.net/cefx1eq2/1/ where the labeled "horLine" is where I will like as an example add an hypothetical line like that could mean average, or any type of limit.
Section of data where need help:
{
"label": "horLine",
"color": "#000",
"data": [ ["Comment", 125] ] //changing this data to be only a line
}


You can add markings to the grid options of your chart to draw a line.
grid: {
markings: [ { xaxis: { from: 0, to: 2 }, yaxis: { from: 10, to: 10 }, color: "#bb0000" }, ... ]
}
An example of drawing a black horizontal line through your chart at 125 would look like this:
grid: {
borderColor: '#eee',
borderWidth: 1,
hoverable: true,
backgroundColor: '#fcfcfc',
markings: [{ yaxis: { from: 125, to: 125 }, color: "#000000" }]
}

Related

several graph has the same legend in flot

I am using JQuery Flot graph plugin to plot some bar charts in a page. when I plot a graph by datas and option below:
var chartData = [{
label: 'success',
data: [[0,1],[1,1]],
bars: {
order: 0,
fillColor: '#fff'
},
color: '#fff'
}, {
label: 'fail',
data: [[0,3],[2,1]],
bars: {
order: 1,
fillColor: 'rgba(255,255,255,0.5)'
},
color: 'rgba(255,255,255,0.5)'
}];
var barChartOptions = {
...
legend:{
container: '.flot-chart-legends--bar',
backgroundOpacity: 0.5,
noColumns: 0,
lineWidth: 0,
labelBoxBorderColor: 'rgba(255,255,255,0)'
}
};
$.plot($('.flot-bar'), chartData, barChartOptions);
It works for my bar chart, however, the other charts which hasn't label attached the same label. How can I do for it? Please help!

I sovled it! Check the source code in flot.js and found the incorrect code as follow:
$(options.legend.container).html(table);
which makes all the selectors of container contained the same html. I corrected it like this:
placeholder.parent().find(options.legend.container).html(table);
and the html is only attahced to the right chart I want.

In highcharts, is it possible to make a bar in a column chart with its top bordering the edge of the chart area "on top" of the chart border?

This is the JSFiddle for demonstration.
In the two bars shown in the above JSFiddle, the respective top and the bottom side of the two bars are not black, but grey, since that is the color of the chart border/border of plot area. Would it be possible to make the two bars to be "on top" of the chart border (so that all their sides are black)? I have tried with zIndex in "series". But that does not work.
These are the most relevant javascript code:
Highcharts.chart('container', {
chart: {
type: 'column',
borderWidth: 1,
plotBorderWidth: 1,
marginBottom: 100
},
plotOptions: {
series: {
borderColor: 'black',
animation: false
},
},
xAxis: {
categories: ['1', '2']
},
yAxis: {
tickInterval: 10,
min: -50,
max: 50
},
series: [{
data: [50, -50],
zIndex: 300
}]
});

To achieve this effect, you can set series.column.clip: false.
Disabling this option allows series rendering over plotArea borders.
series: [{
clip: false,
data: [50, -50]
}]
Live demo:
https://jsfiddle.net/BlackLabel/2kyc4dbu/
API reference:
https://api.highcharts.com/highcharts/series.column.clip

What should I do to make the x-axis of a graph bold with Highchart?

Note that the x-axis here means the horizontal line which corresponds the 0 value, i.e. the desired result is:
However, I can only achieve this.
This is the relevant piece of code:
xAxis: {
lineColor: 'black',
lineWidth: 2
},
How to decide which horizontal line to be bolded?

You can draw a line on the Y-axis at position 0. This causes for a horizontal line to be drawn at value '0'. This is done by the highcharts option plotLines
Highcharts.chart('container', {
yAxis: {
min: -1,
max: 4,
plotLines: [{
value: 0,
color: 'black',
width: 2,
zIndex: 3
}],
},
series: [{
data: [1, 2, 3]
}]
});

Is it possible to maintain the fillcolor when the y-axis is reversed?

I have a line graph that uses a fillColor / linearGradient. When I reverse the y-axis, the fill moves to be from the line up to the top of the graph. I want it to stay as the fill from the line down to the x-axis.
For example:
http://highcharts.com/stock/demo/yaxis-reversed
Notice that the blue fill is above the line when the Y-axis is reversed. I want it to remain below the line even when I reverse the axis.
Is this possible?

Here is a simple example as explained in my comment. I hope this helps.
This is the important part:
chart: {
renderTo: 'container',
...
backgroundColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, 'rgb(69, 114, 167)'],
[1, 'rgba(2,0,0,0)']
]
},
},
...
plotOptions: {
series: {
fillColor: 'white'
}
},

How to create a line to show threshold in bar graph

I am using flot to create bar charts like
I need to specify a threshold like a line at 750(y axis) for example, to show the limit...
there is one jquery.flot.threshold.js file in flot package, but i dont know how to use it on bar charts.How to do it ?

Seems there was some issues with using the threshold plugin with the current flot release version. If you just want to mark a threshold, it might be easier to use the grid markings option:
$.plot($("#placeholder"), [ d1, d2, d3 ], {
series: {
stack: true,
bars: { show: true, barWidth: 0.6 }
},
grid: {
markings: [ { xaxis: { from: 0, to: 12 }, yaxis: { from: 0, to: 20 }, color: "#6D7B8D" }]
}
});
Produces (fiddle here):

Categories