Develop Reference

Google Line Chart - Dynamic add columns / rows from arraydatatable - javascript

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>

Related

var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Male', 51],
['Female', 49],
]);
// Set options for Sarah's pie chart.
var options = {title:"",
width:600,
height:400,
is3D: true};
Above is my code. I'm looking to remove the value on the hover but keep the percentages in the pie chart. So on my chart it says Male: 51(51%) Female: 49(49%). It won't let me attach a picture since I'm fairly new so I apologize for that as well.

Just add one more configuration tooltip in options object:
var options = {
title:"",
width:600,
height:400,
tooltip: {
text: 'percentage'
},
is3D: true
};
Here is demo : https://jsfiddle.net/fs6tc5nq/1/

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>

I have this data in a Google DataTable:
And I want to position the page buttons on top of the table. But it seems to me Google doesn't support to do this. Is there any best approach do you guys know?
HERE IS jsfiddle link what I am trying now.
jsfiddle.net/Kwangsub_Ahn/ohh8397h/7/
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>
JAVASCRIPT
google.load("visualization", "1.1", {
packages: ["table"]
});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('string', 'Project');
data.addColumn('string', 'System');
data.addColumn('number', 'No');
data.addRows([
['7/31/2014', 'project1', 'system1', 5],
['5/2/2014', 'project2', 'system2', 2],
['5/2/2014', 'project1', 'system1', 5],
['1/31/2014', 'project3', 'system4', 1]
]);
var view = new google.visualization.DataView(data);
var id = document.getElementById('table_div');
var table = new google.visualization.Table(id);
table.draw(view, {
allowHtml: true,
width: '100%',
height: '100%',
page: 'enable',
pageSize: 10
});
}

1) there aren't any standard options you can set,
but you can move the button row manually,
when the chart's 'ready' and 'page' events fire
google.visualization.events.addListener(table, 'ready', moveButtons);
google.visualization.events.addListener(table, 'page', moveButtons);
function moveButtons() {
var content = id.children[0].children[1];
var parent = content.parentNode;
parent.insertBefore(content, parent.children[0]);
}
2) the chart will move the buttons back to the bottom after the 'sort' and 'page' events...
using moveButtons for the 'page' event works fine,
but need to handle 'sort' differently
if you don't want to allow sorting, simply set the following option, and don't attach an event...
sort: 'event'
if you want to allow sorting, you'll still need to set the above option,
but you'll also have to handle manually sorting the table
sort: 'event'
google.visualization.events.addListener(table, 'sort', sortTable);
function sortTable(sortOptions) {
data.sort([{
column: sortOptions.column,
desc: !sortOptions.ascending
}]);
options.sortColumn = sortOptions.column;
options.sortAscending = sortOptions.ascending;
table.draw(data, options);
}
see following working snippet...
google.charts.load('current', {
callback: drawTable,
packages: ['table']
});
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('string', 'Project');
data.addColumn('string', 'System');
data.addColumn('number', 'No');
data.addRows([
['7/31/2014', 'project1', 'system1', 5],
['5/2/2014', 'project2', 'system2', 2],
['5/2/2014', 'project1', 'system1', 5],
['1/31/2014', 'project3', 'system4', 1]
]);
var options = {
allowHtml: true,
width: '100%',
height: '100%',
page: 'enable',
pageSize: 2,
sort: 'event'
};
var id = document.getElementById('table_div');
var table = new google.visualization.Table(id);
google.visualization.events.addListener(table, 'ready', moveButtons);
google.visualization.events.addListener(table, 'page', moveButtons);
function moveButtons() {
var content = id.children[0].children[1];
var parent = content.parentNode;
parent.insertBefore(content, parent.children[0]);
}
google.visualization.events.addListener(table, 'sort', sortTable);
function sortTable(sortOptions) {
data.sort([{
column: sortOptions.column,
desc: !sortOptions.ascending
}]);
options.sortColumn = sortOptions.column;
options.sortAscending = sortOptions.ascending;
table.draw(data, options);
}
table.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
note: recommend using the newer library loader.js (vs. jsapi), according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...

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>

I am wondering if anyone knows how you would go about adding tooltips to multiple lines of data with Google Line Charts using DataTable, addColumn and addRow?
I've seen it done using other methods, but that is quite hard in my project and I feel like dumbass for not figuring this out. Anyways, I've dumbed down my code to present the essentials of my problem.
As you see, the tooltip shows for Line 2, but not for Line 1. My question is this: How do I add a tooltip to Line 1 using this method?
My code:
http://jsfiddle.net/Qquse/550/
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRow([1, 1, 2, "Some fancy tooltip"]);
data.addRow([2, 2, 4, "Some fancy tooltip"]);
data.addRow([3, 3, 6, "Some fancy tooltip"]);
data.addRow([4, 4, 8, "Some fancy tooltip"]);
data.addRow([5, 5, 10, "Some fancy tooltip"]);
var options = {
title: 'Graph'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>

I tried adding both DataColumns first, then the tooltips. Turns out it had to be in this order:
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
instead of
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'tooltip'});
Updated working fiddle: http://jsfiddle.net/Qquse/1207/