I am working with one of their examples, in essence I need this functionality with the addition of when you hover over one of the values on the chart, I need a 4th data element.
The example here is superbowl winning football teams. When you hover over one of the time series items, I would also like to show the score of the game. (I need this chart with one more piece of addition text data in the hover.
This code is directly from googles example:
google.charts.load('current', {
'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Asset');
data.addColumn('date', 'Arrive');
data.addColumn('date', 'Depart');
data.addRows([
['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5)],
['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)],
['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)],
['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)],
['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)],
['Pittsburgh Steelers', new Date(2004, 8, 5), new Date(2005, 1, 5)],
['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5)],
['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5)],
['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5)],
['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5)],
['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5)],
['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5)],
['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5)],
['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5)],
['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5)],
]);
var options = {
height: 450,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
there are no standard configuration options to change the default tooltip
but you can add your own custom tooltip, see Customizing tooltips in the Timeline reference
in order to add a custom tooltip, you must provide all 5 columns in the data table.
(row label, bar label, tooltip, start, and end)
the tooltip column will just be a string, either a simple value or html
see following working snippet,
here, a DataView is used to add the tooltip column.
this allows the tooltip to be built dynamically based on the data in the data table
also, the score of the game is added to the original data table, for easy reference,
but is excluded from the data view...
google.charts.load('current', {
packages: ['timeline']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Asset');
data.addColumn('date', 'Arrive');
data.addColumn('date', 'Depart');
data.addColumn('string', 'Score');
data.addRows([
['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5), '35 - 21'],
['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5), '35 - 21'],
['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5), '35 - 21'],
['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5), '35 - 21'],
['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5), '35 - 21'],
['Pittsburgh Steelers', new Date(2004, 8, 5), new Date(2005, 1, 5), '35 - 21'],
['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5), '35 - 21'],
['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5), '35 - 21'],
['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5), '35 - 21'],
['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5), '35 - 21'],
['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5), '35 - 21'],
['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5), '35 - 21'],
['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5), '35 - 21'],
['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5), '35 - 21'],
['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5), '35 - 21'],
]);
var formatMonth = new google.visualization.DateFormat({
pattern: 'MMM yyyy'
});
var view = new google.visualization.DataView(data);
view.setColumns([0, {
label: 'bar label',
type: 'string',
calc: function () {
return null;
}
}, {
role: 'tooltip',
type: 'string',
calc: function (dt, row) {
// build tooltip
var dateBegin = dt.getValue(row, 1);
var dateEnd = dt.getValue(row, 2);
var oneDay = (24 * 60 * 60 * 1000);
var duration = (((dateEnd.getTime() - dateBegin.getTime()) / oneDay) / 365.25) * 12;
var tooltip = '<div><div class="ggl-tooltip"><span>';
tooltip += dt.getValue(row, 0) + '</span></div>';
tooltip += '<div class="ggl-tooltip"><div>' + formatMonth.formatValue(dateBegin) + ' - ';
tooltip += formatMonth.formatValue(dateEnd) + '</div>';
tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' months</div></div>';
tooltip += '<div class="ggl-tooltip"><span>Score: </span>' + dt.getValue(row, 3) + '</div></div>';
return tooltip;
},
p: {html: true}
}, 1, 2]);
var options = {
height: 450,
timeline: {
groupByRowLabel: true
},
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(view.toDataTable(), options); // <-- use data view to draw chart
});
.ggl-tooltip {
background-color: #ffffff;
border: 1px solid #e0e0e0;
font-family: Arial, Helvetica;
font-size: 14px;
padding: 8px;
}
.ggl-tooltip div {
margin-top: 6px;
}
.ggl-tooltip span {
font-weight: bold;
}
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Related
The example for ChartRangeFilter is showing only years, I would like to set it up to hours, for example: starting from midnight to 23:59:59 pm.
range :
00:00:00
01:00:00
02:00:00
03:00:00
04:00:00
...
23:00:00
here is the example code on jsfiddle from Alex https://jsfiddle.net/alex4uthis/ZmVcZ/128/
code :
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRow([new Date(2014, 0, 1), 1,123]);
data.addRow([new Date(2014, 1, 1), 6,42 ]);
data.addRow([new Date(2014, 2, 1), 4,49 ]);
data.addRow([new Date(2014, 3, 1), 23,486 ]);
data.addRow([new Date(2014, 4, 1), 89,476 ]);
data.addRow([new Date(2014, 5, 1), 46,444 ]);
data.addRow([new Date(2014, 6, 1), 178,442 ]);
data.addRow([new Date(2014, 7, 1), 12,274 ]);
data.addRow([new Date(2014, 8, 1), 123,4934 ]);
data.addRow([new Date(2014, 9, 1), 144,4145 ]);
data.addRow([new Date(2014, 10, 1), 135,946 ]);
data.addRow([new Date(2014, 11, 1), 178,747 ]);
data.addRow([new Date(2015, 0, 1), 31,1253]);
data.addRow([new Date(2015, 1, 1), 24,4532 ]);
data.addRow([new Date(2015, 2, 1), 234,349 ]);
data.addRow([new Date(2015, 3, 1), 2009,3486 ]);
data.addRow([new Date(2015, 4, 1), 589,4756 ]);
data.addRow([new Date(2015, 5, 1), 946,4744 ]);
data.addRow([new Date(2015, 6, 1), 878,4542 ]);
data.addRow([new Date(2015, 7, 1), 1562,9874 ]);
data.addRow([new Date(2015, 8, 1), 4123,934 ]);
data.addRow([new Date(2015, 9, 1), 7144,145 ]);
data.addRow([new Date(2015, 10, 1), 8135,46 ]);
data.addRow([new Date(2015, 11, 1), 9178,47 ]);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 600,
chartArea: {
width: '80%'
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: 620,
chartArea: {
width: '80%'
},
hAxis: {
format: 'MMM',
slantedText: false,
maxAlternation: 1
}
}
});
function setOptions() {
var firstDate;
var lastDate;
var v = control.getState();
if (v.range) {
document.getElementById('dbgchart').innerHTML = v.range.start + ' to ' + v.range.end;
firstDate = new Date(v.range.start.getTime() + 1);
lastDate = new Date(v.range.end.getTime() - 1);
data.setValue(v.range.start.getMonth(), 0, firstDate);
data.setValue(v.range.end.getMonth(), 0, lastDate);
} else {
firstDate = data.getValue(0, 0);
lastDate = data.getValue(data.getNumberOfRows() - 1, 0);
}
var ticks = [];
for (var i = firstDate.getMonth(); i <= lastDate.getMonth(); i++) {
ticks.push(data.getValue(i, 0));
}
chart.setOption('hAxis.ticks', ticks);
chart.setOption('hAxis.viewWindow.min', firstDate);
chart.setOption('hAxis.viewWindow.max', lastDate);
if (dash) {
chart.draw();
}
}
setOptions();
google.visualization.events.addListener(control, 'statechange', setOptions);
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind([control], [chart]);
dash.draw(data);
}
</script>
<div id="dashboard">
<div id="chart_div"></div>
<div id="control_div"></div>
<p><span id='dbgchart'></span></p>
</div>
How to set the range to show only hours?, please help
Well, I am using a LineChart with Angular 4 and I make sure to change labels according to window size like the following:
#HostListener('window:resize', ['$event']) onResize(event) {
if (event.target['innerWidth'] < 420) {
this.stockAnalysisService.getOptionsY()['hAxis']['format'] = 'MMM';
} else if (event.target['innerWidth'] < 760) {
this.stockAnalysisService.getOptionsY()['hAxis']['format'] = 'MM. yy\'';
} else { this.stockAnalysisService.getOptionsY()['hAxis']['format'] = 'MMM d, yyyy'; }
this.drawBasic();
}
This is just basic Angular syntax to detect resize or window and change the hAxis labels accordingly.
My question is, if I want a custom label where I present months on the labels and the months are presented with values of DAY OF THE MONTH and ONLY the first day of the month will have an addition of text to it like the following image:
RED: days of the month (jumps 5 days each time but not relevant)
BLACK: first indication of the month (Should not be NOV 10, but NOV 1, not relevant)
Any idea?
to have one or more labels different from than rest,
will need to use option --> hAxis.ticks
this means you will need to build an array of the labels that should be displayed
using object notation, for each tick you can provide
the value of the tick (v:)
and the formatted value of the tick (f:)
{v: dateValue, f: displayValue}
the value (v:) should be the same type as the x-axis, in this case --> 'date'
the formatted value (f:) should be --> 'string'
if you don't use object notation, and just provide a date for the tick,
the label will be displayed according to --> hAxis.format
so, for the dates that should have the month prefix,
use object notation, for the rest, just provide the date
see following working snippet for an example...
google.charts.load('current', {
packages: ['controls', 'corechart', 'table']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'y0');
data.addRows([
[new Date(2017, 7, 1), 2],
[new Date(2017, 7, 2), 3],
[new Date(2017, 7, 4), 1],
[new Date(2017, 7, 8), 5],
[new Date(2017, 7, 16), 6],
[new Date(2017, 7, 20), 7],
[new Date(2017, 7, 24), 1],
[new Date(2017, 7, 26), 2],
[new Date(2017, 7, 27), 3],
[new Date(2017, 8, 1), 2],
[new Date(2017, 8, 2), 3],
[new Date(2017, 8, 4), 9],
[new Date(2017, 8, 8), 5],
[new Date(2017, 8, 16), 6],
[new Date(2017, 8, 20), 7],
[new Date(2017, 8, 24), 1],
[new Date(2017, 8, 26), 2],
[new Date(2017, 8, 27), 3]
]);
var oneDay = (1000 * 60 * 60 * 24);
var dateRange = data.getColumnRange(0);
var formatMonth = new google.visualization.DateFormat({
pattern: 'MMM dd'
});
// build ticks
var ticksX = [];
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
var rowDate = new Date(i);
if (rowDate.getDate() === 1) {
// add first day of month
ticksX.push({
v: rowDate,
f: formatMonth.formatValue(rowDate)
});
} else if (((i - dateRange.min.getTime()) % 7) === 0) {
// add date every seven days
ticksX.push(rowDate);
}
}
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
chart.draw(data, {
chartArea: {
bottom: 36,
left: 48,
right: 12,
top: 12,
width: '100%',
height: '100%'
},
hAxis: {
format: 'dd',
ticks: ticksX
},
width: 800
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have a timeline chart. When I have only 3 columns (row label, start date, end date) in my timeline and color it, everything works perfectly. However, I added a another column (bar label) to my timeline, and now the coloring is all messed up. Does anyone know how to fix this issue? If it isn't, would this issue be considered a bug.
Sample code snippet on jsfiddle demonstrating the issue:
https://jsfiddle.net/9egybsro/
Looking at my hard-coded color array:
var color = ['#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#868686',
'#FF9900',
'#FF9900'
]
All bars except the 3rd to last bar should be colored orange. The 3rd to last bar should be colored grey. As shown when the run button is hit, all the bars are colored orange.
by default, the colors follow the bar labels
set timeline.colorByRowLabel to use the row labels / position of colors array
timeline: {
colorByRowLabel: true
}
otherwise, use a distinct bar label...
var barLabel = [];
for (var i = 0; i < startDate.length; ++i) {
barLabel.push("potato" + i);
}
see following working snippet...
google.charts.load('current', {
'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById("timeline");
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'string',
id: 'account_name'
});
dataTable.addColumn({
type: 'string',
id: 'bar_label'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
var name = ['Russ Hanneman',
'Gavin Belson',
'Jack Barker',
'Peter Gregory',
'Jian Yang',
'Richard Hendrix',
'Dinesh Chugtai',
'Bertram Gilfoyle',
'Erlich Bachman',
'Monica Hall',
'Nelson Bighetti',
'Aaron Anderson',
'Donald \'OJ\' Dunn'
]
var startDate = [new Date(2016, 0, 2),
new Date(2015, 5, 1),
new Date(2015, 11, 31),
new Date(2014, 0, 1),
new Date(2016, 6, 16),
new Date(2016, 9, 12),
new Date(2017, 5, 20),
new Date(2019, 0, 1),
new Date(2015, 0, 1),
new Date(2016, 9, 21),
new Date(2015, 8, 1),
new Date(2017, 6, 4),
new Date(2015, 6, 17)
]
var endDate = [new Date(2025, 6, 25),
new Date(2016, 11, 17),
new Date(2016, 2, 4),
new Date(2018, 6, 16),
new Date(2017, 11, 25),
new Date(2020, 2, 3),
new Date(2019, 6, 13),
new Date(2019, 9, 16),
new Date(2018, 9, 23),
new Date(2019, 7, 12),
new Date(2019, 2, 17),
new Date(2022, 3, 1),
new Date(2021, 0, 21)
]
var barLabel = [];
for (var i = 0; i < startDate.length; ++i) {
barLabel.push("potato");
}
var color = ['#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#FF9900',
'#868686',
'#FF9900',
'#FF9900'
]
heightVal = 50 * name.length;
if (heightVal > 500) {
heightVal = 500;
}
document.getElementById("timeline").style = "height: " + heightVal.toString() + "px;";
var accounts = [];
for (i = 0; i < endDate.length; i++) {
accounts.push([name[i], barLabel[i], startDate[i], endDate[i]]);
}
var options = {
colors: color,
timeline: {
colorByRowLabel: true
}
};
dataTable.addRows(accounts);
chart.draw(dataTable, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<p id="demo"></p>
<div id="timeline" style="height: 240px;"></div>
Solved it. colorByRowLabel needs to be set to true. I believe that the value of the bar label will be used as a metric for coloring if it's set to false rather than the index of that row relative to the array of colors.
I am not able to create a logarithmic vertical axis for my material Google Line Chart. Documentation states that I should set vAxis.logScale to true in the options, but this leads to no result.
Currently my test reads:
<div class="chart"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", { "packages": [ "line", "corechart" ]});
google.charts.setOnLoadCallback(function() {
var data = new google.visualization.DataTable();
data.addColumn("date", "Date");
data.addColumn("number", "1");
data.addColumn("number", "2");
data.addRows([
[ new Date(2016, 0, 27), 684130172, -1 ], [ new Date(2016, 0, 28), 684189642, -1 ], [ new Date(2016, 0, 29), 684837381, 122895 ], [ new Date(2016, 0, 30), 685595817, 238244 ], [ new Date(2016, 0, 31), 686690845, 239450 ], [ new Date(2016, 1, 1), 688391639, 536141 ], [ new Date(2016, 1, 2), 691181274, 1651530 ], [ new Date(2016, 1, 3), 693040518, 1698813 ], [ new Date(2016, 1, 4), 694335907, 2271617 ], [ new Date(2016, 1, 5), 694978502, 2314718 ], [ new Date(2016, 1, 6), 696142818, 2314758 ], [ new Date(2016, 1, 7), 698869181, 3234042 ], [ new Date(2016, 1, 8), 700446296, 3338104 ], [ new Date(2016, 1, 9), 705552668, 6175539 ], [ new Date(2016, 1, 10), 707540295, 6812427 ], [ new Date(2016, 1, 11), 707766077, 6831641 ], [ new Date(2016, 1, 12), 707922926, 6839607 ], [ new Date(2016, 1, 13), 708061736, 6883806 ], [ new Date(2016, 1, 14), 713986011, 10366780 ], [ new Date(2016, 1, 15), 717491978, 12527120 ], [ new Date(2016, 1, 16), 719057078, 12794871 ], [ new Date(2016, 1, 17), 723813184, 14959625 ], ]);
var chart = new google.charts.Line($(".chart")[0]);
chart.draw(data, {
chart: {
title: "History for ..."
},
height: 400,
width: 800,
vAxis: {
logScale: true,
minValue: 0
}
});
});
</script>
And produces:
I have used a lot of combinations of options but I haven't yet produced any logarithmic result.
The reason that these features are not working is because the 'line' package that you are loading and the google.charts.Line(...) object that you are using are creating what Google calls a Material Chart.
This is a completely redesigned implementation of the Google Visualization API adhering to Google's "Material Design" specification and is still currently in beta (see details here).
A lot of the features found in what they call the "Classic" chart library have not yet been carried over to the "Material Design" charts (see this Github issue).
You can solve your issue by using the older (but much better supported) Google Visualization "Classic" corechart package. In this case you have to replace only one line in your code. Instead of:
var chart = new google.charts.Line($(".chart")[0]);
you have to write this line:
var chart = new google.visualization.LineChart($(".chart")[0]);
Or, if you do not want to use jQuery (you do not need it) then replace it with this line:
var chart = new google.visualization.LineChart(document.querySelector(".chart"));
and delete jQuery calling.
Complete solution
google.charts.load("current", {"packages": ["line", "corechart"]});
google.charts.setOnLoadCallback(function()
{
var data = new google.visualization.DataTable();
data.addColumn("date", "Date");
data.addColumn("number", "1");
data.addColumn("number", "2");
data.addRows(
[
[new Date(2016, 0, 27), 684130172, -1],
[new Date(2016, 0, 28), 684189642, -1],
[new Date(2016, 0, 29), 684837381, 122895],
[new Date(2016, 0, 30), 685595817, 238244],
[new Date(2016, 0, 31), 686690845, 239450],
[new Date(2016, 1, 1), 688391639, 536141],
[new Date(2016, 1, 2), 691181274, 1651530],
[new Date(2016, 1, 3), 693040518, 1698813],
[new Date(2016, 1, 4), 694335907, 2271617],
[new Date(2016, 1, 5), 694978502, 2314718],
[new Date(2016, 1, 6), 696142818, 2314758],
[new Date(2016, 1, 7), 698869181, 3234042],
[new Date(2016, 1, 8), 700446296, 3338104],
[new Date(2016, 1, 9), 705552668, 6175539],
[new Date(2016, 1, 10), 707540295, 6812427],
[new Date(2016, 1, 11), 707766077, 6831641],
[new Date(2016, 1, 12), 707922926, 6839607],
[new Date(2016, 1, 13), 708061736, 6883806],
[new Date(2016, 1, 14), 713986011, 10366780],
[new Date(2016, 1, 15), 717491978, 12527120],
[new Date(2016, 1, 16), 719057078, 12794871],
[new Date(2016, 1, 17), 723813184, 14959625]
]);
//var chart = new google.charts.Line($(".chart")[0]);
var chart = new google.visualization.LineChart(document.querySelector(".chart"));
chart.draw(data,
{
chart: {title: "History for ..."},
height: 400,
width: 800,
vAxis:
{
logScale: true,
minValue: 0
}
});
});
<div class="chart"></div>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> -->
<script src="https://www.gstatic.com/charts/loader.js"></script>
Is this what you need?
This is the only change needed:
var chart = new google.visualization.LineChart($(".chart")[0]);
Here are the interactive docs with links to JSFiddle examples
<div class="chart"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", { "packages": [ "line", "corechart" ]});
google.charts.setOnLoadCallback(function() {
var data = new google.visualization.DataTable();
data.addColumn("date", "Date");
data.addColumn("number", "1");
data.addColumn("number", "2");
data.addRows([
[ new Date(2016, 0, 27), 684130172, -1 ], [ new Date(2016, 0, 28), 684189642, -1 ], [ new Date(2016, 0, 29), 684837381, 122895 ], [ new Date(2016, 0, 30), 685595817, 238244 ], [ new Date(2016, 0, 31), 686690845, 239450 ], [ new Date(2016, 1, 1), 688391639, 536141 ], [ new Date(2016, 1, 2), 691181274, 1651530 ], [ new Date(2016, 1, 3), 693040518, 1698813 ], [ new Date(2016, 1, 4), 694335907, 2271617 ], [ new Date(2016, 1, 5), 694978502, 2314718 ], [ new Date(2016, 1, 6), 696142818, 2314758 ], [ new Date(2016, 1, 7), 698869181, 3234042 ], [ new Date(2016, 1, 8), 700446296, 3338104 ], [ new Date(2016, 1, 9), 705552668, 6175539 ], [ new Date(2016, 1, 10), 707540295, 6812427 ], [ new Date(2016, 1, 11), 707766077, 6831641 ], [ new Date(2016, 1, 12), 707922926, 6839607 ], [ new Date(2016, 1, 13), 708061736, 6883806 ], [ new Date(2016, 1, 14), 713986011, 10366780 ], [ new Date(2016, 1, 15), 717491978, 12527120 ], [ new Date(2016, 1, 16), 719057078, 12794871 ], [ new Date(2016, 1, 17), 723813184, 14959625 ], ]);
var chart = new google.visualization.LineChart($(".chart")[0]);
chart.draw(data, {
chart: {
title: "History for ..."
},
height: 400,
width: 800,
vAxis: {
logScale: true,
minValue: 0
}
});
});
</script>
I'm trying to create a POC of a stock portfolio.
I'm using Google charts to do it.
I want to generate 3 charts: one for each stock (I have two stocks) and one for both of them.
in my html I've created three divs (using some guids)
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>
and I've generated a javascript that is supposed to populate the divs
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
google.load('visualization', '1.1', { 'packages': ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11, 27), 12.7389789250395]);
data0.addRow([new Date(2015, 11, 26), 6.76681987790708]);
data0.addRow([new Date(2015, 11, 25), 15.7216755155109]);
data0.addRow([new Date(2015, 11, 24), 7.44940381844035]);
data0.addRow([new Date(2015, 11, 23), 9.02574470221333]);
data0.addRow([new Date(2015, 11, 22), 11.9767397269498]);
data0.addRow([new Date(2015, 11, 21), 14.5598888055235]);
data0.addRow([new Date(2015, 11, 20), 12.2693184056642]);
data0.addRow([new Date(2015, 11, 19), 8.29967047194935]);
data0.addRow([new Date(2015, 11, 18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
chart0.draw(data0, options0);
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11, 27), 4.10950499778125]);
data1.addRow([new Date(2015, 11, 26), 8.38212726329552]);
data1.addRow([new Date(2015, 11, 25), 4.36060299741132]);
data1.addRow([new Date(2015, 11, 24), 3.34093286951116]);
data1.addRow([new Date(2015, 11, 23), 10.0405249521325]);
data1.addRow([new Date(2015, 11, 22), 5.29850781210629]);
data1.addRow([new Date(2015, 11, 21), 6.3867255497662]);
data1.addRow([new Date(2015, 11, 20), 3.70270192981823]);
data1.addRow([new Date(2015, 11, 19), 17.0856299675469]);
data1.addRow([new Date(2015, 11, 18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);
}
The problem is that each time the page loads, only one of the three charts is being rendered. (Each time a different one)
Anyone has ever encountered such issue?
The same issue was reported in google-visualization-issues repository:
The problems people have seen with the sizing of multiple instances of
material charts should be resolved with this new release. You can
change your code to load "1.1" now so that when the candidate release
becomes available, you will be using it.
There are at least two solutions available at the moment:
Option 1. Using the frozen version loader.
Since
The rollout of the v43 candidate release that would fix this problem
switch to using the frozen version loader.
Steps:
1)Add a reference to loader: <script
src="http://www.gstatic.com/charts/loader.js"></script>
2)Then load a 43 version of library: google.charts.load("43",{packages:["line"]});
3)Replace:
google.setOnLoadCallback(drawChart);
with
google.charts.setOnLoadCallback(drawChart);
Example
google.charts.load("43",{packages:["line"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11, 27), 12.7389789250395]);
data0.addRow([new Date(2015, 11, 26), 6.76681987790708]);
data0.addRow([new Date(2015, 11, 25), 15.7216755155109]);
data0.addRow([new Date(2015, 11, 24), 7.44940381844035]);
data0.addRow([new Date(2015, 11, 23), 9.02574470221333]);
data0.addRow([new Date(2015, 11, 22), 11.9767397269498]);
data0.addRow([new Date(2015, 11, 21), 14.5598888055235]);
data0.addRow([new Date(2015, 11, 20), 12.2693184056642]);
data0.addRow([new Date(2015, 11, 19), 8.29967047194935]);
data0.addRow([new Date(2015, 11, 18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
chart0.draw(data0, options0);
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11, 27), 4.10950499778125]);
data1.addRow([new Date(2015, 11, 26), 8.38212726329552]);
data1.addRow([new Date(2015, 11, 25), 4.36060299741132]);
data1.addRow([new Date(2015, 11, 24), 3.34093286951116]);
data1.addRow([new Date(2015, 11, 23), 10.0405249521325]);
data1.addRow([new Date(2015, 11, 22), 5.29850781210629]);
data1.addRow([new Date(2015, 11, 21), 6.3867255497662]);
data1.addRow([new Date(2015, 11, 20), 3.70270192981823]);
data1.addRow([new Date(2015, 11, 19), 17.0856299675469]);
data1.addRow([new Date(2015, 11, 18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);
}
<script src="http://www.google.com/jsapi"></script>
<script src="http://www.gstatic.com/charts/loader.js"></script>
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>
Option 2. Render charts synchronously
Since draw function is asynchronous, we utilize ready event handler to draw charts sequentially, in that case multiple chart should be rendered properly as demonstrated below.
Example
google.load('visualization', '1.1', { 'packages': ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};
var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11, 27), 12.7389789250395]);
data0.addRow([new Date(2015, 11, 26), 6.76681987790708]);
data0.addRow([new Date(2015, 11, 25), 15.7216755155109]);
data0.addRow([new Date(2015, 11, 24), 7.44940381844035]);
data0.addRow([new Date(2015, 11, 23), 9.02574470221333]);
data0.addRow([new Date(2015, 11, 22), 11.9767397269498]);
data0.addRow([new Date(2015, 11, 21), 14.5598888055235]);
data0.addRow([new Date(2015, 11, 20), 12.2693184056642]);
data0.addRow([new Date(2015, 11, 19), 8.29967047194935]);
data0.addRow([new Date(2015, 11, 18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11, 27), 4.10950499778125]);
data1.addRow([new Date(2015, 11, 26), 8.38212726329552]);
data1.addRow([new Date(2015, 11, 25), 4.36060299741132]);
data1.addRow([new Date(2015, 11, 24), 3.34093286951116]);
data1.addRow([new Date(2015, 11, 23), 10.0405249521325]);
data1.addRow([new Date(2015, 11, 22), 5.29850781210629]);
data1.addRow([new Date(2015, 11, 21), 6.3867255497662]);
data1.addRow([new Date(2015, 11, 20), 3.70270192981823]);
data1.addRow([new Date(2015, 11, 19), 17.0856299675469]);
data1.addRow([new Date(2015, 11, 18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
google.visualization.events.addOneTimeListener(chart, 'ready', function(){
var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
google.visualization.events.addOneTimeListener(chart0, 'ready', function(){
var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);
});
chart0.draw(data0, options0);
});
chart.draw(data, options);
}
<script src="http://www.google.com/jsapi"></script>
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>