Google Charts - Line chart like in Google Adsense - google-visualization

does someone has a cool example of 2 vAxis line Chart like this from Google adnsese, where you can add and remove values to display in the chart?
I have already done the 2 vAxis chart and display many values, but now I would like to add and remove some of them and rebuild the chart.


I haven't seen the AdSense Chart, but I will try to answer.
To add or remove data points or lines from a chart you can manipulate the DataTable (or create a new one) and then call 'draw' again on the chart.
here is an example with animation:
var data = google.visualization.arrayToDataTable([
['x','Domain', 'Line 1', 'Line 2'],
['A', 1, 1, 0.5],
['B', 2, 0.5, 1]
]);
// Use transition animation
var opts = {animation: { duration: 1000, easing: 'out' }}
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, opts);
// remove a data line (column)
data.removeColumn(3);
chart.draw(data, opts);
// add a new data point (row)
data.addRow(['C',4,1,0.5]);
chart.draw(data, opts);

Related

chart.js how to fill from a line to the max or min of the y-axis

I have a bootstrap modal that shows a plot of xy data between a max and min tolerance range. To show tolerances lines, I create two datasets for the min (30) and max (70) horizontal lines. To highlight the tolerance area, I create another two lines at the yAxes max and min plot range values. The issue I have is that when I use chart.scales['y-axis-0'] to get the yAxes range the values are not correctly updated. They just appear as 0 and 100. Strangely if I close and then reopen the modal the ranges are then correct. It seems that chartjs does an automatic calculation of the yAxes range, however, I am not able to get access to it. Is there a way to get access to the yAxes ranges just before the plot is drawn? Or, is there a better way to solve this problem than creating two lines at the top and bottom of the plot and filling up or down to them...?
var y_axis = chart.scales['y-axis-0'];
var y_tol_max = new Array(y.length).fill(70);
var y_tol_min = new Array(y.length).fill(30);
var y_axis_max = new Array(y.length).fill(y_axis.max);
var y_axis_min = new Array(y.length).fill(y_axis.min);
chart.data.datasets.push({ borderColor: '#ffe6e6', data: y_axis_max, fill: false, radius: 0 });
chart.data.datasets.push({ borderColor: '#ffe6e6', backgroundColor: '#ffe6e6', data: y_tol_max, fill: '-1', label: 'Danger', radius: 0 });

Strange diagonal line in Google Visualization API

Sometimes I get a strange diagonal line in my Google Line Chart. Please see below the blue Volume chart.
It is has that "closing" line from the first to the last value.
Any idea how this comes?
data = new google.visualization.DataTable()
data.addColumn('datetime', 'Date')
data.addColumn('number', 'Volume')
data.addColumn('number', 'Connected')
for tracking in trackings
if(tracking.createdAt instanceof Date && tracking.volume? && typeof tracking.volume is "number")
connected = if(tracking.connected? && tracking.connected) then 10000 else -10000
data.addRow([tracking.createdAt, tracking.volume, connected])
options = {
title: 'Sensor Values'
legend:
position: 'bottom'
hAxis:
minValue: from
maxValue: to
curveType: 'function'
}
chart = new google.visualization.LineChart(document.getElementById('volumeChart'))
chart.draw(data, options)

For us the problem was that we accidentally added our dataset twice to the graph. Adding it only once did the trick ;)

The issue disappears when you sort the data by date.
It appeared when I had ca. more than 200 unsorted data points on the graph.
In Meteor / MongoDB this worked for me:
data = SensorTracking.find({}, {sort: {createdAt: 1}}).fetch()

Show all values in stacked area charts at given time

Amazon did a great job with the monitoring in OpsWorks (see screenshot). You can point at any time in any of the area charts and see all values for all charts at that time.
Is it possible to achieve something similar with the Google Visualisation API?
I also have multiple (stacked) area charts and it's a pain to point at each datapoint to get the exact value. Some of them are overlapping or very close together.

You can't trigger the tooltips in all of the charts at the same time, but if you disable the built-in tooltips, you can achieve something similar by building out your tooltips in HTML and populating them manually in a "onmouseover" event handler:
function mouseOverHandler (e) {
// use e.row, e.column to find data and populate your tooltips
}
function mouseOutHandler (e) {
// clear the tooltips
}
google.visualization.events.addListener(chart1, 'onmouseover', mouseOverHandler);
google.visualization.events.addListener(chart1, 'onmouseout', mouseOutHandler);
google.visualization.events.addListener(chart2, 'onmouseover', mouseOverHandler);
google.visualization.events.addListener(chart2, 'onmouseout', mouseOutHandler);
// etc...
In your stacked area chart (assuming you do not replace the tooltips with a custom solution), you can set the focusTarget option to 'category' to make all values at a given x-axis value show up in the tooltip (works only within one chart, not across charts).

