Develop Reference

Google Chart - JSON Data Source Item as Legend Field - Stacked Column - javascript

I want to create a stacked column chart with a JSON data source and use an item in my JSON data to group by as a field. I haven't found any resources on how to do this, and I have no JS experience.
I know how to join multiple data sources if you know the fields you'll be grouping by. But in this case the Client fields are dynamic.
This stack question is similar to what I want to accomplish: JSON format for Google chart stacked column
My data comes in like the following:
[["2017/06/25", "Some Client A", 805.0], ["2017/07/02", "Some Client B", 955.0], ["2017/07/09", "Some Client C", 805.0]]
So far I have the below. Which obviously doesn't work:
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Week');
data.addColumn('string', 'client');
data.addColumn('number', 'Hours');
data.addRows( {{ sbl1|safe }} );

the data shown in the post should work fine with the code from the other answer,
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Week');
data.addColumn('string', 'client');
data.addColumn('number', 'Hours');
data.addRows([["2017/07/09", "Some Client A", 805.0], ["2017/07/09", "Some Client B", 955.0], ["2017/07/09", "Some Client C", 805.0]]);
// create data view
var view = new google.visualization.DataView(data);
// init column arrays
var aggColumns = [];
var viewColumns = [{
calc: function (dt, row) {
return dt.getFormattedValue(row, 0);
},
label: data.getColumnLabel(0),
type: 'string'
}];
// build view & agg column for each client
data.getDistinctValues(1).forEach(function (client, index) {
// add view column
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === client) {
return dt.getValue(row, 2);
}
return null;
},
label: client,
type: 'number'
});
// add agg column
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: client,
type: 'number'
});
});
// set view columns
view.setColumns(viewColumns);
// agg view by first column
var group = google.visualization.data.group(
view,
[0],
aggColumns
);
// draw chart
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(group, {
isStacked: true
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

I am fetching data table from google sheet, but Pie chart is unable to read the Array. I am getting below error on console.
Uncaught Error: Unknown type of column header: 1
I am using below script to get the data from Google Spreadsheet.
Code.gs:
function vodPiechart() {
const ss = SpreadsheetApp.openById("");
const sw = ss.getSheetByName("Pie_Chart_Data");
var data = sw.getRange (1,1,3, 2).getValues();
return data
}
HTML Script (from Google Charts)
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(getData);
function getData(){
google.script.run.withSuccessHandler(drawChart).vodPiechart();
}
function drawChart(dataReturened) {
var data = google.visualization.arrayToDataTable(dataReturened);
console.log(dataReturened);
var options = {
title: 'My Channel',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
console.log of dataReturned:
Array(3) [ (2) […], (2) […], (2) […] ]
​0: Array [ "Task", "Views" ]
​1: Array [ "Channel A", 2854170 ]
​2: Array [ "CHannel B", 240222 ]
​length: 3
​<prototype>: Array []
Could anyone please tell me, what I am doing wrong here?
THANK YOU

something about the data is incorrect.
the error message you received is thrown when column headings do not exist in the data.
or the value of the column heading is not a string.
Uncaught Error: Unknown type of column header: 1
in this case, the number 1 is trying to be used as a column heading.
see following example, the following error will be thrown.
Uncaught Error: Unknown type of column header: 2854170
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
["Channel A", 2854170],
["Channel B", 240222],
]);
var options = {
title: 'My Channel',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
});
the arrayToDataTable method has a second, boolean argument.
when set to true, it will create the data table without column headings,
and use the first row as data.
var data = google.visualization.arrayToDataTable([
["Channel A", 2854170],
["Channel B", 240222],
], true); // <-- first row is data
there are really no use for column headings in a pie chart,
because the labels are provided on each row.
try adding the boolean argument for resolution.
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
["Channel A", 2854170],
["Channel B", 240222],
], true);
var options = {
title: 'My Channel',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart_3d"></div>

I want to plot the line chart, generate two lines into one chart, in order show the total for each Line on each day.
When i run the program, the error message "Row 1 has 1 columns, but must have 27".
in fact the code behind I have retrieved data from SQL and there is 26 rows in the table, and the script confused me there is 27 rows.
I tried to add columns one by one, but still the same error.
and I am thinking how can i add dynamic columns and rows instead of add columns manually?
Here is my script:
function drawMultiLineChart() {
var options = {
title: 'Multi Line Chart',
width: 1000,
height: 500,
};
$.ajax({
type: "POST",
url: "Chart.aspx/GetMultiLineData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
data.addColumn('string', 'Line');
data.addColumn('string', 'F1');
data.addColumn('string', 'T1');
data.addColumn('string', 'T10');
data.addColumn('string', 'T11');
data.addColumn('string', 'T12');
data.addColumn('string', 'T13');
data.addColumn('string', 'T14');
data.addColumn('string', 'T15');
data.addColumn('string', 'T16');
data.addColumn('string', 'T19');
data.addColumn('string', 'T2');
data.addColumn('string', 'T21');
data.addColumn('string', 'T22');
data.addColumn('string', 'T23');
data.addColumn('string', 'T24');
data.addColumn('string', 'T25');
data.addColumn('string', 'T26');
data.addColumn('string', 'T27');
data.addColumn('string', 'T28');
data.addColumn('string', 'T3');
data.addColumn('string', 'T4');
data.addColumn('string', 'T5');
data.addColumn('string', 'T6');
data.addColumn('string', 'T7');
data.addColumn('string', 'T8');
data.addColumn('string', 'T9');
var chart = new google.visualization.LineChart($("#divMultiLineChart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}

in order to draw multiple lines on a chart.
each series / line must be in a separate column in the data table.
the format of the rows and columns would need to be formatted as follows...
[
["SelectedDate","F1","T1","T2","T3", ...]
["08/01/2020",8,10,12,14, ...]
...
]
if this format is difficult to produce in SQL,
we can manipulate the data on the client, before drawing the chart.
the current format of the data is as follows...
[
["SelectedDate","Line","TotalCavities"],
["08/01/2020","F1",8],
["08/01/2020","T1",21],
...
]
we can use methods provided by google to transform the data into the proper format.
first, we create the data table. group on the second column, then create a data view,
with a column for each line.
see following working snippet...
google.charts.load("current", {
packages: ["corechart"]
}).then(function () {
var options = {
title: "Multi Line Chart",
width: 1800,
height: 700,
legend: { position: "bottom" }
};
$.ajax({
type: "POST",
url: "Chart.aspx/GetMultiLineData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(drawMultiLineChart).fail(function () {
drawMultiLineChart({d: [["SelectedDate","Line","TotalCavities"],["08/01/2020","F1",8],["08/01/2020","T1",21],["08/01/2020","T10",0],["08/01/2020","T11",24],["08/01/2020","T12",24],["08/01/2020","T13",24],["08/01/2020","T16",24],["08/01/2020","T19",20],["08/01/2020","T21",21],["08/01/2020","T22",29],["08/01/2020","T23",32],["08/01/2020","T26",16],["08/01/2020","T27",16],["08/01/2020","T4",0],["08/01/2020","T5",30],["08/01/2020","T6",15],["08/01/2020","T7",26],["08/01/2020","T8",24],["08/01/2020","T9",32],["08/02/2020","T1",15],["08/02/2020","T10",0],["08/02/2020","T11",23],["08/02/2020","T12",32],["08/02/2020","T13",14],["08/02/2020","T16",24],["08/02/2020","T19",30],["08/02/2020","T21",21],["08/02/2020","T22",19],["08/02/2020","T23",32],["08/02/2020","T26",16],["08/02/2020","T3",0],["08/02/2020","T4",0],["08/02/2020","T5",20],["08/02/2020","T6",15],["08/02/2020","T7",8],["08/02/2020","T8",32],["08/02/2020","T9",24],["08/03/2020","T1",18],["08/03/2020","T10",8],["08/03/2020","T11",23],["08/03/2020","T12",24],["08/03/2020","T13",24],["08/03/2020","T16",24],["08/03/2020","T19",18],["08/03/2020","T21",21],["08/03/2020","T22",21],["08/03/2020","T23",32],["08/03/2020","T27",24],["08/03/2020","T4",0],["08/03/2020","T5",18],["08/03/2020","T6",17],["08/03/2020","T7",20],["08/03/2020","T8",23],["08/03/2020","T9",24],["08/04/2020","F1",24],["08/04/2020","T1",24],["08/04/2020","T10",0],["08/04/2020","T11",24],["08/04/2020","T12",32],["08/04/2020","T13",16],["08/04/2020","T16",8],["08/04/2020","T19",18],["08/04/2020","T21",21],["08/04/2020","T22",30],["08/04/2020","T23",32],["08/04/2020","T5",30],["08/04/2020","T6",17],["08/04/2020","T7",24],["08/04/2020","T8",23],["08/04/2020","T9",24],["08/05/2020","F1",24],["08/05/2020","T1",11],["08/05/2020","T11",31],["08/05/2020","T12",24],["08/05/2020","T13",30],["08/05/2020","T19",18],["08/05/2020","T21",29],["08/05/2020","T23",32],["08/05/2020","T4",24],["08/05/2020","T5",18],["08/05/2020","T6",18],["08/05/2020","T7",24],["08/05/2020","T8",24],["08/05/2020","T9",32],["08/06/2020","F1",32],["08/06/2020","T1",25],["08/06/2020","T11",23],["08/06/2020","T12",40],["08/06/2020","T13",28],["08/06/2020","T16",22],["08/06/2020","T19",26],["08/06/2020","T2",8],["08/06/2020","T21",28],["08/06/2020","T22",6],["08/06/2020","T23",36],["08/06/2020","T25",8],["08/06/2020","T27",32],["08/06/2020","T4",16],["08/06/2020","T5",26],["08/06/2020","T6",18],["08/06/2020","T8",24],["08/06/2020","T9",23],["08/07/2020","F1",32],["08/07/2020","T1",17],["08/07/2020","T11",21],["08/07/2020","T12",24],["08/07/2020","T13",18],["08/07/2020","T19",26],["08/07/2020","T21",21],["08/07/2020","T23",22],["08/07/2020","T25",32],["08/07/2020","T27",24],["08/07/2020","T3",14],["08/07/2020","T4",16],["08/07/2020","T5",34],["08/07/2020","T6",21],["08/07/2020","T7",20],["08/07/2020","T8",32],["08/07/2020","T9",29],["08/08/2020","F1",24],["08/08/2020","T1",24],["08/08/2020","T10",0],["08/08/2020","T11",21],["08/08/2020","T12",32],["08/08/2020","T13",26],["08/08/2020","T19",18],["08/08/2020","T21",21],["08/08/2020","T22",14],["08/08/2020","T23",21],["08/08/2020","T25",22],["08/08/2020","T27",24],["08/08/2020","T3",12],["08/08/2020","T4",0],["08/08/2020","T5",26],["08/08/2020","T6",15],["08/08/2020","T7",8],["08/08/2020","T8",22],["08/08/2020","T9",13],["08/09/2020","F1",24],["08/09/2020","T1",23],["08/09/2020","T11",24],["08/09/2020","T12",16],["08/09/2020","T13",28],["08/09/2020","T14",8],["08/09/2020","T19",18],["08/09/2020","T21",36],["08/09/2020","T22",20],["08/09/2020","T23",21],["08/09/2020","T25",21],["08/09/2020","T27",24],["08/09/2020","T3",0],["08/09/2020","T4",21],["08/09/2020","T5",18],["08/09/2020","T6",15],["08/09/2020","T7",0],["08/09/2020","T8",18],["08/09/2020","T9",10],["08/10/2020","F1",24],["08/10/2020","T1",17],["08/10/2020","T11",12],["08/10/2020","T12",32],["08/10/2020","T13",17],["08/10/2020","T14",8],["08/10/2020","T19",17],["08/10/2020","T2",23],["08/10/2020","T21",19],["08/10/2020","T22",18],["08/10/2020","T23",32],["08/10/2020","T25",24],["08/10/2020","T26",24],["08/10/2020","T27",24],["08/10/2020","T3",0],["08/10/2020","T4",15],["08/10/2020","T5",18],["08/10/2020","T6",15],["08/10/2020","T7",12],["08/10/2020","T8",14],["08/10/2020","T9",24],["08/11/2020","F1",29],["08/11/2020","T1",18],["08/11/2020","T11",0],["08/11/2020","T12",16],["08/11/2020","T13",23],["08/11/2020","T14",24],["08/11/2020","T19",20],["08/11/2020","T2",24],["08/11/2020","T21",28],["08/11/2020","T22",18],["08/11/2020","T23",40],["08/11/2020","T25",8],["08/11/2020","T26",21],["08/11/2020","T27",24],["08/11/2020","T3",0],["08/11/2020","T4",7],["08/11/2020","T5",20],["08/11/2020","T6",19],["08/11/2020","T7",29],["08/11/2020","T8",16],["08/11/2020","T9",24],["08/12/2020","F1",7],["08/12/2020","T1",18],["08/12/2020","T10",6],["08/12/2020","T11",8],["08/12/2020","T12",21],["08/12/2020","T13",21],["08/12/2020","T14",24],["08/12/2020","T15",14],["08/12/2020","T16",16],["08/12/2020","T19",24],["08/12/2020","T2",24],["08/12/2020","T21",21],["08/12/2020","T22",18],["08/12/2020","T23",32],["08/12/2020","T26",7],["08/12/2020","T27",24],["08/12/2020","T3",0],["08/12/2020","T5",12],["08/12/2020","T6",20],["08/12/2020","T7",24],["08/12/2020","T8",14],["08/12/2020","T9",31],["08/13/2020","F1",20],["08/13/2020","T1",18],["08/13/2020","T10",18],["08/13/2020","T11",22],["08/13/2020","T12",28],["08/13/2020","T13",23],["08/13/2020","T14",24],["08/13/2020","T15",28],["08/13/2020","T16",0],["08/13/2020","T19",20],["08/13/2020","T2",32],["08/13/2020","T21",15],["08/13/2020","T22",20],["08/13/2020","T23",22],["08/13/2020","T25",16],["08/13/2020","T27",24],["08/13/2020","T3",16],["08/13/2020","T4",0],["08/13/2020","T5",18],["08/13/2020","T6",18],["08/13/2020","T8",24],["08/13/2020","T9",31],["08/14/2020","F1",24],["08/14/2020","T1",18],["08/14/2020","T10",14],["08/14/2020","T11",32],["08/14/2020","T12",19],["08/14/2020","T13",24],["08/14/2020","T14",24],["08/14/2020","T15",22],["08/14/2020","T16",0],["08/14/2020","T19",20],["08/14/2020","T2",24],["08/14/2020","T21",21],["08/14/2020","T22",18],["08/14/2020","T23",24],["08/14/2020","T25",24],["08/14/2020","T27",32],["08/14/2020","T3",22],["08/14/2020","T5",18],["08/14/2020","T6",24],["08/14/2020","T7",8],["08/14/2020","T8",8],["08/14/2020","T9",32],["08/15/2020","F1",24],["08/15/2020","T1",18],["08/15/2020","T10",20],["08/15/2020","T11",23],["08/15/2020","T12",20],["08/15/2020","T13",7],["08/15/2020","T14",30],["08/15/2020","T15",14],["08/15/2020","T19",15],["08/15/2020","T2",24],["08/15/2020","T21",14],["08/15/2020","T22",18],["08/15/2020","T23",24],["08/15/2020","T25",24],["08/15/2020","T27",24],["08/15/2020","T3",18],["08/15/2020","T4",0],["08/15/2020","T5",14],["08/15/2020","T6",18],["08/15/2020","T8",16],["08/15/2020","T9",32],["08/16/2020","F1",18],["08/16/2020","T1",18],["08/16/2020","T10",16],["08/16/2020","T11",24],["08/16/2020","T12",21],["08/16/2020","T14",28],["08/16/2020","T15",28],["08/16/2020","T19",15],["08/16/2020","T2",13],["08/16/2020","T22",18],["08/16/2020","T23",32],["08/16/2020","T25",24],["08/16/2020","T27",8],["08/16/2020","T3",14],["08/16/2020","T4",0],["08/16/2020","T5",20],["08/16/2020","T6",0],["08/16/2020","T8",8],["08/16/2020","T9",24],["08/17/2020","F1",18],["08/17/2020","T1",24],["08/17/2020","T10",8],["08/17/2020","T11",32],["08/17/2020","T12",28],["08/17/2020","T13",22],["08/17/2020","T14",20],["08/17/2020","T15",23],["08/17/2020","T19",15],["08/17/2020","T2",8],["08/17/2020","T22",18],["08/17/2020","T23",24],["08/17/2020","T25",24],["08/17/2020","T27",24],["08/17/2020","T3",0],["08/17/2020","T5",23],["08/17/2020","T6",12],["08/17/2020","T8",32],["08/17/2020","T9",24],["08/18/2020","F1",12],["08/18/2020","T1",21],["08/18/2020","T11",32],["08/18/2020","T12",21],["08/18/2020","T13",24],["08/18/2020","T14",32],["08/18/2020","T15",22],["08/18/2020","T19",15],["08/18/2020","T2",11],["08/18/2020","T21",21],["08/18/2020","T22",26],["08/18/2020","T23",24],["08/18/2020","T25",21],["08/18/2020","T27",24],["08/18/2020","T3",0],["08/18/2020","T5",31],["08/18/2020","T6",24],["08/18/2020","T8",45],["08/18/2020","T9",16],["08/19/2020","T1",15],["08/19/2020","T11",24],["08/19/2020","T12",28],["08/19/2020","T13",24],["08/19/2020","T14",24],["08/19/2020","T15",23],["08/19/2020","T16",16],["08/19/2020","T19",15],["08/19/2020","T2",5],["08/19/2020","T21",21],["08/19/2020","T22",18],["08/19/2020","T23",24],["08/19/2020","T25",15],["08/19/2020","T27",32],["08/19/2020","T3",0],["08/19/2020","T5",7],["08/19/2020","T6",24],["08/19/2020","T8",23],["08/19/2020","T9",24],["08/20/2020","T1",20],["08/20/2020","T10",24],["08/20/2020","T11",24],["08/20/2020","T12",21],["08/20/2020","T13",24],["08/20/2020","T14",32],["08/20/2020","T15",24],["08/20/2020","T16",24],["08/20/2020","T19",18],["08/20/2020","T21",29],["08/20/2020","T22",12],["08/20/2020","T23",24],["08/20/2020","T25",8],["08/20/2020","T27",24],["08/20/2020","T3",0],["08/20/2020","T5",16],["08/20/2020","T6",17],["08/20/2020","T8",30],["08/20/2020","T9",16],["08/21/2020","T1",18],["08/21/2020","T10",24],["08/21/2020","T11",31],["08/21/2020","T12",28],["08/21/2020","T13",32],["08/21/2020","T14",24],["08/21/2020","T15",16],["08/21/2020","T16",24],["08/21/2020","T19",18],["08/21/2020","T21",21],["08/21/2020","T22",20],["08/21/2020","T23",24],["08/21/2020","T25",14],["08/21/2020","T27",24],["08/21/2020","T3",0],["08/21/2020","T5",24],["08/21/2020","T6",15],["08/21/2020","T8",23],["08/21/2020","T9",32],["08/22/2020","T1",18],["08/22/2020","T10",24],["08/22/2020","T11",38],["08/22/2020","T12",21],["08/22/2020","T13",21],["08/22/2020","T14",39],["08/22/2020","T15",24],["08/22/2020","T16",24],["08/22/2020","T19",20],["08/22/2020","T21",27],["08/22/2020","T22",18],["08/22/2020","T23",32],["08/22/2020","T25",23],["08/22/2020","T27",32],["08/22/2020","T3",0],["08/22/2020","T5",32],["08/22/2020","T6",18],["08/22/2020","T8",32],["08/22/2020","T9",24],["08/23/2020","T1",24],["08/23/2020","T10",13],["08/23/2020","T11",15],["08/23/2020","T12",28],["08/23/2020","T13",21],["08/23/2020","T14",15],["08/23/2020","T15",32],["08/23/2020","T16",24],["08/23/2020","T19",14],["08/23/2020","T21",18],["08/23/2020","T22",18],["08/23/2020","T23",32],["08/23/2020","T25",7],["08/23/2020","T27",24],["08/23/2020","T5",24],["08/23/2020","T6",5],["08/23/2020","T8",20],["08/23/2020","T9",22],["08/24/2020","F1",8],["08/24/2020","T1",18],["08/24/2020","T10",24],["08/24/2020","T11",8],["08/24/2020","T12",23],["08/24/2020","T13",21],["08/24/2020","T14",0],["08/24/2020","T15",16],["08/24/2020","T16",32],["08/24/2020","T19",15],["08/24/2020","T21",20],["08/24/2020","T22",18],["08/24/2020","T23",32],["08/24/2020","T25",15],["08/24/2020","T27",24],["08/24/2020","T5",24],["08/24/2020","T6",28],["08/24/2020","T8",19],["08/24/2020","T9",24],["08/25/2020","T1",18],["08/25/2020","T10",24],["08/25/2020","T11",24],["08/25/2020","T12",24],["08/25/2020","T13",24],["08/25/2020","T14",0],["08/25/2020","T15",32],["08/25/2020","T16",32],["08/25/2020","T19",15],["08/25/2020","T21",21],["08/25/2020","T22",20],["08/25/2020","T23",40],["08/25/2020","T25",21],["08/25/2020","T27",32],["08/25/2020","T5",24],["08/25/2020","T6",13],["08/25/2020","T8",23],["08/25/2020","T9",48],["08/26/2020","F1",24],["08/26/2020","T1",18],["08/26/2020","T10",23],["08/26/2020","T11",24],["08/26/2020","T12",32],["08/26/2020","T13",24],["08/26/2020","T14",0],["08/26/2020","T15",32],["08/26/2020","T16",24],["08/26/2020","T19",20],["08/26/2020","T21",0],["08/26/2020","T22",11],["08/26/2020","T23",40],["08/26/2020","T25",21],["08/26/2020","T27",24],["08/26/2020","T5",32],["08/26/2020","T6",14],["08/26/2020","T9",23],["08/27/2020","F1",24],["08/27/2020","T1",31],["08/27/2020","T10",16],["08/27/2020","T11",22],["08/27/2020","T12",32],["08/27/2020","T13",28],["08/27/2020","T14",32],["08/27/2020","T15",32],["08/27/2020","T16",32],["08/27/2020","T19",15],["08/27/2020","T21",22],["08/27/2020","T22",0],["08/27/2020","T23",24],["08/27/2020","T25",7],["08/27/2020","T27",16],["08/27/2020","T5",24],["08/27/2020","T6",14],["08/27/2020","T8",24],["08/27/2020","T9",24],["08/28/2020","F1",23],["08/28/2020","T1",24],["08/28/2020","T10",16],["08/28/2020","T11",21],["08/28/2020","T12",32],["08/28/2020","T13",18],["08/28/2020","T14",24],["08/28/2020","T15",32],["08/28/2020","T16",24],["08/28/2020","T19",10],["08/28/2020","T21",27],["08/28/2020","T22",0],["08/28/2020","T23",24],["08/28/2020","T24",24],["08/28/2020","T25",16],["08/28/2020","T27",8],["08/28/2020","T5",32],["08/28/2020","T6",28],["08/28/2020","T7",24],["08/28/2020","T8",24],["08/28/2020","T9",32],["08/29/2020","F1",24],["08/29/2020","T1",24],["08/29/2020","T10",16],["08/29/2020","T11",28],["08/29/2020","T12",24],["08/29/2020","T13",14],["08/29/2020","T14",0],["08/29/2020","T15",38],["08/29/2020","T16",14],["08/29/2020","T19",15],["08/29/2020","T21",20],["08/29/2020","T22",0],["08/29/2020","T23",24],["08/29/2020","T24",32],["08/29/2020","T25",24],["08/29/2020","T27",16],["08/29/2020","T5",32],["08/29/2020","T6",21],["08/29/2020","T7",32],["08/29/2020","T8",24],["08/29/2020","T9",24],["08/30/2020","F1",32],["08/30/2020","T1",16],["08/30/2020","T10",23],["08/30/2020","T11",21],["08/30/2020","T12",24],["08/30/2020","T13",7],["08/30/2020","T14",0],["08/30/2020","T15",24],["08/30/2020","T16",24],["08/30/2020","T19",29],["08/30/2020","T21",21],["08/30/2020","T23",24],["08/30/2020","T24",32],["08/30/2020","T25",32],["08/30/2020","T27",16],["08/30/2020","T5",24],["08/30/2020","T6",7],["08/30/2020","T7",24],["08/30/2020","T8",24],["08/30/2020","T9",21],["08/31/2020","F1",24],["08/31/2020","T1",24],["08/31/2020","T10",27],["08/31/2020","T11",30],["08/31/2020","T12",32],["08/31/2020","T13",24],["08/31/2020","T14",0],["08/31/2020","T15",30],["08/31/2020","T16",24],["08/31/2020","T19",14],["08/31/2020","T21",21],["08/31/2020","T23",40],["08/31/2020","T24",16],["08/31/2020","T25",32],["08/31/2020","T27",24],["08/31/2020","T28",16],["08/31/2020","T5",24],["08/31/2020","T6",0],["08/31/2020","T8",24],["08/31/2020","T9",7]]});
});
function drawMultiLineChart(r) {
// data table
var data = google.visualization.arrayToDataTable(r.d);
// data view
var view = new google.visualization.DataView(data);
// init column arrays
var aggColumns = [];
var viewColumns = [0];
// build view & agg columns for each line
data.getDistinctValues(1).forEach(function (line, index) {
// add view column for each line
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === line) {
return dt.getValue(row, 2);
}
return null;
},
label: line,
type: "number"
});
// add agg column
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: line,
type: "number"
});
});
// set view columns
view.setColumns(viewColumns);
// agg view by line
var aggData = google.visualization.data.group(
view,
[0],
aggColumns
);
// draw chart
var chart = new google.visualization.LineChart($("#divMultiLineChart").get(0));
chart.draw(aggData, options);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="divMultiLineChart"></div>

I'm using google chart datatable getting data from a Json, but I want to add a new column result of divide column 2 by 15000.
Using google.visualization.DataTable()
I'm getting something like this
Colum 1 | Column 2
First row 15.000.000€
Second row 20.000.000€
I want Column 3 like this
Colum 1 | Column 2 | Column 3
First row 15.000.000€ 1.000,00€
Second row 20.000.000€ 1.333,33€

you can use a DataView to add the new column, using a calculated column.
create a data view from the data table
var view = new google.visualization.DataView(data);
then use the setColumns method to change the view columns.
we use the column index of the first two columns,
then use a calculation for the third.
view.setColumns([0, 1, {
calc: function (dt, row) {
return dt.getValue(row, 1) / 15000;
},
label: 'Column 3',
type: 'number'
}]);
see following working snippet...
google.charts.load('current', {
packages: ['table']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Column 1', 'Column 2'],
['First Row', 15000000],
['Second Row', 20000000]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return dt.getValue(row, 1) / 15000;
},
label: 'Column 3',
type: 'number'
}]);
var table = new google.visualization.Table(document.getElementById('chart_div'));
table.draw(view);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
to format the number,
use google's number formatter,
and object notation for the value.
var formatNumber = new google.visualization.NumberFormat({
pattern: '#,##0.00',
suffix: '€'
});
to format a data table column, use the format method.
formatNumber.format(data, 1);
to format a single value, use the formatValue method.
var value = dt.getValue(row, 1) / 15000;
return {
v: value,
f: formatNumber.formatValue(value)
};
see following working snippet..
google.charts.load('current', {
packages: ['table']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Column 1', 'Column 2'],
['First Row', 15000000],
['Second Row', 20000000]
]);
var formatNumber = new google.visualization.NumberFormat({
pattern: '#,##0.00',
suffix: '€'
});
formatNumber.format(data, 1);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
var value = dt.getValue(row, 1) / 15000;
return {
v: value,
f: formatNumber.formatValue(value)
};
},
label: 'Column 3',
type: 'number'
}]);
var table = new google.visualization.Table(document.getElementById('chart_div'));
table.draw(view);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

