I'm trying to create a highstock chart which:
Renders an initial chart with one series
After an event (button click) adds another series
Dynamically get's updated by adding points (to both series).
1 and 2 work, but adding points to the newly (dynamically) added series doesn't seem to work, see: http://jsfiddle.net/albertsikkema/KGTBB/1/
When I add the series at chart creation time adding points work, so I'm guessing it has something to do with how the series is added.
The problem is that your navigator is an object within chart.series.
If you console log chart.series you will see that:
0 = Plot line A
1 = The navigator
2 = Plot line B
So you are trying to addPoints onto the navigator series, instead do:
chart.series[0].addPoint([x, y], true, true);
chart.series[2].addPoint([x, y], true, true);
or, a better method would be to target your series by their name.
Related
i have a chart that doesn't hide the previous series when i click for the drilldown on a column. New series is added, but beside of the old series, how can i solve the problem? I also tried to not adding a new series, but simply keeping the drilldown option on the old series; still the old series doesn't disappear when i click on a column (i was expecting an empty chart with this drilldown).
Edit:
I have three charts loaded. First chart -> drilldown -> second chart -> drilldown -> third chart -> broken drilldown.
I noticed that the "load" function of the third chart is never called. And, the button of the previous second drilldown never disappear.
I have a chart on my page and I want to make it respond to user input to show variations on changing the gap between two points on the axis , something like
so far I have tried using valueAxis.x = my desired value
but it does not change the graph.
How to do that?
First you need to set autogridCount to false
valueAxis.autoGridCount=false;
then you need to use
valueAxis.gridCount = no of grid lines;
here is a fiddle
I have a highcharts chart that I need to plot but which has lines which can go back on themselves on the X Axis.
e.g. jsfiddle example
My problem isn't that I can't plot it but rather the series tooltips don't display correctly.
If you zoom right in to individual points they seem ok, but not at normal zoom level.
E.g. if you scan your mouse across the series from right to left it doesn't want to show you the tooltip on x Value 1, intead it jumps to the second set of values on x value 2.
I've changed the tooltips to being not shared:
tooltip: {
shared: false,
},
but this has made little difference, apart from now it seems to work when zoomed in, but I suspect this is only because there are only one set of x Axis values visible.
Does anybody know how it is possible to configure Highcharts to allow for series where the x values aren't sorted either ascending or descending as I can't find anything in the documentation.
From the API documentation:
Note that line series and derived types like spline and area, require
data to be sorted by X because it interpolates mouse coordinates for
the tooltip. Column and scatter series, where each point has its own
mouse event, does not require sorting.
So change your series to type: 'scatter' with a lineWidth > 0. Here's an updated fiddle.
I'm having an issue with the scrollbar in multiple series line chart where x-axis is date.
Looks like the max length of the scrollbar is determined by the length of the first (older) series.
Although when pressing the 'All' button in range selector I can see all of the series, as the first series ends before the others, as soon as I touch the scrollbar the chart readjusts so that all I can see is the data contained in the first series' length period.
After that, if I want to see the series after the first one has ended, I need to drag the chart or click the 'All' button in range selector again.
I would really appreciate any help you could provide.
Thanks in advance!
jsFiddle: http://jsfiddle.net/8DdP4/2/
Indeed, it's not supported to cover all series. Here you can find workarund.
With demo: http://jsfiddle.net/highcharts/SD4XN/
In short: in callback add series to the navigator on your own:
function (chart) {
chart.addSeries({
data: seriesOptions[2].data,
xAxis: 1,
yAxis: 1
});
}
The scrollbar you refer to is called navigator.
There is a property in navigator called series which is defined as:
series: Object
Options for the navigator series. Available options are the same as
any series, documented at plotOptions and series.
Unless data is explicitly defined on navigator.series, the data is
borrowed from the first series in the chart.
You can see it here.
Im not sure if you can build your navigator from multiple series, i suppose it is posibles. In case it is not build build the navigator with the largest.
I'm using Google charts to interactively draw some data.
I want to draw two charts. The first chart plots f(x) vs. x. The second chart plots g(x,y) vs. y (for a fixed value x). On mouseover for the first chart, the x value will be used to redraw g(x,y) vs. y.
For example, on mouseover of x=1 on the first chart, the second chart would refresh, drawing g(1,y) vs. y.
The only way I've been able to accomplish this was to manually bind the mouseover event in javascript, and trigger a full redraw of the second chart (by erasing its data and copying in data with the moused over x value). However, there is a built-in mechanism to redraw the chart using values from controls (e.g. a slider, example here).
Does anyone know if there is a way to bind two charts so that the mouseover event can be used to redraw one chart with new parameters?
Have a look at the Programmatic Control Changes example. You can change the lower and upper bounds of the slider by code:
document.getElementById('rangeButton').onclick = function() {
slider.setState({'lowValue': 2, 'highValue': 5});
slider.draw();
};
If you choose a lowValue and highValue of both 5 for example only rows containing this value for the specified column will be shown. Call this inside your onmouseover event of the first chart:
google.visualization.events.addListener(chart1, 'onmouseover', function (e) {
// get the value for x in the current row from the data table
var xValue = data.getValue (e.row, 0);
// set the new bounds of the slider
slider.setState({'lowValue': xValue, 'highValue': xValue});
// update the slider (and chart2)
slider.draw();
}
);
As you will not want the slider being visible, just hide it:
// the slider has been created with 'containerId': 'control'
document.getElementById ("control").style.display = "none";