Rendering issue with 2 Google charts on the same page - javascript

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/

Related

Alter first vertical grid line in nvd3

I want to remove (or make effectively hidden) the first vertical line in the grid for an nvd3 chart. I thought it was a problem with my chart, but after testing it, I realized it seems to be a more general problem.
I tested it by running the line:
d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999')
in the console, at the simplest line chart I could find: http://nvd3.org/examples/line.html and it still didn't work! It changes all the lines except the very first vertical line. I'm baffled, I've tried every combination of classes with stroke, fill, opacity, etc - I can either affect the entire svg (with opacity), or nothing. Anyone have any ideas?
EDIT:
I should have specified this originally, I apologize - I do not want to remove the Y axis entirely. I still need the label and the tick marks - I just want to remove that one vertical line (or at least lighten it - it is much darker than the rest of my chart).
Going by your comments:
You don't want to see the " the first vertical line in the grid for an nvd3 chart"
Which is the y axis:
Two ways to achieve that:
Option1
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(false) //hide the y-axis
.showXAxis(true); //Show the x-axis
Option2:
Since in your example you are going for a CSS option
d3.selectAll('.nv-y').attr('display','none')
I will prefer Option1
EDIT post your clarification, you wish to make the y axis line light you can use:
d3.selectAll('.nv-y path').attr('opacity','0.1')
or if you want to hide it completely
d3.selectAll('.nv-y path').attr('display','none')
One solution is to specify an array of tick values that you want to use for each axis. Use axis.tickValues([values]) to explicitly declare which XAxis ticks you want for your graph. So you could pop .tickValues([1, 2, 3, 5, 8, 13, 21]); into either the chart.xAxis or the chart.yAxis, and ticks would only appear from the corresponding values in the array. In your case, you would want to put it in the chart.xAxis variable. However if you want to have a dynamic chart, explicitly declaring the tick values would pose a problem once the data is updated in the graph. If on the other hand you are using static data, this is a pretty easy fix. I've tested this solution in their live code editor and it seems to do the trick.
Refer to https://github.com/mbostock/d3/wiki/SVG-Axes#ticks to see some other directives that could be of use.

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.

Spline chart drawn on the xaxis in case of single value or constant values - highchart

while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

Highchart - spline chart - Single value or horizontal line series draws ON the x axis [duplicate]

while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

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

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.

Categories