I'm trying to plot a Chart using Google's Visualization API using some data returned from a database by a PHP script. My data is a JSON object in the format:
jsonObject = {
"routes":[{
"name":"Route 0",
"chart":{
"x":[ /* array of x values */ ],
"y":[ /* array of y values */ ]
}
},{
"name":"Route 1",
"chart":{
"x":[ /* array of x values */ ],
"y":[ /* array of y values */ ]
}
}]};
I'm trying to plot a chart of each member of jsonObject.routes individually using the following code:
function drawChart() {
var baseChart = jsonObject.routes[1].chart; // Want to manipulate this value to plot different sets of data
var chartData = [];
for (var g = 0; g < baseChart.x.length; g++) {
var dataPoint = {
c: [
{ v: baseChart.x[g] },
{ v: baseChart.y[g] },
]
};
chartData.push(dataPoint);
}
var dataJson = {
cols: [
{ role: "domain", type: "number", label: "Distance" },
{ role: "data", type: "number", label: "Main Route" },
],
rows: chartData
};
var dataTable = new google.visualization.DataTable(dataJson);
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
var options = {};
chart.draw(dataTable, options);
}
However, whenever I try to access the latter objects of the jsonObject.route array, it seems to be pulling data for every object in the jsonObject.route array prior to it as well.
I've included a link to a Fiddle with a sample dataset at the bottom; the chart is fine when only plotting jsonObject.routes[0], but when trying to plot jsonObject.routes[1] it will plot the data from jsonObject.routes[0] too.
I suspect this is more of an issue with my Javascript code rather than with the Google Visualization API, but I've been pulling my hair out with it and can figure out why it's pulling data from all the elements in that array. Many thanks for any help!
Link to Fiddle

