Develop Reference

google line chart date formatting

I'd like to draw google line chart with trending however type mismatch occurred because of date format.
The below is my code.gs which to return the date value to string from spreadsheet in the first column.
I'd tried to put new Date() in JS to draw the line chart with trending however i don't know how to put this date value in datatable.
In the JS, the columns can be dynamically added which it works. But i could not solve the date problem so please help.
Code.gs
function getSpreadsheetData() {
var ssID = "1994YM4uwB1mQORl-HLNk6o10-0ADLNQPgUxKGW6iW_8",
data = SpreadsheetApp.openById(ssID).getSheets()[0].getDataRange().getValues();
for(var i=1; i<data.length; i++){
var date = new Date(data[i][0]);
data[i][0] = Utilities.formatDate(date, "GMT+9", "M/dd");
}
return data;
}
JS
google.charts.load('current', {'packages':['corechart','controls']});
google.charts.setOnLoadCallback(getSpreadsheetData);
function getSpreadsheetData() {
google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
}
function drawChart(rows) {
var data = google.visualization.arrayToDataTable(rows, false);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex'); // numbrer to date then error
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []}
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
}
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
explorer: { axis: 'horizontal' },
pointSize: 3,
vAxis : { format: '#.#',
viewWindow:{
max:0.6,
min:0
},
},
hAxis: {format: 'M/dd'},
legend: 'none',
chartArea: {width: '90%'},
crosshair: { trigger: 'both', orientation: 'both' },
trendlines: {
0: {
type: 'polynomial',
lineWidth: 5,
color: 'orange',
labelInLegend: 'Trend',
degree: 5,
visibleInLegend: true,
},
}
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
filterColumnIndex: 1,
useFormattedValue: true,
ui: {
allowTyping: false,
allowMultiple: false, // when true then filters stacked
caption : 'Choose your values',
allowNone: true,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
if (state.selectedValues.length > 0) {
chart.setView(view);
} else {
chart.setView(null);
}
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
}

you could use a data view, to convert the date string to an actual date.
here, create the data table as normal.
then create the data view, using a calculated column for the date column.
assuming the first data table column is the date string
function drawChart(rows) {
// create data table
var data = google.visualization.arrayToDataTable(rows, false);
// create data view
data = new google.visualization.DataView(data);
// create view columns with calculated column
var viewColumns = [{
calc: function (dt, row) {
return new Date(dt.getValue(row, 0));
},
label: data.getColumnLabel(0),
type: 'date'
}];
// add remaining columns
for (var = 1; i < data.getNumberOfColumns(); i++) {
viewColumns.push(i);
}
// set view columns
data.setColumns(viewColumns);
...

Google Visualization Referencing Defined Pickers Dynamically

My target is to build a event listener that loops through the visualization's defined pickers to call setState() and draw() for each one.
My initial thought was something like this:
for (var i = 0; i < 2; i++) { // 2 is hard coded for simplicity
categoryPicker[i].setState({selectedValues: []});
categoryPicker[i].draw();
}
I've tried following to access the picker via it's method getState() as a test but can't seem get results unless I hard code it:
//This works when hard coded
console.log(categoryPicker1.getState());
//ERROR temp.picker.getState is not a function
temp = { picker: "categoryPicker" + i };
//console.log(temp.picker.getState());
//ERROR temp.picker.getState is not a function
temp2 = ["categoryPicker" + i];
//console.log(temp2[i].getState());
I need some guidance in figuring out how to call the pickers dynamically? I don't want to resort to using eval() for security reasons.
Your assistance is appreciated.
Full working example:
// Load the Visualization API and the corechart package.
google.charts.load('current', {
'packages': ['corechart', 'table', 'gauge', 'controls']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);
function gChart0() {
drawChart();
}
function drawChart() {
var result = [{
"calendarWeek": "2017-W30",
"partId": '1234567890xxx',
"someNumber": 0
}, {
"calendarWeek": "2017-W30",
"partId": '1234567890yyy',
"someNumber": 0
}, {
"calendarWeek": "2017-W30",
"partId": '1234567890111',
"someNumber": 0
}];
//Create DataTable
var data = new google.visualization.DataTable();
data.addColumn('string', 'Calendar Week');
data.addColumn('string', 'Part Id');
data.addColumn('number', 'Some Number');
var dataArray = [];
$.each(result, function(i, obj) {
dataArray.push([
obj.calendarWeek,
obj.partId,
obj.someNumber
]);
});
data.addRows(dataArray);
//Options
var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));
var categoryPicker0 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'div_categoryPicker1',
options: {
filterColumnIndex: 0,
matchType: 'any',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false,
allowNone: true
}
}
});
var categoryPicker1 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'div_categoryPicker2',
options: {
filterColumnIndex: 1,
matchType: 'any',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false,
allowNone: true
}
}
});
//ADDED THIS after suggestion from WhiteHat
var pickerArr = [categoryPicker0 , categoryPicker1 ];
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'div_table',
options: {
width: '100%',
height: 'auto',
page: 'enable',
pageSize: '15',
sort: 'enable',
allowHtml: true
}
});
google.visualization.events.addOneTimeListener(dashboard, 'ready', function() {
// reset the category picker when clicked.
var reset = document.getElementById('categoryPicker_resetBtn');
reset.addEventListener('click', function() {
//categoryPicker0.setState({
//selectedValues: []
//});
//categoryPicker0.draw();
//categoryPicker1.setState({
//selectedValues: []
//});
//categoryPicker1.draw();
//ADDED THIS after suggestion from WhiteHat
for (var i = 0; i < pickerArr.length; ++i) {
pickerArr[i].setState({selectedValues: []}); //This resets pickers dynamically
pickerArr [i].draw();
}
});
});
dashboard.bind([categoryPicker0, categoryPicker1], [table]);
dashboard.draw(data);
} //END function drawChart()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard"></div>
<div id="div_categoryPicker1"></div>
<div id="div_categoryPicker2"></div><br>
<button id="categoryPicker_resetBtn">Reset</button><div id="div_table"></div>
UPDATE:
I was able to update my snippet above by adding the following code as suggested by WhiteHat.
This is set just after the pickers are defined:
//ADDED THIS after suggestion from WhiteHat
var pickerArr = [categoryPicker0 , categoryPicker1 ];
This replaces code I had in the event listener for the reset button:
//ADDED THIS after suggestion from WhiteHat
for (var i = 0; i < pickerArr.length; ++i) {
pickerArr[i].setState({selectedValues: []}); //This resets pickers dynamically
pickerArr [i].draw();
}