You can also cheat by putting all three charts in the same chart element with a little trickery (and some limitations). For instance, you can make the chart like this:
Here is the code for that (dummy data):
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = new google.visualization.DataTable();
data.addColumn('number', 'time');
data.addColumn('number', 'used');
data.addColumn('number', 'cached');
data.addColumn('number', 'free');
data.addColumn('number', 'user');
data.addColumn('number', 'system');
data.addColumn('number', 'io wait');
data.addColumn('number', '1 min');
data.addColumn('number', '5 min');
data.addColumn('number', '15 min');
data.addRows([
[1, {v:0.1, f:'10%'},{v:0.55, f:'45%'},{v:1, f:'45%'},{v:1.01, f:'0.15 GiB'},{v:1.83, f:'12.45 GiB'},{v:1.18, f:'2.7 GiB'},{v:2.28166561658701, f:'28.2%'},{v:2.38024858239246, f:'38.0%'},{v:2.42249842488051, f:'42.2%'}],
[2, {v:0.2, f:'20%'},{v:0.6, f:'40%'},{v:1, f:'40%'},{v:1.54, f:'8.1 GiB'},{v:1.47, f:'7.05 GiB'},{v:1.77, f:'11.55 GiB'},{v:2.53503269167234, f:'53.5%'},{v:2.74904576834128, f:'74.9%'},{v:2.4119751725877, f:'41.2%'}],
[3, {v:0.3, f:'30%'},{v:0.65, f:'35%'},{v:1, f:'35%'},{v:1.13, f:'1.95 GiB'},{v:1.15, f:'2.25 GiB'},{v:1.75, f:'11.25 GiB'},{v:2.73464579773048, f:'73.5%'},{v:2.85218912536736, f:'85.2%'},{v:2.80811037750353, f:'80.8%'}],
[4, {v:0.4, f:'40%'},{v:0.7, f:'30%'},{v:1, f:'30%'},{v:1.27, f:'4.05 GiB'},{v:1.86, f:'12.9 GiB'},{v:1.1, f:'1.5 GiB'},{v:2.86045009159487, f:'86.0%'},{v:2.92068159800651, f:'92.1%'},{v:2.54208355770477, f:'54.2%'}],
[5, {v:0.5, f:'50%'},{v:0.75, f:'25%'},{v:1, f:'25%'},{v:1.23, f:'3.45 GiB'},{v:1.12, f:'1.8 GiB'},{v:1.88, f:'13.2 GiB'},{v:2.89980619585711, f:'90.0%'},{v:2.8728120099814, f:'87.3%'},{v:2.75583720451997, f:'75.6%'}],
[6, {v:0.6, f:'60%'},{v:0.8, f:'20%'},{v:1, f:'20%'},{v:1.5, f:'7.5 GiB'},{v:1.78, f:'11.7 GiB'},{v:1.26, f:'3.9 GiB'},{v:2.84876005903125, f:'84.9%'},{v:2.66203284604438, f:'66.2%'},{v:2.63657004427344, f:'63.7%'}],
[7, {v:0.7, f:'70%'},{v:0.85, f:'15%'},{v:1, f:'15%'},{v:1.91, f:'13.65 GiB'},{v:1.26, f:'3.9 GiB'},{v:1.69, f:'10.35 GiB'},{v:2.71244021344925, f:'71.2%'},{v:2.78368423479417, f:'78.4%'},{v:2.69819140918026, f:'69.8%'}],
[8, {v:0.8, f:'80%'},{v:0.9, f:'10%'},{v:1, f:'10%'},{v:1.48, f:'7.2 GiB'},{v:1.51, f:'7.65 GiB'},{v:1.41, f:'6.15 GiB'},{v:2.50454251895529, f:'50.5%'},{v:2.59031474717769, f:'59.0%'},{v:2.33299806251049, f:'33.3%'}],
[9, {v:0.9, f:'90%'},{v:0.95, f:'5%'},{v:1, f:'5%'},{v:1.18, f:'2.7 GiB'},{v:1.53, f:'7.95 GiB'},{v:1.97, f:'14.55 GiB'},{v:2.24595415946281, f:'24.6%'},{v:2.24103507627355, f:'24.1%'},{v:2.22381828511115, f:'22.4%'}],
[10, {v:1, f:'100%'},{v:1, f:'0%'},{v:1, f:'0%'},{v:1.66, f:'9.9 GiB'},{v:1.61, f:'9.15 GiB'},{v:1.2, f:'3 GiB'},{v:2.1229770797314, f:'12.3%'},{v:2.13527478770454, f:'13.5%'},{v:2.14757249567768, f:'14.8%'}],
]);
// Create and draw the visualization.
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
isStacked: false,
width: 600,
height: 400,
areaOpacity: 0.0,
focusTarget: 'category',
series: { 0: {areaOpacity: 0.5}, 1: {areaOpacity: 0.5}, 2: {areaOpacity: 0.5} },
vAxis: { ticks: [{v:0, f:""}, {v:0.5, f:"7.5 GiB"}, {v:1, f:"15.0 GiB"}, {v:1.5, f:"50%"}, {v:2, f:"100%"}, {v:2.5, f:"50%"}, {v:3, f:"100%"}, ] }
});
}
Basically, I put all 3 series on the same chart by putting them all as percentages of 1/3rd of the chart. So the first series is from 0-1, the second from 1-2, and the third from 2-3. I then used liberal quantities of {v:, f:} notation to make them look like different numbers (for the GiB particularly), and used the ticks option to make the axis look like it has 3 scales. Finally, I set focusTarget: 'category' so all lines get selected when you mouseover any of them.
You can format colors and even add dummy series to add thicker black lines between the series if you want to make them look more 'distinct'. You can also do some tricky stuff with dummy series and white areas and 100% opacity to potentially add background colors to higher areas. But the general concept is as outlined above, depending on what you are going for, it could work too.

