getting the event from variable - javascript

i m studing the jquery calendar from github: https://github.com/themouette/jquery-week-calendar
I pull the data from database by using code behind C#, and stored it at hiddenfield, then javascript read the hiddenfield field value as string.
i will skip how i get the value from database, in this question, i hardcode the events into sampleEvents var.
Working Javascript:
var eventData = {
events: [
{'id':1, 'start': new Date(2015, 3, 27, 12), 'end': new Date(2015, 3, 27, 13, 35),'title':'Lunch with Mike'},
{'id':2, 'start': new Date(2015, 3, 28, 10), 'end': new Date(2015, 3, 28, 14, 45),'title':'Dev Meeting'}
]};
Not Working Javascript:
var sampleEvents = "{'id':1, 'start': new Date(2015, 3, 27, 12), 'end': new Date(2015, 3, 27, 13, 35),'title':'Lunch with Mike'},{'id':2, 'start': new Date(2015, 3, 28, 10), 'end': new Date(2015, 3, 28, 14, 45),'title':'Dev Meeting'}";
var eventData = {
events: [
sampleEvents
]};
Error message:
Uncaught TypeError: Cannot read property 'getTime' of undefined
Not Working Javascript 2:
var sampleEvents = "[{'id': 1,'start': new Date(2015, 3, 27, 12),'end': new Date(2015, 3, 27, 13, 35),'title': 'Lunch with Mike'},{'id': 2,'start': new Date(2015, 3, 28, 10),'end': new Date(2015, 3, 28, 14, 45),'title': 'Dev Meeting'}]";
var array = JSON.parse(sampleEvents);
var eventData = {
events:
sampleEvents
};
Error Messsage:
Uncaught SyntaxError: Unexpected token '
Can anyone tell me, what did i missed?


Because your created sampleEvents is string not array.
event is accepting array not a string.
To use array try this:
var sampleEvents = [
{
'id':1,
'start': new Date(2015, 3, 27, 12),
'end': new Date(2015, 3, 27, 13, 35),
'title':'Lunch with Mike'
},
{
'id':2,
'start': new Date(2015, 3, 28, 10),
'end': new Date(2015, 3, 28, 14, 45),
'title':'Dev Meeting'
}
];
To Use String try this:
var sampleEvents = '['+
'{"id":1, "start": "'+new Date(2015, 3, 27, 12)+'", "end": "'+new Date(2015, 3, 27, 13, 35)+'","title":"Lunch with Mike"},'+
'{"id":2, "start": "'+new Date(2015, 3, 28, 10)+'", "end": "'+new Date(2015, 3, 28, 14, 45)+'","title":"Dev Meeting"}'+
']';
var sampleEventsArray = JSON.parse(sampleEvents);

Related

Google Charts: how to deal with monthly data