you could store them in an array...
var pickers = [];
pickers.push(new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'div_categoryPicker1',
options: {
filterColumnIndex: 0,
matchType: 'any',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false,
allowNone: true
}
}
}));
pickers.push(new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'div_categoryPicker2',
options: {
filterColumnIndex: 1,
matchType: 'any',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false,
allowNone: true
}
}
}));
then loop through the array...
pickers.forEach(function (picker) {
console.log(picker.getState());
});

Google Visualization group() aggregation function returning nulls

I have a column called someNumber which contains nulls and zeros. When applying google.visualization.data.group to this column I cannot get the zero to come through to the table, only the null.
The documentation for both .min and .max indicates nulls are ignored but I can't seem to return anything but the null.
How can I get the zero to come through to my table?
Thank you experts!
Working Example:
// Load the Visualization API and the corechart package.
google.charts.load('current', {
'packages': ['corechart', 'table', 'gauge', 'controls']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);
function gChart0() {
drawChart();
};
function drawChart() {
var result = [{
"calendarWeek": "2017-W30",
"clnCount": 1,
"someNumber": null //NOTE THIS IS SET TO NULL
}, {
"calendarWeek": "2017-W30",
"clnCount": 3,
"someNumber": 0 //NOTE THIS IS SET TO ZERO
}];
//Create DataTable
var data = new google.visualization.DataTable();
data.addColumn('string', 'Calendar Week');
data.addColumn('number', 'Count');
data.addColumn('number', 'Some Number');
var dataArray = [];
$.each(result, function(i, obj) {
dataArray.push([
obj.calendarWeek,
obj.clnCount,
obj.someNumber
]);
});
data.addRows(dataArray);
//grouping
var groupView = google.visualization.data.group(data,
[{
column: 0,
type: 'string'
}],
[{
column: 1,
aggregation: google.visualization.data.sum,
type: 'number'
},
{
column: 2,
aggregation: google.visualization.data.min,
type: 'number'
}
]);
//Options
var options = {};
// Instantiate and draw chart, passing in options.
var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(groupView, options);
} //END function drawChart()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

you can provide your own custom aggregation functions.
the aggregation function should accept an array of values as the only argument.
in the custom sum function, we replace null with zero
function customSum(values) {
var sum = 0;
values.forEach(function (value) {
sum += value || 0;
});
return sum;
}
in the custom min function, Math.min will return zero when both values are null
function customMin(values) {
var min = null;
values.forEach(function (value) {
min = Math.min(value, min);
});
return min;
}
see following working snippet...
google.charts.load('current', {
'packages': ['corechart', 'table', 'gauge', 'controls']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);
function gChart0() {
drawChart();
};
function drawChart() {
var result = [{
"calendarWeek": "2017-W30",
"clnCount": 1,
"someNumber": null //NOTE THIS IS SET TO NULL
}, {
"calendarWeek": "2017-W30",
"clnCount": 3,
"someNumber": 0 //NOTE THIS IS SET TO ZERO
}];
//Create DataTable
var data = new google.visualization.DataTable();
data.addColumn('string', 'Calendar Week');
data.addColumn('number', 'Count');
data.addColumn('number', 'Some Number');
var dataArray = [];
$.each(result, function(i, obj) {
dataArray.push([
obj.calendarWeek,
obj.clnCount,
obj.someNumber
]);
});
data.addRows(dataArray);
//grouping
var groupView = google.visualization.data.group(data,
[{
column: 0,
type: 'string'
}],
[{
column: 1,
aggregation: customSum,
type: 'number'
},
{
column: 2,
aggregation: customMin,
type: 'number'
}
]);
function customSum(values) {
var sum = 0;
values.forEach(function (value) {
sum += value || 0;
});
return sum;
}
function customMin(values) {
var min = null;
values.forEach(function (value) {
min = Math.min(value, min);
});
return min;
}
//Options
var options = {};
// Instantiate and draw chart, passing in options.
var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(groupView, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Tested a max version and it also works. Here's the code to share:
function customMax(values) {
var max = null;
values.forEach(function (value) {
max = Math.max(value, max);
});
return max;
}

Google Charts: Problem handling a 'click' event

I have a Google Chart, a bar chart, that I recently extended so that selecting one of the bars will open a new page, showing the data corresponding to that bar. I used the guidelines for basic interactivity, using a selectHandler to process the event.
I then decided to do the same thing when clicking on one of the labels, but I have not been able to get this to work. I looked pretty carefully at the docs, and at this older question (which is, in fact, my actual question: how do I make a hyperlink out of the chart's labels?) for guidance. I added a Listener for click events, and a handler for this, but my chart is not responding to them.
My basic setup is:
google.charts.load('current', {
callback: drawChart,
packages: ['bar']
});
var books = [
['2018-07', 5, 98.0],
['2018-08', 5, 100.0], // etc.
];
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Number Purchased');
data.addColumn('number', 'Price Paid');
data.addRows(books);
var options = {
chart: {
title: 'Book Purchases',
},
width: 800,
height: 800,
bars: 'horizontal',
series: {
0: {
axis: 'purchased'
},
1: {
axis: 'price_paid'
}
},
axes: {
x: {
purchased: {
side: 'top',
label: 'Number Purchased'
},
price_paid: {
label: 'Price Paid'
}
}
}
};
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var date = data.getValue(selectedItem.row, 0);
var query_string = '?date=' + date;
var path = window.location.pathname;
path = path.replace("bookgraph", "");
path = path + "search" + query_string;
var newURL = window.location.protocol + "//" + window.location.host + path;
window.open(newURL, '_blank');
}
}
function clickHandler(e) {
alert('The user has clicked on ' + e.targetID);
}
var chart = new google.charts.Bar(document.getElementById('bookgraph_material'));
google.visualization.events.addListener(chart, 'click', clickHandler);
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
The selectHandler works fine. But I can't even get the clickHandler to show the alert (after this works, I'll actually code the rest of it); it's apparently never fired, regardless of where I click. What am I doing wrong?
I set up a JS Fiddle page for this, to experiment with, with an HTML frame so it'll actually work; this shows the working select (albeit to a 404, of course) and the nonworking click.
Thanks.

the 'click' event is not supported by Material charts,
see issue #: 2257...
and there are several configuration options that are not supported as well,
see issue #: 2143...
Material = google.charts.Bar -- packages: ['bar']
Classic = google.visualization.BarChart -- packages: ['corechart']
one work around would be to use a Classic chart with option --> theme: 'material'
or register your own click event,
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['bar']
});
var books = [
['2016-01', 3, 45.0],
['2016-02', 3, 56.0],
['2016-03', 1, 23.0],
['2016-04', 4, 60.0],
['2016-05', 1, 0],
['2016-06', 3, 14.0],
['2016-07', 4, 65.0],
['2016-08', 1, 15.0],
['2016-09', 13, 234.0],
['2016-10', 20, 834.0],
['2016-11', 5, 115.0],
['2016-12', 5, 58.0],
['2017-01', 6, 122.0],
['2017-02', 4, 84.0],
['2017-03', 1, 0],
['2017-04', 1, 30.0],
['2017-05', 2, 38.0],
['2017-06', 1, 11.0],
['2017-07', 0, 0],
['2017-08', 4, 88.0],
['2017-09', 5, 89.0],
['2017-10', 4, 73.0],
['2017-11', 5, 79.0],
['2017-12', 2, 37.0],
['2018-01', 1, 22.0],
['2018-02', 5, 98.0],
['2018-03', 5, 132.0],
['2018-04', 3, 56.0],
['2018-05', 14, 272.0],
['2018-06', 4, 88.0],
['2018-07', 5, 98.0],
['2018-08', 5, 100.0],
];
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Number Purchased');
data.addColumn('number', 'Price Paid');
data.addRows(books);
var options = {
chart: {
title: 'Book Purchases',
},
width: 800,
height: 800,
bars: 'horizontal',
series: {
0: {
axis: 'purchased'
},
1: {
axis: 'price_paid'
}
},
axes: {
x: {
purchased: {
side: 'top',
label: 'Number Purchased'
},
price_paid: {
label: 'Price Paid'
}
}
}
};
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var date = data.getValue(selectedItem.row, 0);
var query_string = '?date=' + date;
var path = window.location.pathname;
path = path.replace("bookgraph", "");
path = path + "search" + query_string;
var newURL = window.location.protocol + "//" + window.location.host + path;
window.open(newURL, '_blank');
}
}
function clickHandler(e) {
if (e.target.tagName === 'text') {
console.log(e.target.textContent);
}
}
var container = document.getElementById('bookgraph_material');
var chart = new google.charts.Bar(container);
google.visualization.events.addListener(chart, 'select', selectHandler);
container.addEventListener('click', clickHandler);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="bookgraph_material"></div>

