I'm trying to implement highlight for a single section of line chart while hovering over this section. Under section I mean space between (in my case) vertical lines, which are representing separate date intervals depending on chart zoom level. The chart itself has dynamic data, which is being pulled from an endpoint with more detailed data, depending on date interval zoomed in.
During investigation I've found a plotBands property of x/yAxis. But the thing is, that this property only allows to set each plotBand manually.
So the question is, if there is something that will help me to do automatic creation of plotBands or similar hoverable/clickable stuff, for each separate time "interval"?
you can set the TestValue dynamically according to your needs and use something like this JSFiddle:
plotBands: [{
color: '#FCFFC5',
from: ($.TestValue)+1,
to: ($.TestValue)+2
},...]
Related
So I'm trying to get my highcharts plot to draw the recent minima and maxima.
I already figured the correct JSON sub-object is "plotLines", however my script just refuses to draw them without any error. Maybe someone of you can spot my error. The corresponding (and probably wrong, but that doesn't really matter for this example) values are listed to the left
thanks!
With you current values, the lines will never plot.
Your axis min is sitting at 500, and you are plotting lines at 498.
The axis will not expand to show plotLines or plotBands - it will only expand to show data (or based on minPadding/maxPAdding, etc).
You will need to check that your lines are within your axis min/max in order to display them.
You can do that by using the getExtremes() method, and if needed, the setExtremes() method:
http://api.highcharts.com/highcharts#Axis.getExtremes
http://api.highcharts.com/highcharts#Axis.setExtremes
Edit to incorporate comments:
If the line is the same value as a grid line, you will need to set a zIndex on either the plotLine or the gridLines - by default the gridLines are above the plotLines
I'm pulling some data out of graphite, transforming it and using epoch.js to display it as a realtime line chart.
$('#graph').epoch({
type: 'time.line',
data: data,
axes: ['left', 'right', 'bottom']
});
This successfully displays the graph, but both the lines are black. The graph in the epoch example has different colours for each line, but I can't find any reference of how to do this in the docs or work out how it is doing it from the example's source.
How can I change the colours of the lines?
I've faced the same issue and it took me quite some time before I realized what's wrong.
In my case I forgot to add class="epoch category10" to the div that has the graph in it. E.g.
<div id="area" class="epoch category10" style="height: 200px;"></div>
It seems that the examples on the basic and real-time chart pages are missing this class definition. The getting started page however specifically states the above line.
If you want to set colors layer per layer, this trick works:
https://github.com/epochjs/epoch/issues/137#issuecomment-177531945
var layer_num = 0 # insert here the number of the layer
var catname = "category2" # insert here the css class category
chart.getVisibleLayers()[layer_num].className = "layer " + catname
Visit this link for more informations about category colors. By default, category10 is used, so "category1" is #1f77b4, "category2" is #ff7f0e etc
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 have a Google line chart that contains a few years of data. Each year is a separate series. The chart legends displaying each year/series are clickable and clicking on any given 2 or more of these legends/series, displays them and their corresponding Datapoints and their annotations. In the hAxis, these Datapoints are integers ranging from 1 to aprox. 6,000,000. I also have their values displayed under annotations for each Datapoint.
Notice that when you click on a datapoint, it increases in size and gains a white border. If you unclick it, it returns to it's original form.
My question is:
Is it possible to change my code to look for the top 10 closest-to-each-other integers between 2 series based on a predefined threshhold? I know styling may not be an option but perhaps there may be a way to force a Datapoint to appear clicked.
Please allow me to illustrate it for better understanding.
You can do that using option selectionMode: 'multiple' and selecting appropriate points using setSelection() method. For example:
chart.setSelection([
{row:0, column:1},
{row:0, column:2},
{row:2, column:1},
{row:2, column:2}
]);
Of course, you will have to find out points which correspond to defined threshold. See example at jsbin.
Update: example with DataView.
I want to show a column chart that will show empty columns on days without data. I have previously done this in amCharts, but trying to switch everything over to js charting.
Here is an example:
https://skitch.com/jhanifen/gy324/jhanifen-skitch.com
Basically if I could change the color of individual columns that would also work.
Answer provided on Highcharts forum.
http://highslide.com/forum/viewtopic.php?f=9&t=12873
You can set the y value to 100, and set a secondary value to the actual value, which you can then grab in the tooltip formatter.
see this example: http://jsfiddle.net/jlbriggs/BLxUL/
Depending on which you have more of, you can either set the bar color in the plotOptions, and call the 'blank' color in the data array when needed, or the other way around (as in the example)
Thanks jlbriggs!