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',
});
}
}
}
}
},
Related
I'm trying out react-nvd3.js, and I have no problem rendering a line chart with a single series. However, I am not sure on how to render with multiple series on the same chart (same axis).
I know that my data is in the correct format since the chart will render one series (the first series). The option to show/hide the two series does appear correctly. I am guessing adjusting the y="value_1" should do the trick, but have so far not been successful.
my data:
datum = [
{
values: series_1,
key: 'value_1',
},{
values: series_2,
key: 'value_2',
}
];
and my rendering:
<NVD3Chart id="lineWithFocusChart" type="lineWithFocusChart" datum={datum} x="label" y="value_1"/>,
It seems you have a problem with how you are referencing the dataset to the x and y axis.
Try changing your attributes to
x='key' and y='values'
<NVD3Chart id="lineWithFocusChart" type="lineWithFocusChart" datum={datum} x="key" y="values"/>
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.
When I create a stockchart, I noticed by accident that highcharts seems to show or create points that do not actually exist in the data set.
Here is an jsfiddle that illustrates this:
( See added comment for the link, unable to just paste it because of idiotic rules on stackoverflow )
As you can see by hovering over the chart to show the tooltip, some of the data will show as having more than 2 decimals. In the data set there are no such data. All data has a maximum of 2 decimals.
Of course I can do Highcharts.numberFormat(this.y, 2) but to me this highlights a bigger problem since I am interested in the actual reported datapoint, and not approximations.
Is there a way to tell highcharts not to do this?
I've tried to use type:'spline' to show data points as illustrated here:
http://www.highcharts.com/demo/spline-irregular-time
But couldn't get spline and stockchart to coexist. I would like a stockchart but with actual points dotted or similar.
Data is grouped. You can disable data grouping by setting:
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
},
Example: http://jsfiddle.net/3Ld2zmum/17/
Markers can be enabled using:
plotOptions: {
series: {
marker: {
enabled: true
},
Example: http://jsfiddle.net/3Ld2zmum/18/
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'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.