have found that the tooltip between column and arearange charts is different. I would also like to see the tooltip to the side of the mousepointer - PIC 1. And not centered in the middle - PIC 2. How can I do that? I did not find anything in the API reference.
Thank you for your help and best regards,
Chris
** UPDATE **
Have a look: The "blue" tooltip (1st pic) is what I want for the 2nd pic below. Can anybody help me?
The difference results from the fact that a tooltip is related with points. In the first example there is used only one series - arearange. On the other hand, in the second example there is a chart with two series - line and arearange.
In that case with enabled tooltip.shared configuration, a tooltip shows every point with the same x value.
API Reference: https://api.highcharts.com/highcharts/tooltip.shared
Related
I'm using highchart and I have some annotation on it, but all annotation is load first,
I decreased the series animation duration to 10000, The question is how can I show one by one annotations on the chart?
I mean I want to show first annotation on series then disappear the first and show the second and so on.
show this image that I found on the internet:
I will appreciate sharing your data with me,
Thanks in advance
I prepared a demo which shows how to keep tooltip shown for the last point.
Demo: https://jsfiddle.net/BlackLabel/vL7k1yce/
render() {
let chart = this,
points = chart.series[0].points;
chart.tooltip.refresh(points[points.length - 1]);
}
Is that what you wanted to achieve?
API: https://api.highcharts.com/highcharts/chart.events.render
API: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
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/
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'm trying to apply a scale to y-axis in my chart, but when I do it I get a blank svg object.
I did the same thing with the x-axis and it's working fine.
Problem happens when you uncomment this section
// .y(function(d) {
// return yScale(d[1])
// })
http://jsfiddle.net/MgwR5/1/
Could anyone tell me what I'm doing wrong?
The area functions are y0() and y1(), not y(). Ref: D3 API documentation
Have a look at the js bin. I've put a bunch of comments in that should help and I've assumed that you wanted a line chart.
If you want to put axis's on your chart you should be looking to use the d3.svg.axis function. It does most of the heavy lifting for you. You also need to make space for the axis try using some padding and margins (you might want to look at this example or the example on the js bin d3 page - use the link at the top of the google groups d3 page). You also probably want to separate out your axis's and your plot by using svg's group ('g').
Cheers
Error bars (or confidence intervals)are not currently supported in Highcharts but someone edited an existing module as a workaraound. The results are shown in this jsFiddle:
http://jsfiddle.net/b74Tt/
However, what if I have more than one series that needs to have error bars? How can one ErrorBar series be tied to a specific column series (and therefore be displayed exactly on top of it)? My problem is shown here in this other jsFiddle:
http://jsfiddle.net/FaYdK/1/
I added a new type of chart based on the column one. What I get is thin columns that act as error bars. I also used the events > legendItemClick to create a small function that hides the next series (the Error bar) when a column is clicked, so that its corresponding error bar also hides or displays.
See the following example:
http://jsfiddle.net/FaYdK/3/
I'm pretty satisfied with the solution, the only thing is that I would like the error bars to be displayed in the usual form (an inverted H) instead of a single line (thin rectangle). If anyone knows how to do this, please comment!