I cannot create a graph with interpolateNull option. Should be correct but cannot draw the lines between missing points. The data is collected from a php-json. here the Example and the data provided by the json. html-javascript page:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: 'http://192.168.1.50/fetch_data.php?type=line2',
dataType: 'json',
success: function (jsonData) {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable(jsonData);
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.00'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
vAxis: {
format: '#,##0.00'
},
width: 1200,
height: 600,
interpolateNulls: true,
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, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown + ': ' + textStatus);
}
});
}
</script>
</head>
<body>
<br><br>
<div id="chart_div"></div>
</body>
</html>
and php-json data returned from the fetch_data.php page:
{
"cols":[
{
"label":"Date",
"type":"string"
},
{
"label":"hPa",
"type":"number"
},
{
"label":"Dallas",
"type":"number"
}
],
"rows":[
{
"c":[
{
"v":"2016-08-27 12:51:00"
},
{
"v":1020.61
},
{
"v":30
}
]
},
{
"c":[
{
"v":"2016-08-27 12:54:00"
},
{
"v":1020.49
},
{
"v":null
}
]
},
{
"c":[
{
"v":"2016-08-27 12:57:00"
},
{
"v":1020.49
},
{
"v":30.4
}
]
},
{
"c":[
{
"v":"2016-08-27 13:00:00"
},
{
"v":1020.48
},
{
"v":30.7
}
]
},
{
"c":[
{
"v":"2016-08-27 13:03:00"
},
{
"v":1020.43
},
{
"v":30.6
}
]
},
{
"c":[
{
"v":"2016-08-27 13:06:00"
},
{
"v":1020.39
},
{
"v":30.5
}
]
},
{
"c":[
{
"v":"2016-08-27 13:09:00"
},
{
"v":1020.34
},
{
"v":30.9
}
]
},
{
"c":[
{
"v":"2016-08-27 13:12:00"
},
{
"v":1020.33
},
{
"v":30.5
}
]
},
{
"c":[
{
"v":"2016-08-27 13:15:00"
},
{
"v":1020.28
},
{
"v":30.8
}
]
},
{
"c":[
{
"v":"2016-08-27 13:18:00"
},
{
"v":1020.28
},
{
"v":30.8
}
]
},
{
"c":[
{
"v":"2016-08-27 13:21:00"
},
{
"v":1020.28
},
{
"v":31
}
]
},
{
"c":[
{
"v":"2016-08-27 13:24:00"
},
{
"v":1020.23
},
{
"v":null
}
]
},
{
"c":[
{
"v":"2016-08-27 13:27:00"
},
{
"v":1020.24
},
{
"v":30.7
}
]
},
{
"c":[
{
"v":"2016-08-27 13:30:00"
},
{
"v":1020.2
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 13:33:00"
},
{
"v":1020.23
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 13:36:00"
},
{
"v":1020.2
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 13:39:00"
},
{
"v":1020.14
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 13:42:00"
},
{
"v":1020.14
},
{
"v":31.1
}
]
},
{
"c":[
{
"v":"2016-08-27 13:45:00"
},
{
"v":1020.06
},
{
"v":31
}
]
},
{
"c":[
{
"v":"2016-08-27 13:48:00"
},
{
"v":1020.06
},
{
"v":31.1
}
]
},
{
"c":[
{
"v":"2016-08-27 13:51:00"
},
{
"v":1020.03
},
{
"v":31.1
}
]
},
{
"c":[
{
"v":"2016-08-27 13:54:00"
},
{
"v":1019.98
},
{
"v":31.1
}
]
},
{
"c":[
{
"v":"2016-08-27 13:57:00"
},
{
"v":1019.97
},
{
"v":31.1
}
]
},
{
"c":[
{
"v":"2016-08-27 14:00:00"
},
{
"v":1019.9
},
{
"v":31.1
}
]
},
{
"c":[
{
"v":"2016-08-27 14:03:00"
},
{
"v":1019.89
},
{
"v":31.1
}
]
},
{
"c":[
{
"v":"2016-08-27 14:06:00"
},
{
"v":1019.75
},
{
"v":31.2
}
]
},
{
"c":[
{
"v":"2016-08-27 14:09:00"
},
{
"v":1019.8
},
{
"v":31.2
}
]
},
{
"c":[
{
"v":"2016-08-27 14:12:00"
},
{
"v":1019.72
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 14:15:00"
},
{
"v":1019.64
},
{
"v":31.1
}
]
},
{
"c":[
{
"v":"2016-08-27 14:18:00"
},
{
"v":1019.6
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 14:21:00"
},
{
"v":1019.6
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 14:24:00"
},
{
"v":1019.55
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 14:27:00"
},
{
"v":1019.55
},
{
"v":31.4
}
]
},
{
"c":[
{
"v":"2016-08-27 14:30:00"
},
{
"v":1019.49
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 14:33:00"
},
{
"v":1019.46
},
{
"v":31.4
}
]
},
{
"c":[
{
"v":"2016-08-27 14:36:00"
},
{
"v":1019.44
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 14:39:00"
},
{
"v":1019.36
},
{
"v":31.1
}
]
},
{
"c":[
{
"v":"2016-08-27 14:42:00"
},
{
"v":1019.41
},
{
"v":31.1
}
]
},
{
"c":[
{
"v":"2016-08-27 14:45:00"
},
{
"v":1019.33
},
{
"v":null
}
]
},
{
"c":[
{
"v":"2016-08-27 14:48:00"
},
{
"v":1019.35
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 14:51:00"
},
{
"v":1019.34
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 14:54:00"
},
{
"v":1019.29
},
{
"v":31.4
}
]
},
{
"c":[
{
"v":"2016-08-27 14:57:00"
},
{
"v":1019.22
},
{
"v":31.3
}
]
},
{
"c":[
{
"v":"2016-08-27 15:00:00"
},
{
"v":1019.24
},
{
"v":null
}
]
}
]
}
Seems all correct but the data in example on 2016-08-27 12:54:00 leaves me a hole in the graph.
Any suggestion?
While the dynamic and interactive Google Charts are actively maintained, we officially deprecated the static Google Image Charts way back in 2012. This gives us the right to turn it off without notice, which may happen soon.
Yes, it is free. It is written in the official page: Completely free for all uses: commercial, governmental, personal or educational.
Use noData() method to enable "No data" label: chart. noData().
interpolateNulls
simply doesn't work on a Material chartgoogle.charts.Line
(even with google.charts.Line.convertOptions
)
need to use Core chartgoogle.visualization.LineChart
there is an option for theme: 'material'
you can use on Core charts
see following working snippet...
google.charts.load('current', {
callback: function() {
var dataTable = new google.visualization.DataTable({
"cols": [{
"label": "Date",
"type": "string"
}, {
"label": "hPa",
"type": "number"
}, {
"label": "Dallas",
"type": "number"
}],
"rows": [{
"c": [{
"v": "2016-08-27 12:51:00"
}, {
"v": 1020.61
}, {
"v": 30
}]
}, {
"c": [{
"v": "2016-08-27 12:54:00"
}, {
"v": 1020.49
}, {
"v": null
}]
}, {
"c": [{
"v": "2016-08-27 12:57:00"
}, {
"v": 1020.49
}, {
"v": 30.4
}]
}, {
"c": [{
"v": "2016-08-27 13:00:00"
}, {
"v": 1020.48
}, {
"v": 30.7
}]
}, {
"c": [{
"v": "2016-08-27 13:03:00"
}, {
"v": 1020.43
}, {
"v": 30.6
}]
}, {
"c": [{
"v": "2016-08-27 13:06:00"
}, {
"v": 1020.39
}, {
"v": 30.5
}]
}, {
"c": [{
"v": "2016-08-27 13:09:00"
}, {
"v": 1020.34
}, {
"v": 30.9
}]
}, {
"c": [{
"v": "2016-08-27 13:12:00"
}, {
"v": 1020.33
}, {
"v": 30.5
}]
}, {
"c": [{
"v": "2016-08-27 13:15:00"
}, {
"v": 1020.28
}, {
"v": 30.8
}]
}, {
"c": [{
"v": "2016-08-27 13:18:00"
}, {
"v": 1020.28
}, {
"v": 30.8
}]
}, {
"c": [{
"v": "2016-08-27 13:21:00"
}, {
"v": 1020.28
}, {
"v": 31
}]
}, {
"c": [{
"v": "2016-08-27 13:24:00"
}, {
"v": 1020.23
}, {
"v": null
}]
}, {
"c": [{
"v": "2016-08-27 13:27:00"
}, {
"v": 1020.24
}, {
"v": 30.7
}]
}, {
"c": [{
"v": "2016-08-27 13:30:00"
}, {
"v": 1020.2
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 13:33:00"
}, {
"v": 1020.23
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 13:36:00"
}, {
"v": 1020.2
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 13:39:00"
}, {
"v": 1020.14
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 13:42:00"
}, {
"v": 1020.14
}, {
"v": 31.1
}]
}, {
"c": [{
"v": "2016-08-27 13:45:00"
}, {
"v": 1020.06
}, {
"v": 31
}]
}, {
"c": [{
"v": "2016-08-27 13:48:00"
}, {
"v": 1020.06
}, {
"v": 31.1
}]
}, {
"c": [{
"v": "2016-08-27 13:51:00"
}, {
"v": 1020.03
}, {
"v": 31.1
}]
}, {
"c": [{
"v": "2016-08-27 13:54:00"
}, {
"v": 1019.98
}, {
"v": 31.1
}]
}, {
"c": [{
"v": "2016-08-27 13:57:00"
}, {
"v": 1019.97
}, {
"v": 31.1
}]
}, {
"c": [{
"v": "2016-08-27 14:00:00"
}, {
"v": 1019.9
}, {
"v": 31.1
}]
}, {
"c": [{
"v": "2016-08-27 14:03:00"
}, {
"v": 1019.89
}, {
"v": 31.1
}]
}, {
"c": [{
"v": "2016-08-27 14:06:00"
}, {
"v": 1019.75
}, {
"v": 31.2
}]
}, {
"c": [{
"v": "2016-08-27 14:09:00"
}, {
"v": 1019.8
}, {
"v": 31.2
}]
}, {
"c": [{
"v": "2016-08-27 14:12:00"
}, {
"v": 1019.72
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 14:15:00"
}, {
"v": 1019.64
}, {
"v": 31.1
}]
}, {
"c": [{
"v": "2016-08-27 14:18:00"
}, {
"v": 1019.6
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 14:21:00"
}, {
"v": 1019.6
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 14:24:00"
}, {
"v": 1019.55
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 14:27:00"
}, {
"v": 1019.55
}, {
"v": 31.4
}]
}, {
"c": [{
"v": "2016-08-27 14:30:00"
}, {
"v": 1019.49
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 14:33:00"
}, {
"v": 1019.46
}, {
"v": 31.4
}]
}, {
"c": [{
"v": "2016-08-27 14:36:00"
}, {
"v": 1019.44
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 14:39:00"
}, {
"v": 1019.36
}, {
"v": 31.1
}]
}, {
"c": [{
"v": "2016-08-27 14:42:00"
}, {
"v": 1019.41
}, {
"v": 31.1
}]
}, {
"c": [{
"v": "2016-08-27 14:45:00"
}, {
"v": 1019.33
}, {
"v": null
}]
}, {
"c": [{
"v": "2016-08-27 14:48:00"
}, {
"v": 1019.35
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 14:51:00"
}, {
"v": 1019.34
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 14:54:00"
}, {
"v": 1019.29
}, {
"v": 31.4
}]
}, {
"c": [{
"v": "2016-08-27 14:57:00"
}, {
"v": 1019.22
}, {
"v": 31.3
}]
}, {
"c": [{
"v": "2016-08-27 15:00:00"
}, {
"v": 1019.24
}, {
"v": null
}]
}]
});
var formatPattern = '#,##0.0';
var formatNumber = new google.visualization.NumberFormat({
pattern: formatPattern
});
formatNumber.format(dataTable, 1);
formatNumber.format(dataTable, 2);
var options = {
legend: {
position: 'none'
},
interpolateNulls: true,
vAxis: {
format: formatPattern
}
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(dataTable, google.charts.Line.convertOptions(options));
options.theme = 'material';
var chart = new google.visualization.LineChart(document.getElementById('linechart_core'));
chart.draw(dataTable, options);
},
packages: ['corechart', 'line']
});
div {
padding-bottom: 24px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="linechart_core"></div>
<div>Material Chart</div>
<div id="linechart_material"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With