I have array of series, where i have multiple series as one point and average line:
Each point has format(e.g. selected GI00021):
{
name: "GI00021",
url: "/generalInspection/21",
data: [null, null, null, null, null, 50]
}
I need to group this points in one title on legend, so legend will says: "General Inspections" and all points will have same marker and color. Also if i will click this label - all that poins will be hide.
I tried to done this by write:
series: [{
name: 'General Inspections',
data: gi_points,
marker : {
enabled : true
}
},
..
where gi_points array of objects:
{
name: "GI00021",
url: "/generalInspection/21",
x: 5,
y: 50
}
but i have problems with lines bettween points - they should not be exist:
I think 1 desicion to show data is more correct, but i don't undestand, how to group this points into one group.
Rather than bringing all these inspection points in as different series, have you considered aggregating (pushing) them into one single series? That way, the chart will automatically color and label them as one entity, which will also make it far easier to turn the points on and off as needed.
Now, if you wanted to show only the inspection points and not the lines between them (as I assume you want your average line to show the overall trend vs. the noise between each point), you could set the line color of your inspection point series to "transparent" and give the series markers their own color (see my answer here, with the original poster's suggestion for transparent lines: Highcharts box plot chart customization).
Please let me know if this is helpful for you.
Related
I have a Highcharts plot which looks something like this
representing time series data for several different series. The thing is, sometimes the data for a particular series is "unavailable" (as you can see with the purple series above), and so the data values are NaN.
I want to have some way of "capping" each series wherever there are NaN values - my ideas was to use plotBands for the corresponding color of each series between all NaN values. However, I cannot seem to figure out if this is even possible. I have done plenty of research and found demos which treat "area with missing points" by simply not displaying anything (as my current chart does), such as this demo with this image:
but I'm imagining a treatment of NaN values that looks something like this instead (I apologize for my lack of artistry)
Is this possible with Highcharts?
You have to use load events in chat to add plot band
Fiddle
chart: {
type: 'area',
spacingBottom: 30,
events: {
load: function () {
var series_data=this.series[1].data;//this is second series data
for(var i=0;i<series_data.length;i++){
if(series_data[i].y==null){
//adds plot band
this.xAxis[0].addPlotBand({
from: i-1, //point back
to: i+1, //point after
color: '#0066ff',
});
}
}
}
}
},
I want to represent two time series with Highcharts. My problem is that one has large values and the other one low values. When I plot them together, the one with low values appear as a straight line. I want to be able to plot them with two different scales, but find it impossible to do it. I put what I already have here on a jsfiddle, and the code is here:
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 300,
enabled:1
},
chart:{type:'line'},
series: [
{name: 'serie with high values',
color: 'red',
data: [1000,2000,3000,4000]
},
{name: 'serie with low values',
color: 'green',
data: [0.1,0.2,0.3,0.4,0.5]
},
],
legend: {
enabled:true,
},
})
});
I would appreciate if someone could point me how I could give a different scale to each time series - ideally, I will want to plot more than two, each of them having its own scale.
You can use to yAxis, like in the example
yAxis:[{
},{
opposite:true
}],
http://jsfiddle.net/S2uyp/1/
As the difference between high values and low values is very high so the chart is looking like this but if you try with the following values then you will see that the chart looks good
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 300,
enabled:1
},
chart:{type:'line'},
series: [
{name: 'serie with high values',
color: 'red',
data: [10,15,30,40]
},
{name: 'serie with low values',
color: 'green',
data: [0.1,1,5,10]
}],
legend: {
enabled:true
}
})
});
this is exactly what you want I guess.
Since you have an answer telling you how to accomplish specifically what you asked, let me add one that addresses the issue more fundamentally.
This is a classic example of when what you really need is two separate charts (generally, aligned vertically one above the other works best for line charts, where they can work with a common time axis).
That's a concept that seems to shock some people, but it really is the best solution, and there really is no negative aspect to having two charts instead of one.
The problem with plotting 2 series on one chart, with 2 different scales, is that it practically forces the user to make comparisons that are not real. When you plot 2 lines on a chart, the interaction of those 2 lines is generally something of importance, and will be seen as such by the viewer.
When the 2 lines have 2 different scales, the interaction is completely meaningless, and the two lines serve only to clutter the chart and obscure the message of the data.
Essentially, when you plot 2 series with 2 separate scales, you are making 2 charts already anyway - but you're scrunching them into one space where they get in each others way.
FWIW
{{UPDATE:
As an example, here is a fairly typical example of 2 series plotted on separate scales on the same chart:
http://jsfiddle.net/jlbriggs/GYbRY/
It could be cleaned up and improved a bit, but overall it's going to be a bit of a mess no matter what you do to it.
Here is the same data plotted on 2 separate charts, in significantly less space than the original:
http://jsfiddle.net/jlbriggs/m64Ys/
I feel it's hard to support the argument that the first example makes it easier to compare the variation in the two series.
i wonder if it's possible to draw confidence intervals like in this graph:
(source: tonarchiv.ch)
I.e. an interval for each sample and a point or small line in the "middle".
X-axis should just be a number (number of rating).
Columnrange is the answer! See: http://jsfiddle.net/dmN3N/18/
series: [{
type: 'columnrange',
data: [
[-0.547571175, 0.401498266],
[-0.960011899, 0.444655955],
...
]
}, {
type: 'scatter',
data: [-0.073036455, -0.257677972,
0.100955985, 0.106734365,
-0.12219027, -0.060577832
]
}]
If required, the dashes at each end of a column (see sample pic) could be generated with other (wider than tall) column ranges...
Here is an example rantanplan's suggestion of using columnranges for the dashes at the top and bottom of each bar:
The horizontal lines are created using 'columns' which are 15 pixels wide and 2 pixels tall, positioned at both ends of the data range. For example, here are the lines at the top of each bar:
type: 'columnrange',
pointWidth: 15,
minPointLength: 2,
data: [
[0.40, 0.40],
[0.30, 0.30]
]
Another series creates the lines at the bottom, and a third additional series (scatter) creates the diamond marker in the middle.
https://jsfiddle.net/ecjohbg1/4/
You can try to use plotBands: http://api.highcharts.com/highcharts#xAxis.plotBands
There is now a series type called 'errorbar' which fits this use case perfectly. While the other solutions glue together three different series for the intervals, the errorbar series does it all with one. A separate series is still needed for the mean.
Here is an example
https://www.highcharts.com/docs/chart-and-series-types/error-bar-series
Here is the API reference https://api.highcharts.com/highcharts/series.errorbar
I am trying to overlay 2 diagonal lines over top of a negative stacked bar chart. The purpose of these lines is to show where the optimal value for each bar should be.
The chart will always be from -10% to 10% along the x-axis, so the lines do not need to scale smaller if the graph grew. (though that would be nice to know how to do that as well if it's a small addition)
I am relatively new to HighCharts and I can't seem to find out if this is possible or not.
Given that the intersection of the lines are always going to intersect at the same point I made this. What I did was create two additional series that go from -10 to 0 and 10 to 0. You could do this with one series as well but maybe the male/female projection lines are different? Your choice.
Now, since I do not know where the two lines should intersect I had them end at the final category. You can adjust this by giving the two series different end points. The other trick is to fill the 2 projection lines with null for the in-between points and allow the 2 end points to be connected. I also hid the markers, hid the series from the legend, and allowed for different line styles.
Important bits:
{
name: 'line1',
type: 'line',
color: 'black',
dashStyle: 'dot',
connectNulls: true,
showInLegend: false,
marker: {
enabled: false
},
data: [0, null},
...
, 10]}
Since these data series are stacked we need to make sure only those series get stacked otherwise the 2 projected lines get stacked as well. Do this via:
plotOptions: {
bar: {
stacking: 'normal',
//pointWidth: 20
}
},
Note that is only applying stacking to the 'bar' types. Update jsFiddle.
I've already drawn a flot graph using some data:
var plot = $.plot($("#placeholder"),
[{
data: data,
}], {
series: {
points: {
show: true
}
},
grid: {
hoverable: true,
}
});
Now I'd like to highlight a single point on the graph, when a user hovers over an item elsewhere on the page.
I found this question, which explains how to totally redraw the series from scratch, but is there a way to highlight a single point?
Or add a new point in a different colour, which would have the effect of a highlight?
NB: when the user hovers over the relevant item elsewhere on the page, I will have the x and y coordinates of the related point, but not the pixel coordinates on the graph.
The API provides the following methods:
The Plot object returned from the plot function has some methods you
can call:
highlight(series, datapoint)
Highlight a specific datapoint in the data series. You can either
specify the actual objects, e.g. if you got them from a
"plotclick" event, or you can specify the indices, e.g.
highlight(1, 3) to highlight the fourth point in the second series
(remember, zero-based indexing).
unhighlight(series, datapoint) or unhighlight()
Remove the highlighting of the point, same parameters as
highlight.
If you call unhighlight with no parameters, e.g. as
plot.unhighlight(), all current highlights are removed.