My chart is not shown on browser screen using chart.js in meteor

My chart is not shown on browser screen. I am using chart.js with meteor and also trying to do it with onRendered or onCreated but it didn't work for me.
Here is my code
<div class="pie-canvas">
<canvas id="myChart" width="350" height="350"></canvas>
</div>
Js file ->
Template.home.rendered = function() {
Deps.autorun(function() { drawChart(); });
};
function drawChart() {
var oldCount = 2;
var newCount = 4;
var data = [{
value: newCount,
color: "#e53935",
highlight: "#c62828",
label: "New"
}, {
value: oldCount,
color: "#3949ab",
highlight: "#1a237e",
label: "Regular"
}];
var pieOptions = {
animation: false,
}
if ($("#myChart").get(0)) {
var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx);
new Chart(ctx).Pie(data, pieOptions);
}
}
home is my template name

When you console log '$("#myChart").get(0)' this will return you undefined, because on rendered your get(0) is not initialized, For prevent this you have to add a callback when you initialized you chart. So your get(0) will be initialized first then you can create your chats.
'$("#myChart").get(0)' is not a reative thing so your view will be not re-initialized.
Here is the working code:
function drawChart() {
var oldCount = 2;
var newCount = 4;
var data = [{
value: newCount,
color: "#e53935",
highlight: "#c62828",
label: "New"
}, {
value: oldCount,
color: "#3949ab",
highlight: "#1a237e",
label: "Regular"
}];
var pieOptions = {
animation: false,
}
// Added a callback here.
setTimeout( function(){
if ($("#myChart").get(0)) {
var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx);
console.log(myNewChart);
new Chart(ctx).Pie(data, pieOptions);
}
})
}