Simon Simon - 3 months ago 41
JSON Question

Google Charts interpolateNulls not working

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?

Answer

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>

Comments