I'm trying to use Google Charts to present monthly data in a stacked column chart.
I'd like to use Date values for the x-axis, since Google Charts is smart about labels and gridlines. But you can only specify exact days in a Javascript Date, not a whole month.
In my first attempt, I simply always used the first day of the month. But then the January bar straddles the year gridline (e.g. January 2020 is on the gridline separating 2019 and 2020) which just looks funny.
My second attempt uses day 15 for every month. That looks a bit better.
google.charts.load('current', {'packages':['corechart'], 'language': 'nl'});
google.charts.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([["","Appels","Peren","Bananen","dec?"],[new Date(2018, 0, 15),5217,4162,3014,0],[new Date(2018, 1, 15),4691,3582,2552,0],[new Date(2018, 2, 15),5427,4651,4160,0],[new Date(2018, 3, 15),4272,3571,3765,0],[new Date(2018, 4, 15),4409,3266,3020,0],[new Date(2018, 5, 15),4566,3566,3131,0],[new Date(2018, 6, 15),4628,3329,3742,0],[new Date(2018, 7, 15),4175,3309,3390,0],[new Date(2018, 8, 15),4794,3695,3047,0],[new Date(2018, 9, 15),5075,3976,2856,0],[new Date(2018, 10, 15),7568,6737,3056,0],[new Date(2018, 11, 15),7978,7551,4634,0],[new Date(2019, 0, 15),5300,5101,3730,0],[new Date(2019, 1, 15),4526,4310,3342,0],[new Date(2019, 2, 15),5399,5053,4335,0],[new Date(2019, 3, 15),4380,4187,4045,0],[new Date(2019, 4, 15),4940,4560,3854,0],[new Date(2019, 5, 15),4819,4529,3617,0],[new Date(2019, 6, 15),5158,4723,4783,0],[new Date(2019, 7, 15),4813,4290,3673,0],[new Date(2019, 8, 15),5935,5147,3504,0],[new Date(2019, 9, 15),5886,5362,3620,0],[new Date(2019, 10, 15),8565,7706,5652,0],[new Date(2019, 11, 15),9373,8416,4719,0],[new Date(2020, 0, 15),6054,6173,4367,0],[new Date(2020, 1, 15),5691,5458,4340,0],[new Date(2020, 2, 15),14864,6467,8200,0],[new Date(2020, 3, 15),21182,9031,7064,0],[new Date(2020, 4, 15),16590,9828,6981,0],[new Date(2020, 5, 15),13621,10060,7240,0],[new Date(2020, 6, 15),9966,7411,6878,0],[new Date(2020, 7, 15),9771,6948,6265,0],[new Date(2020, 8, 15),11033,7584,4794,0],[new Date(2020, 9, 15),13606,8981,5241,0],[new Date(2020, 10, 15),24279,11658,5889,0],[new Date(2020, 11, 15),2615,1523,439,49463]]);
var options = {'title':'Consumptie per maand',
'titleTextStyle': { 'fontSize': 15 },
'width':640,
'height':240,
'legend': { 'position':'bottom' },
'series': {"0":{"color":"66aabb"},"1":{"color":"66ddee"},"3":{"color":"e8f8ff"},"2":{"color":"bbeeff"}},
'chartArea': { 'width': '90%', 'left': 60, 'right': 20 },
'bar': { 'groupWidth': '80%' },
'isStacked':true};
var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div style="display: inline-block; width: 640px; height: 240px;" id="chart2"></div>
However, the tooltips now show the exact date, e.g. “15 jan. 2020”. I can't find a way to customize that (except by using custom HTML tooltips, which would be a bit of a hassle – and that don't look as pretty as the default tooltips).
Is there a better way to deal with monthly data in Google Charts?
(Of course, I can just use string values (e.g. 'jan. 2020'), but then I lost the smart x-axis labels and gridlines that using Date values provides.

you can use the DateFormat class, to format the date values.
by default, the tooltip will display the formatted value.
create the date format using a format pattern...
var formatMonth = new google.visualization.DateFormat({
pattern: 'MMM yyyy'
});
then use the format method to format the data table column...
format(dataTable, columnIndex)
formatMonth.format(data, 0);
see following working snippet...
google.charts.load('current', {
packages: ['corechart'],
language: 'nl'
}).then(function () {
var data = google.visualization.arrayToDataTable([["","Appels","Peren","Bananen","dec?"],[new Date(2018, 0, 15),5217,4162,3014,0],[new Date(2018, 1, 15),4691,3582,2552,0],[new Date(2018, 2, 15),5427,4651,4160,0],[new Date(2018, 3, 15),4272,3571,3765,0],[new Date(2018, 4, 15),4409,3266,3020,0],[new Date(2018, 5, 15),4566,3566,3131,0],[new Date(2018, 6, 15),4628,3329,3742,0],[new Date(2018, 7, 15),4175,3309,3390,0],[new Date(2018, 8, 15),4794,3695,3047,0],[new Date(2018, 9, 15),5075,3976,2856,0],[new Date(2018, 10, 15),7568,6737,3056,0],[new Date(2018, 11, 15),7978,7551,4634,0],[new Date(2019, 0, 15),5300,5101,3730,0],[new Date(2019, 1, 15),4526,4310,3342,0],[new Date(2019, 2, 15),5399,5053,4335,0],[new Date(2019, 3, 15),4380,4187,4045,0],[new Date(2019, 4, 15),4940,4560,3854,0],[new Date(2019, 5, 15),4819,4529,3617,0],[new Date(2019, 6, 15),5158,4723,4783,0],[new Date(2019, 7, 15),4813,4290,3673,0],[new Date(2019, 8, 15),5935,5147,3504,0],[new Date(2019, 9, 15),5886,5362,3620,0],[new Date(2019, 10, 15),8565,7706,5652,0],[new Date(2019, 11, 15),9373,8416,4719,0],[new Date(2020, 0, 15),6054,6173,4367,0],[new Date(2020, 1, 15),5691,5458,4340,0],[new Date(2020, 2, 15),14864,6467,8200,0],[new Date(2020, 3, 15),21182,9031,7064,0],[new Date(2020, 4, 15),16590,9828,6981,0],[new Date(2020, 5, 15),13621,10060,7240,0],[new Date(2020, 6, 15),9966,7411,6878,0],[new Date(2020, 7, 15),9771,6948,6265,0],[new Date(2020, 8, 15),11033,7584,4794,0],[new Date(2020, 9, 15),13606,8981,5241,0],[new Date(2020, 10, 15),24279,11658,5889,0],[new Date(2020, 11, 15),2615,1523,439,49463]]);
var formatMonth = new google.visualization.DateFormat({
pattern: 'MMM yyyy'
});
formatMonth.format(data, 0);
var options = {'title':'Consumptie per maand',
'titleTextStyle': { 'fontSize': 15 },
'width':640,
'height':240,
'legend': { 'position':'bottom' },
'series': {"0":{"color":"66aabb"},"1":{"color":"66ddee"},"3":{"color":"e8f8ff"},"2":{"color":"bbeeff"}},
'chartArea': { 'width': '90%', 'left': 60, 'right': 20 },
'bar': { 'groupWidth': '80%' },
'isStacked':true};
var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart2"></div>
NOTE: formatting the data table sets the formatted value of each cell of the data table column.
you can also provide the formatted value directly in the data by using object notation.
if you wanted, you could load the data table rows as follows...
[{v: new Date(2018, 0, 15), f: 'jan 2018'},5217,4162,3014,0]
where v: is the value, and f: is the formatted value...

Fullcalendar event property acceptance

I am working on a calendar where I would like to display a bit more information about my events.
Below I show you the list of events I'm using:
export default [
{
id: 13,
title: 'Sport Event',
start: new Date(2019, 5, 20, 19, 30, 0),
end: new Date(2019, 5, 20, 22, 0, 0),
recurrence: "weekly"
},
{
id: 14,
title: 'Flight to France',
start: new Date(2019, 5, 17, 13, 30, 0),
end: new Date(2019, 5, 17, 15, 0, 0),
recurrence: "once"
},{
id: 16,
title: 'Party',
start: new Date(2019, 5, 17, 15, 0, 0),
end: new Date(2019, 5, 17, 17, 0, 0),
matchRef: 'match/122123123332',
recurrence: "once"
},{
id: 15,
title: 'Birthday',
start: new Date(2019, 5, 17, 20, 30, 0),
end: new Date(2019, 5, 18, 0, 0, 0),
recurrence: "monthly"
}
]
Since I'm already displaying the title, start and end, I would like to display the value of recurrence property in my events. I'm working with ReactJS. This seems really simple to implement, while I'm new with Fullcalendar-react, so I'm sorry in advance.
Thank you!

How do I include a date column in a google visualisation datatable column taken from a spreadsheet

I have a Google sheet that look like this:
Date Sales
31/03/2017 1000
30/06/2017 2000
30/09/2017 1500
31/12/2017 2500
31/03/2018 4000
If I import this using .arrayToDataTable in Google charts and set the type of column 0 to 'date' or 'string' - it doesn't like it, because the date is only a formatted number i.e 43190 = 31/3/2018. so the type has to be 'number' which then only displays the underlying number on the chart and not the date
I can loop through each of the row values and I've tried changing them with this
function formatDate(date) {
var d = new Date((date - 25569)*86400*1000),
locale = "en-us",
month = d.toLocaleString(locale, { month: "short" });
var formattedDate = d.getDay() + "/" + month + "/" + d.getFullYear();
return formattedDate
}
this converts the number to a date string - so with an input of, say, 43190 it returns 31/Mar/2018 but I still can't change the column type to 'date'
I could output the dates as strings but they don't sort in chronological order but alphabetical - I want them chronological.
can anybody show me where I'm going wrong?
EDIT:
If I change the function to
function formatDate(date) {
var d = new Date((date - 25569)*86400*1000)
return d
}
this now sets the column values to the full date object
but I get an error a saying "Value Sun Jun 30 2013 01:00:00 GMT+0100 (GMT Summer Time) does not match type number in column index 0"
Now this must be referring to the datatable column zero, which in the original table, is a date number. I've tried adding:
data.setColumnProperty(0, 'type' , 'date')
but seem to get the same error.
perhaps I'm not changing the type at the correct point in the code.
to clarify: I'm getting the original values from a range in the google sheet then converting that range to a datatable using .arrayToDataTable. So I'm not sure I can define the column type at the point of making the datatable hence the separate attempt with:
data.setColumnProperty(0, 'type' , 'date')

You have to supply the complete date object in the date-type column.
Good documentation about dates can be found here
https://developers.google.com/chart/interactive/docs/datesandtimes#axesgridlinesticks
An example of dates and sales could be
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales');
data.addRows([
[new Date(2015, 0, 1), 5], [new Date(2015, 0, 2), 7], [new Date(2015, 0, 3), 3],
[new Date(2015, 0, 4), 1], [new Date(2015, 0, 5), 3], [new Date(2015, 0, 6), 4],
[new Date(2015, 0, 7), 3], [new Date(2015, 0, 8), 4], [new Date(2015, 0, 9), 2],
[new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
[new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
[new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
[new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
[new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
[new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
[new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
[new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7], [new Date(2015, 1, 2), 9]
]);
You could than add the following to options to format your date
hAxis: {
format: 'MM/dd/yyyy'
}

Logarithmic scale in material google line chart

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>

Multiple Google charts on the same page

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>

Categories

Resources