Google Charts API: Highlighting closest Datapoints between 2 series. How? - javascript

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.

Related

Dygraph in Phyton : How to remove label but still use its values in the graph?

I am working with Dygraph in python. I want to remove a label from the legend. If you look into the example photo attached bellow you can see "A:2.77 B:2.29". Is it possible to remove the B label, but still use its values and to be displayed in the graph?
Currenlty, in my project self.page().runJavaScript(f'g.updateOptions({{file:{file},labels:{labels}}});') is getting the calculated labels and their values and displaying them. However, if I go and remove part of it , it will be removed from the graph as well.
self.exampleCalculated.emit({'Price (Next 2 days)': example_forecast['price1'][0:48], 'SystemPrice': systemPrice[0:48], 'Other': otherPrice[0:48]})
Example

Highcharts. Highlight line chart date interval on hover

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
},...]

Google charts geochart - text values in colorAxis

I am trying to render Google Geochart chart on my page and it renders okay. The only problem with the chart is the scale (colorAxis). As far as I know, from the developers guide, user can put values and colors that should be available on the scale.
The problem is, that I can put there only number values and I would like to change the scale, so it contains four text values - "low, medium, hard, extreme".
Is there any way to change the 1-4 scale to text scale, so min and max values on the scale would be strings, not integers.
I've already tried to put strings in colorAxis.minValue and colorAxis.maxValue but then, chart just ignores that.
colorAxis.minValue and colorAxis.maxValue according to Google Charts documentation are used for:
If present, specifies a minimum value for chart color data. Color data
values of this value and lower will be rendered as the first color in
the colorAxis.colors range.
What you want to change is the legend of the chart. I tried some options, but the best thing i could manage is simply add a string before min and max values with the following option.
var options = {
legend: {
numberFormat: "test"
}
};
Jsfiddle example here.

Rendering issue with 2 Google charts on the same page

I have a rendering problem when I have two column material Google charts on the same page. Basically, the first column gets partially drawn on the vertical line which corresponds to axis of the second chart. If I have only 1 chart - everything is OK.
Please take a look at the following screenshots to see the problem:
2 charts (problem): https://www.dropbox.com/s/9p0ji49kpv2vtl1/gc-svg-pb.png?dl=0
1 chart (no problems): https://www.dropbox.com/s/12rpxl23ojean2b/gc-svg-1.png?dl=0
It seems to be a problem with the different scales on the Y-axis. If you look at this example the problem is gone, because the widths of the Y-axis labels of both charts are equal: fiddle1
If you force the Y-axis label to a fixed width, using the vAxis.format option for example, the chart is also correctly rendered: fiddle2
You could try to define a usable format string (refer to the Google documentation for more information), but it seems like a bug in the Google API, see phts's answer for the support page.
You'd better to find/tell about your problem on Google Charts project page directly - https://code.google.com/p/google-visualization-api-issues/issues/list.
Here is the thing, the two tables are in the same line and their Y-axis unit confuses the charts styling. I mean;
There are two-digit numbers in the first case [25,34,33,45,...,26] and five-digit numbers in the second case [31209,43658,42007,...30177] These five-digit numbers become strings like 20K,40K...
Thus, problem is in that part. One solution can be formatting the numbers as #mhu suggested. Another solution can be using the ColumnChart type by changing the code part;
var chart = new google.visualization.ColumnChart(document.getElementById('traffic-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
and adding this to the options ;
hAxis: {viewWindowMode: 'maximize'}
https://jsfiddle.net/L0gxnywu/
Solution 2: You can change the div's sequence as;
<div id="requests-chart"></div>
<div id="traffic-chart"></div>
https://jsfiddle.net/3j4s1vfj/

Highcharts Columns with empty columns

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!

Categories