I would like to format the Y Axis of my google Dual Y Axis Line Chart.
Here the code I'm using:
<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', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
(...snip data...)
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Pressure'},
Daylight: {label: 'Temps (Celsius)'}
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
var classicChart = new google.visualization.LineChart(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
drawMaterialChart();
}
</script>
</head>
<body>
<br><br>
<div id="chart_div"></div>
</body>
</html>
I would like that the Y Axis is able to display the data not rounded (now it shows only 1K value and not with decimal) on the Y axis (for bot Y axies) as well on the tooltip message.
The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...
Could someone help me?
Thanks!
Simon
PS: The data is created dynamically from a php script, but thats not important now :)
use NumberFormat to format the data
this will set the format of the tooltip...
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
to format both y-axis', add this to materialOptions...
vAxis: {
format: '#,##0.0'
}
also recommend using google.charts.Line.convertOptions with Material charts
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var formatPattern = '#,##0.0';
var formatNumber = new google.visualization.NumberFormat({pattern: formatPattern});
formatNumber.format(data, 1);
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
y: {
Temps: {
label: 'Pressure'
},
Daylight: {
label: 'Temps (Celsius)'
}
}
},
vAxis: {
format: formatPattern
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I would like to format the Y Axis of my google Dual Y Axis Line Chart.
Here the code I'm using:
<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', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
(...snip data...)
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Pressure'},
Daylight: {label: 'Temps (Celsius)'}
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
var classicChart = new google.visualization.LineChart(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
drawMaterialChart();
}
</script>
</head>
<body>
<br><br>
<div id="chart_div"></div>
</body>
</html>
I would like that the Y Axis is able to display the data not rounded (now it shows only 1K value and not with decimal) on the Y axis (for bot Y axies) as well on the tooltip message.
The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...
Could someone help me?
Thanks!
Simon
PS: The data is created dynamically from a php script, but thats not important now :)
use NumberFormat to format the data
this will set the format of the tooltip...
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
to format both y-axis', add this to materialOptions...
vAxis: {
format: '#,##0.0'
}
also recommend using google.charts.Line.convertOptions with Material charts
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var formatPattern = '#,##0.0';
var formatNumber = new google.visualization.NumberFormat({pattern: formatPattern});
formatNumber.format(data, 1);
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
y: {
Temps: {
label: 'Pressure'
},
Daylight: {
label: 'Temps (Celsius)'
}
}
},
vAxis: {
format: formatPattern
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
How do I filter an array of arrays (myNumbers) against an array (result) to get only the values that appear in result per each array in myNumbers?
Specifically, given:
var result = [02, 03, 04, 06, 07, 11, 12, 13];
var myNumbers = [
[01, 03, 04, 05, 09, 10, 12, 14],
[01, 03, 04, 05, 06, 08, 10, 12],
[01, 02, 04, 05, 06, 08, 10, 12],
[01, 03, 04, 05, 06, 09, 12, 13],
[01, 02, 03, 05, 06, 08, 10, 11]
];
Output should be:
[
[03, 04, 12],
[03, 04, 06, 12],
[02, 04, 06, 12],
[03, 04, 06, 12, 13],
[02, 03, 06, 11],
]
I'm only able to filter one array at a time:
// This only filters it for myNumbers[0]
var confereResult = result.filter(function (number) {
if (myNumbers[0].indexOf(number) == -1)
return number;
console.log(number);
});
How do I go through the whole list instead?
You could map the result of the filtering.
var filter = [02, 03, 04, 06, 07, 11, 12, 13],
array = [[01, 03, 04, 05, 09, 10, 12, 14], [01, 03, 04, 05, 06, 08, 10, 12], [01, 02, 04, 05, 06, 08, 10, 12], [01, 03, 04, 05, 06, 09, 12, 13], [01, 02, 03, 05, 06, 08, 10, 11]],
result = array.map(a => filter.filter(f => a.includes(f)));
console.log(result.map(a => a.join(' ')));
.as-console-wrapper { max-height: 100% !important; top: 0; }
Iterate throught the myNumbers array and apply a filter to each row.
var result = [02, 03, 04, 06, 07, 11, 12, 13];
var myNumbers = [
[01, 03, 04, 05, 09, 10, 12, 14],
[01, 03, 04, 05, 06, 08, 10, 12],
[01, 02, 04, 05, 06, 08, 10, 12],
[01, 03, 04, 05, 06, 09, 12, 13],
[01, 02, 03, 05, 06, 08, 10, 11]
];
myNumbers.forEach((arr, i) => {
myNumbers[i] = arr.filter((val) => {
return result.indexOf(val) != -1;
});
});
console.log(myNumbers);
You can loop on myNumbers and push result into an array, like
var result = [02, 03, 04, 06, 07, 11, 12, 13];
var myNumbers = [
[01, 03, 04, 05, 09, 10, 12, 14],
[01, 03, 04, 05, 06, 08, 10, 12],
[01, 02, 04, 05, 06, 08, 10, 12],
[01, 03, 04, 05, 06, 09, 12, 13],
[01, 02, 03, 05, 06, 08, 10, 11]
];
var confereResult = []
myNumbers.forEach(function (val) {
confereResult.push(result.filter(function (number) {
if (val.indexOf(number) == -1)
return number;
}));
})
console.log(confereResult)
So as seen in the code snippet below, I'm just trying to create a chart/control combination dashboard via Google Charts and I'm having some difficulties with datetime fields, despite following the reference material on that.
My areas of confusion are as follows:
1. Why do the dates shown on the chart appear to be off by one month? I've entered dates for August & September, yet September & October are showing up on the chart.
2. Why does the chart displayed for the ChartRangeFilter appear to jump back to older dates (around the October 2 mark)?
google.charts.load('current', {
packages: ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
[{
"type": "datetime",
"label": "date"
}, {
"type": "number",
"label": "presence"
}],
["Date(2017, 08, 29, 12, 17, 25)", 1],
["Date(2017, 08, 29, 15, 06, 39)", 0],
["Date(2017, 08, 29, 17, 28, 27)", 1],
["Date(2017, 08, 30, 09, 14, 33)", 0],
["Date(2017, 08, 30, 13, 17, 28)", 1],
["Date(2017, 08, 30, 14, 03, 52)", 0],
["Date(2017, 08, 30, 17, 31, 12)", 1],
["Date(2017, 08, 30, 22, 14, 45)", 0],
["Date(2017, 08, 30, 22, 15, 48)", 1],
["Date(2017, 08, 31, 08, 41, 30)", 0],
["Date(2017, 08, 31, 13, 22, 06)", 1],
["Date(2017, 08, 31, 13, 33, 33)", 0],
["Date(2017, 08, 31, 15, 23, 41)", 1],
["Date(2017, 08, 31, 15, 48, 11)", 0],
["Date(2017, 08, 31, 22, 15, 45)", 1],
["Date(2017, 09, 01, 09, 18, 40)", 0],
["Date(2017, 09, 01, 19, 29, 50)", 1],
["Date(2017, 09, 02, 11, 24, 07)", 0],
["Date(2017, 09, 02, 14, 13, 04)", 1],
["Date(2017, 09, 03, 09, 48, 48)", 0],
["Date(2017, 09, 03, 13, 27, 42)", 1],
["Date(2017, 09, 03, 13, 51, 46)", 0],
["Date(2017, 09, 03, 15, 44, 59)", 1],
["Date(2017, 09, 04, 10, 02, 20)", 0]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var chart_options = {
"legend": { "position": "none" },
"vAxis": {
"ticks": [{
"f": "Not Present",
"v": 0
}, {
"f": "Present",
"v": 1
}],
"maxValue": 1,
"minValue": 0
},
"title": "Chart"
};
var chart = new google.visualization.ChartWrapper({
'chartType': 'SteppedAreaChart',
'containerId': 'chart',
'options': chart_options
});
var control_options = {
"filterColumnLabel": "date"
};
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': control_options,
});
dashboard.bind(control, chart);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart" style="width: 100%; height: 100%"></div>
<div id="control" style="width: 100%; height: 100%"></div>
</div>
I want to send null of Timeofday for represent empty value into Google charts but it throw error to me.
Cannot read property 'length' of null
How do I add null value of Timeofday type? This is my code.
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('timeofday', 'A');
data.addColumn('timeofday', 'B');
data.addRows([
[new Date(2016, 06, 1), [02, 51, 56], [02, 51, 56]],
[new Date(2016, 06, 2), [02, 51, 56], [02, 51, 56]],
[new Date(2016, 06, 3), null, [02, 51, 56]],
[new Date(2016, 06, 4), [02, 51, 56], [02, 51, 56]],
]);
var options = {
chart: {
title: 'Test',
subtitle: 'test'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
I expect my chart to be this, But in Timeofday type.
using a Core Chart vs. a Material Chart works...
you can use the following option to get the look and feel close to a Material Chart
theme: 'material'
see following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('timeofday', 'A');
data.addColumn('timeofday', 'B');
data.addRows([
[new Date(2016, 06, 1), [02, 51, 56], [02, 52, 56]],
[new Date(2016, 06, 2), [02, 51, 56], [02, 52, 56]],
[new Date(2016, 06, 3), null, [02, 52, 56]],
[new Date(2016, 06, 4), [02, 51, 56], [02, 52, 56]],
[new Date(2016, 06, 5), [02, 51, 56], [02, 52, 56]],
]);
var options = {
chart: {
title: 'Test',
subtitle: 'test'
},
theme: 'material',
width: 900,
height: 500
};
var chartCore = new google.visualization.LineChart(document.getElementById('linechart_core'));
chartCore.draw(data, options);
var chartMatl = new google.charts.Line(document.getElementById('linechart_material'));
chartMatl.draw(data, google.charts.Line.convertOptions(options));
},
packages: ['corechart', 'line']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linechart_core"></div>
<div id="linechart_material"></div>
I am trying to load three different google charts on page, one gauge, one line and one bar chart. But something fails when i try to implement the third chart. Sometimes the gauge chart and the line chart loads but not the bar chart, other times only the gauge and the bar chart loads. I cant get all three to load at the same time. Can i please get some help?
Here is my code:
<html>
<head>
<title>Usage statistic</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart", "gauge", "line", "bar"],
'language': 'no'
});
google.setOnLoadCallback(init);
function init() {
drawLine();
drawBar();
drawGauge();
}
function drawGauge() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Month', 73.6],
['Today', 62.7],
['Week', 73.6],
]);
var options = {
width: 800,
height: 240,
greenFrom: 40,
greenTo: 100,
redFrom: 0,
redTo: 20,
yellowFrom: 20,
yellowTo: 40,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
chart.draw(data, options);
}
function drawLine() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Logins');
data.addRows([
[new Date(2015, 10, 16), 1971],
[new Date(2015, 10, 17), 1973],
[new Date(2015, 10, 18), 1964],
[new Date(2015, 10, 19), 1981],
[new Date(2015, 10, 20), 1919],
[new Date(2015, 10, 21), 1185],
[new Date(2015, 10, 22), 1104],
[new Date(2015, 10, 23), 2009],
[new Date(2015, 10, 24), 1955],
[new Date(2015, 10, 25), 1933],
[new Date(2015, 10, 26), 1923],
[new Date(2015, 10, 27), 1854],
[new Date(2015, 10, 28), 1159],
[new Date(2015, 10, 29), 1107],
[new Date(2015, 10, 30), 2006],
[new Date(2015, 11, 01), 1998],
[new Date(2015, 11, 02), 1951],
[new Date(2015, 11, 03), 1921],
[new Date(2015, 11, 04), 1870],
[new Date(2015, 11, 05), 1174],
[new Date(2015, 11, 06), 1128],
[new Date(2015, 11, 07), 2030],
[new Date(2015, 11, 08), 1912],
[new Date(2015, 11, 09), 1956],
[new Date(2015, 11, 10), 1942],
[new Date(2015, 11, 11), 1895],
[new Date(2015, 11, 12), 1168],
[new Date(2015, 11, 13), 1148],
[new Date(2015, 11, 14), 2004],
[new Date(2015, 11, 15), 1954],
]);
var options = {
title: 'Logins',
width: 800,
height: 400,
hAxis: {
format: 'MMM d, y',
gridlines: {
count: 15
}
},
vAxis: {
gridlines: {
color: 'none'
},
minValue: 0
}
};
var chart = new google.charts.Line(document.getElementById('line_div'));
chart.draw(data, options);
}
function drawBar() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
[
[8, 30, 45], 5
],
[
[9, 0, 0], 10
],
[
[10, 0, 0, 0], 12
],
[
[10, 45, 0, 0], 13
],
[
[11, 0, 0, 0], 15
],
[
[12, 15, 45, 0], 20
],
[
[13, 0, 0, 0], 22
],
[
[14, 30, 0, 0], 25
],
[
[15, 12, 0, 0], 30
],
[
[16, 45, 0], 32
],
[
[16, 59, 0], 42
]
]);
var options = google.charts.Bar.convertOptions({
title: 'Total Emails Received Throughout the Day',
width: 800,
height: 400
});
var chart = new google.charts.Bar(document.getElementById('bar_div'));
chart.draw(data, options);
}
</script>
<style>
.menu {
border-radius: 5px;
border: 1px solid black;
float: left;
padding: 0px 6px;
margin-right: 6px;
color: #686868;
}
.menu a {
text-decoration: none;
color: #686868;
}
.active a {
color: black !important;
}
</style>
</head>
<body style="background-color: #F0F0F0; margin: 20px;">
<div>
<h2>Logins in percentages</h2>
</div>
<div id="gauge_div"></div>
<div>
<h2>Logins last 30 days</h2>
</div>
<div id="line_div"></div>
<div>
<h2>Emails Received</h2>
</div>
<div id="bar_div"></div>
</body>
</html>
I can't really answer why, but if you look at the documentation for loading libraries link, you see that they have updated how it's done. And it's quite differente from before.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart", "gauge", "line", "bar"],
'language': 'no'
});
google.setOnLoadCallback(init);
would have to be changed to
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages: ["corechart", "gauge", "line", "bar"]});
google.charts.setOnLoadCallback(init);
....
</script>
It looks like everything is still working in my applications, with the old loading style, but trying your scenario didn't work at all with the old style. Changeing it to the new one works.
Jsfiddle
EDIT:
If anyone is interested I found out why my things are working. I'm working exclusively with Wrappers, and apparantly you should use google.load (the old way) and not the new google.charts.load.
Source