Google Charts interpolateNulls not working
Question
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?
1 answers
solution1
2 ACCPTED 2016-08-31 13:22:31
interpolateNulls simply doesn't work on a Material chart
google.charts.Line
(even with google.charts.Line.convertOptions )
need to use Core chart
google.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Google Charts LogScale not working
Google Charts formatting not working
google charts addcolumn not working
Google Charts not working with Wkhtmltopdf
Locale language for google charts not working
Google Charts Legend Position Not Working
Google Charts Embed API is not working
Tooltip customization not working for Google Charts
Google charts tooltips not working on mobile
Change google charts options not working
Related Tags