Develop Reference

Google Charts {c:[v: new Date()]} fails on "JSON.parse" in jsapi_compiled_default_module.js

The Google Charts documentation states that new Date() can be used as a value and that you can load data from remote sources.
Documentation:
https://developers.google.com/chart/interactive/docs/reference#format-of-the-constructors-javascript-literal-data-parameter
See the 'cols Property' section: 'datetime' - JavaScript Date object including the time.
Example value: v:new Date(2008, 0, 15, 14, 30, 45)
The example also contains a new Date() value: {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
Using this example from Google I load the data and populate the graph:
https://developers.google.com/chart/interactive/docs/php_example
Using a JSON file without new Date works fine and the Graph gets drawn ok:
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
Using a JSON file WITH new Date returns an error, even when it is not 'JSON data'.
Data Used:
{ cols: [
{id: 'A', label: 'Datum', type: 'datetime'},
{id: 'B', label: 'Watt', type: 'number'}
],
rows: [
{c:[{v: new Date(2021,10,28,19,01,00)},{ v: 2014 }]},{c:[{v: new Date(2021,10,28,19,02,00)},{ v: 1810 }]},{c:[{v: new Date(2021,10,28,19,03,00)},{ v: 1880 }]},{c:[{v: new Date(2021,10,28,19,04,00)},{ v: 1815 }]},{c:[{v: new Date(2021,10,28,19,05,00)},{ v: 1837 }]},{c:[{v: new Date(2021,10,28,19,06,00)},{ v: 1812 }]},{c:[{v: new Date(2021,10,28,19,07,00)},{ v: 1786 }]},{c:[{v: new Date(2021,10,28,19,08,00)},{ v: 1785 }]},{c:[{v: new Date(2021,10,28,19,09,00)},{ v: 1767 }]},{c:[{v: new Date(2021,10,28,19,10,00)},{ v: 1740 }]},{c:[{v: new Date(2021,10,28,19,11,00)},{ v: 1741 }]},{c:[{v: new Date(2021,10,28,19,12,00)},{ v: 1710 }]},{c:[{v: new Date(2021,10,28,19,13,00)},{ v: 1696 }]},{c:[{v: new Date(2021,10,28,19,14,00)},{ v: 1742 }]},{c:[{v: new Date(2021,10,28,19,15,00)},{ v: 1670 }]},{c:[{v: new Date(2021,10,28,19,16,00)},{ v: 1691 }]},{c:[{v: new Date(2021,10,28,19,17,00)},{ v: 1723 }]},{c:[{v: new Date(2021,10,28,19,18,00)},{ v: 1713 }]},{c:[{v: new Date(2021,10,28,19,19,00)},{ v: 1694 }]},{c:[{v: new Date(2021,10,28,19,20,00)},{ v: 1693 }]},{c:[{v: new Date(2021,10,28,19,21,00)},{ v: 1686 }]},{c:[{v: new Date(2021,10,28,19,22,00)},{ v: 1689 }]},{c:[{v: new Date(2021,10,28,19,23,00)},{ v: 1707 }]},{c:[{v: new Date(2021,10,28,19,24,00)},{ v: 1778 }]},{c:[{v: new Date(2021,10,28,19,25,00)},{ v: 1755 }]},{c:[{v: new Date(2021,10,28,19,26,00)},{ v: 1774 }]},{c:[{v: new Date(2021,10,28,19,27,00)},{ v: 1739 }]},{c:[{v: new Date(2021,10,28,19,28,00)},{ v: 1731 }]},{c:[{v: new Date(2021,10,28,19,29,00)},{ v: 1707 }]},{c:[{v: new Date(2021,10,28,19,30,00)},{ v: 1735 }]}
]
}
Error in Chrome & Firefox:
Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 2
at JSON.parse (<anonymous>)
at gvjs_Li (jsapi_compiled_default_module.js:171)
at new gvjs_M (jsapi_compiled_default_module.js:283)
at (index):183
Line 171 in https://www.gstatic.com/charts/51/js/jsapi_compiled_default_module.js uses a "JSON.parse(a)" parse method and this fails because new Date() is not valid json.
The javascript i'm using does not load the data as JSON:
getRAW("youless/?a=h").then(response => {
console.log( response )
var data = new google.visualization.DataTable(response);
chart = new google.visualization.LineChart(document.getElementById('powerChartHour'));
var options = {title: 'W00t'};
chart.draw(data, options);
})
If I load it as JSON I get the same error:
const getJSON = async url => {
const response = await fetch(url, { method: 'GET' });
if(!response.ok)
throw new Error(response.statusText);
const data = response.json();
return data;
}
Conclusion:
The documenation is incorrect or incomplete.
Or I'm doing something wrong (probably).

see --> dates and times using the date string representation
basically, if you're passing JSON to the data table constructor,
for dates, simply pass the date as a string while dropping the new keyword...
{ cols: [
{id: "A", label: "Datum", type: "datetime"},
{id: "B", label: "Watt", type: "number"}
],
rows: [
{c:[{v: "Date(2021,10,28,19,01,00)"},{ v: 2014 }]}
]
}
see following working snippet...
google.charts.load('current', {
packages: ['table']
}).then(function() {
var data = new google.visualization.DataTable({
cols: [{id: "A", label: "Datum", type: "datetime"},
{id: "B", label: "Watt", type: "number"}
],
rows: [
{c: [{v: "Date(2021,10,28,19,01,00)"}, {v: 2014}]}
]
});
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

How to draw google line chart with multiple strings data

I want to display the results of students using a single chart.
There are 4 exam phases in a year and 5 activities in each phase and each activity has grades ranging from A to G.
I'm using google line chart for this purpose.
Code for Generating the graph
[<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Phase');
data.addColumn('string', 'Activity 1');
data.addColumn('string', 'Activity 2');
data.addColumn('string', 'Activity 3');
data.addColumn('string', 'Activity 4');
data.addColumn('string', 'Activity 5');
data.addRows([
['1', 'A','B','C','D','E'],
['2', 'E','D','C','B','A'],
['3', 'A','B','C','D','E'],
['4', 'E','D','C','B','A'],
]);
var options = {
title: 'Student Result',
width: 600,
height: 550,
legend: { position: 'bottom' },
vAxis: { ticks: ['A','B','C','D','E','F','G']}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
Link to the Output of this code
The axis is null. It is not generating the chart as per data.

if you check the data format for a line chart,
only the first column in the data table may be of type 'string',
the rest should be 'number'
in this case, you could convert each grade to a number.
then use object notation to show the grade instead of the number.
using object notation allows you to provide the value (v:) and the formatted value (f:)
{v: 0, f: 'A'}
the formatted value is displayed by default.
next, if you want to customize the vertical axis, by using ticks,
you won't be able to use a material chart --> google.charts.Line
you will need to use a classic chart instead --> google.visualization.LineChart
there are several options that are not supported by material charts, including ticks
see Tracking Issue for Material Chart Feature Parity for more info.
see following working snippet for an example...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var scale = {
'A': 0,
'B': 1,
'C': 2,
'D': 3,
'E': 4,
'F': 5,
'G': 6
};
var grades = [
['1','A','B','C','D','E'],
['2','E','D','C','B','A'],
['3','A','B','C','D','E'],
['4','E','D','C','B','A']
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Phase');
data.addColumn('number', 'Activity 1');
data.addColumn('number', 'Activity 2');
data.addColumn('number', 'Activity 3');
data.addColumn('number', 'Activity 4');
data.addColumn('number', 'Activity 5');
grades.forEach(function (activities) {
var row = [];
activities.forEach(function (grade, indexGrade) {
if (indexGrade === 0) {
row.push(grade);
} else {
row.push({
v: scale[grade],
f: grade
});
}
});
data.addRow(row);
});
var options = {
title: 'Student Result',
width: 600,
height: 550,
legend: {
position: 'bottom'
},
vAxis: {
ticks: [
{v: 0, f: 'A'},
{v: 1, f: 'B'},
{v: 2, f: 'C'},
{v: 3, f: 'D'},
{v: 4, f: 'E'},
{v: 5, f: 'F'},
{v: 6, f: 'G'}
]
}
};
var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>

How to rename y axes in Google Charts API?

I am trying to rename the labels on the axes to levels like low|medium| high instead of percentages in my bar chart. Could anyone suggest me a way of accomplishing it?
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Programming Languages', 'Expertise Level %'],
['Java', 100],
['C', 80],
['Python', 100],
['Web UX', 100],
['Matlab', 70]
]);
var options = {
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));

unfortunately, no option available for Material charts...
many options are not supported, see --> Tracking Issue for Material Chart Feature Parity
however, using a Classic chart, the vAxis.ticks option can be used to customize the axis labels...
use the formatted value of each tick to display --> Low, Medium, High
vAxis: {
ticks: [
{v: 33.33, f: 'Low'},
{v: 66.67, f: 'Medium'},
{v: 100, f: 'High'}
]
}
see following working snippet,
which also uses option --> theme: 'material'
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Programming Languages', 'Expertise Level %'],
['Java', 100],
['C', 80],
['Python', 100],
['Web UX', 100],
['Matlab', 70]
]);
var options = {
theme: 'material',
vAxis: {
ticks: [
{v: 33.33, f: 'Low'},
{v: 66.67, f: 'Medium'},
{v: 100, f: 'High'}
]
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('barchart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart"></div>
note:
Material --> google.charts.Bar
Classic --> google.visualization.ColumnChart

Google Charts Legend Position Not Working

This is driving me nuts. I can't get the legend to move at all. This produces a chart with the legend in it's default location on the right.
I clearly have legend position declared as "bottom" but it's not working. Yet this is exactly what the docs say.
google.charts.load('current',{'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
['Smith', 35, {v: -.1126, f: '-11.26%'} ],
['Chalk', 53, {v: -.0126, f: '-1.26%'} ],
['Hank', 84, {v: -.0252, f: '-2.52%'} ],
['Jordan', 46, {v: .0688, f: '6.88%'} ],
['Bernie', 1, {v: 0, f: '-'} ],
['Ralph', 105, {v: -.0548, f: '-5.48%'} ]
]);
var options = {
series: {
0: {axis: 'Quotes'},
1: {axis: 'Percent'}
},
axes: {
y: {
Quotes: {label: 'Subdmission Count'},
Percent: {label: '% Percent'}
}
},
legend: {
position : 'bottom'
}
};
var table = new google.charts.Bar(document.getElementById('table1'));
table.draw(data, options);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id='table1'></div>
</body>
</html>

legend.position: ['top', 'bottom'] -- are just a couple of the many options that don't work on material charts
see Tracking Issue for Material Chart Feature Parity #2143 for an extensive list
however, these options will work on a core chart...
core --> google.visualization.ColumnChart -- using --> packages: ['corechart']
material --> google.charts.Bar -- using --> packages: ['bar']
there is also an option to get a core chart close to the look & feel of material
theme: 'material'
see following working snippet using core chart instead...
google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
['Smith', 35, {v: -.1126, f: '-11.26%'} ],
['Chalk', 53, {v: -.0126, f: '-1.26%'} ],
['Hank', 84, {v: -.0252, f: '-2.52%'} ],
['Jordan', 46, {v: .0688, f: '6.88%'} ],
['Bernie', 1, {v: 0, f: '-'} ],
['Ralph', 105, {v: -.0548, f: '-5.48%'} ]
]);
var options = {
chartArea: {
height: '56%'
},
series: {
1: {
targetAxisIndex: 1
}
},
hAxis: {
title: 'Name'
},
vAxes: {
0: {
title: 'Submission Count'
},
1: {
title: '% Percent'
}
},
theme: 'material',
legend: {
position : 'bottom'
}
};
var table = new google.visualization.ColumnChart(document.getElementById('table1'));
table.draw(data, options);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id='table1'></div>
</body>
</html>

{position: 'left'} works fine in your example, so the only option left is that 'bottom' this is not supported.
Similar discussion on guthub mentions that it is not supported for another chart type and not planned to be implemented: https://github.com/google/google-visualization-issues/issues/1964

Google bar chart remove bar when 0

I want to be able to remove the spacing that is added when the value is 0 - in the example below there is a max of 4 answers so when the value is 0 removing the spacing will not stretch the graph so much.
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
'packages': ['corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Course');
data.addColumn('number', 'Excellent');
data.addColumn('number', 'Adequate');
data.addColumn('number', 'Limited');
data.addColumn('number', 'None');
data.addColumn('number', 'Very Confident');
data.addColumn('number', 'Fairly Confident');
data.addColumn('number', 'Somewhat Confident');
data.addColumn('number', 'Not at all');
data.addRows([
['Knowledge level', 1, 8, 30, 0, 0, 0, 0, 0],
['Assessment skills', 1, 9, 18, 11, 0, 0, 0, 0],
['Planning skills', 2, 7, 20, 10, 0, 0, 0, 0],
['Confidence', 0, 0, 0, 0, 5, 6, 7, 8]
]);
// Set chart options
var options = {
'title': 'Statewide Count across all courses',
'width': 700,
'height': 900
};
// Instantiate and draw our chart, passing in some options.
var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
//Wait for the chart to finish drawing before calling the getImageURI() method.
/*google.visualization.events.addListener(chart, 'ready', function(){
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
})*/
chart.draw(data, options);
}
Picture here