How to set the vertical scale in Google Charts

I have created a Google Chart Line Chart. There are data points at the bottom that do not show up because the upper points are large.
Here's my visualization function:
function drawVisualization() {
var data = google.visualization.arrayToDataTable(#table#);
var ac = new google.visualization.LineChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Billing Trend for this Month: #date#',
isStacked: true,
width: 1200,
height: 1000,
vAxis: {title: "Amount"},
hAxis: {title: "Date"}
});
}
I've looked through the param list but cannot find the proper one to set.
I would like the lower data points to be discernible.
Has anyone had luck with trying to do that?
Thanks

You can set the vAxis.logScale option to true, which will change the axis scale from linear to logarithmic. Your smaller values should then be discernible. There are a few other methods you could try as well (changing the value used to draw the data while keeping the tooltips the same; using a panel chart that zooms in on lower values); see some examples here: http://jsfiddle.net/asgallant/b4yCL/

put labels on top of inside bar in google interactive bar chart

I have created a bar chart using google Column Chart, now
I have only integer values in my datatable but google divide acis with float values, is there a way to force chart mark only integers?
is there any way to show value labels on top or inside bar chart? I found some way for image chart, but I whould like to keep chart interactive

There is no direct solution to this as yet because annotations are not supported in column chart. But let me share a work around for this: You can create a combo chart with two series having same data (as that of your column chart) along with the annotation column. Set the type of the first series to bars and that of the other series to line. Finally, specify visibleInLegend, lineWidth, and pointSize properties of the second series to false and 0s respectively.
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', label: 'Labels' });
data.addColumn({ type: 'number', label: 'Bar Series' });
data.addColumn({ type: 'number', label: 'Line Series' });
data.addColumn({ type: 'string', role: 'annotation' });
data.addRows([['Label1', 10, 10, '10'],
['Label1', 20, 20, '20'],
['Label1', 40, 40, '40'],
['Label1', 5, 5, '5'],
['Label1', 30, 30, '30'],
]);
var barchart = new google.visualization.ComboChart(document.getElementById('bar_element'));
var options = {series: [{ type: 'bars' },
{ type: 'line', lineWidth: 0, visibleInLegend:false, pointSize: 0}]};
barchart.draw(data, options);

For your first problem you can use gridlines property, take a look at this post to see how you can use it.
For the second question I don't really understand. When you go on a bar with your mouse, the popup with values isn't already displayed on the top of the bar?