not sure i completely follow the question...
looking at the fiddle, the one chart seems to draw fine,
just need to sort the data to fix funny looking area
dataTable.sort([{column: 0}]);
see following snippet in order to draw separate charts for each --> jsonObject.routes
google.charts.load('current', {
callback: function () {
jsonObject.routes.forEach(function (route) {
var chartData = [];
route.chart.dist.forEach(function (x, index) {
chartData.push({
c: [
{v: x},
{v: route.chart.ele[index]}
]
});
});
var dataJson = {
cols: [
{ role: "domain", type: "number", label: "Distance" },
{ role: "data", type: "number", label: "Main Route" },
],
rows: chartData
};
var dataTable = new google.visualization.DataTable(dataJson);
dataTable.sort([{column: 0}]);
var options = {};
var container = document.getElementById('chart_div').appendChild(document.createElement('div'));
var chart = new google.visualization.AreaChart(container);
chart.draw(dataTable, options);
});
},
packages:['corechart']
});
note: definition of jsonObject is excluded above
AND
when building a working fiddle, i noticed that since jsonObject is so large,
once you leave the page and comeback,
the fiddle breaks it up into chunks, which then breaks the code
and only one chart is drawn
here is a working fiddle with far less data

I am using the google charts api to display data from php. I am displaying this information in a material style bar chart (vertical).
I am trying to add annotations to show the values inside the bars however it isn't working.
JavaScript:
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawLastPackets);
function drawLastPackets() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Days');
data.addColumn('number', 'Packets Packed');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows(<?php echo json_encode($chartLastPackets); ?>);
var toAdd = ["Day", "Packets Packed", {"role": "annotation"}];
var options = {
legend: {
position: 'none',
},
series: {
0: {color: '#d7a8a8'}
},
vAxis: {
title: 'Packets'
}
};
var chart = new google.charts.Bar(document.getElementById('lastPackets'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
The contents of the php array $chartLastPackets is:
[["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]
However all I can see is the chart itself without the annotation.

annotations.* are listed among the several options that don't work on Material charts
you can use the following option, to get the chart close to the look & feel of Material
theme: 'material'
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Days');
data.addColumn('number', 'Packets Packed');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]);
var options = {
legend: {
position: 'none',
},
series: {
0: {color: '#d7a8a8'}
},
theme: 'material',
vAxis: {
title: 'Packets'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('lastPackets'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="lastPackets"></div>