Using Javascript, Google Charts is able to interpret JSON data

Question

Using Javascript, Google Charts is able to interpret JSON data

I am currently working on integrating Google Charts and populating it with data from an external JSON file that I have generated using PHP's json_encode() function.

After some effort, I managed to get Google Charts to display data successfully, but for now, I have hardcoded random values for demonstration purposes:

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Time', 'Temperature', 'Humidty'],
      ['2018-03-09 13:28:49',  1000,      400],
      ['2018-03-09 13:28:59',  1170,      460],
      ['2018-03-09 14:28:49',  660,       1120],
      ['2018-03-09 17:28:49',  1030,      540],
      ['2018-03-09 13:28:49',  1030,      540]
    ]);

My ultimate goal is to replace this static data with entries from my JSON file structured like this:

[{"id":"1","temp":"24.40","hum":"28.30","insert_date":"2018-03-09 13:28:49"},{"id":"2","temp":"24.50","hum":"28.60","insert_date":"2018-03-09 13:29:59"}]

The specific fields I want to extract are temperature, humidity, and insertion date. The challenge lies in parsing this data effectively.

I've been grappling with this issue for quite some time without success. Any guidance or suggestions would be greatly appreciated.

Thank you

javascript json charts google-visualization

Answer 1

Answer №1

Suggest utilizing ajax to fetch data from php

In order to generate a google data table directly from json,
the json needs to be in a specific format, refer to...
Format of the Constructor's JavaScript Literal data Parameter

google.visualization.arrayToDataTable

won't function with the json example provided by you
however, you can manually parse the json, row by row...

$.each(jsonData, function (index, row) {
  data.addRow([
    new Date(row.insert_date),
    parseFloat(row.temp),
    parseFloat(row.hum)
  ]);
});

Recommend using the setup below...

google.charts.load will wait for the page to load,
no requirement for --> $(document).ready -- or similar function

once google loads, create the chart and data table,
these only need to be created once

then use ajax to get the data, and draw the chart

if you wish to continuously add more data to the same chart,
wait for the chart's 'ready' event, then obtain more data

view the working snippet below,
for illustration purposes, the sample data you provided is used in the ajax fail callback,
which can be removed...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // create chart
  var container = $('#chart_div').get(0);
  var chart = new google.visualization.LineChart(container);
  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 60,
      left: 60,
      right: 60,
      bottom: 60
    },
    hAxis: {
      format: 'M/d HH:mm:ss',
      title: 'Time'
    },
    height: '100%',
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  // create data table
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'x');
  data.addColumn('number', 'Temperature');
  data.addColumn('number', 'Humidity');

  // after the chart draws, wait 60 seconds, get more data
  google.visualization.events.addListener(chart, 'ready', function () {
    window.setTimeout(getData, 60000);
  });

  getData();
  function getData() {
    $.ajax({
      url: 'data.php',
      dataType: 'json'
    }).done(function (jsonData) {
      loadData(jsonData);
    }).fail(function (jqXHR, textStatus, errorThrown) {
      var jsonData = [{"id":"1","temp":"24.40","hum":"28.30","insert_date":"2018-03-09 13:28:49"},{"id":"2","temp":"24.50","hum":"28.60","insert_date":"2018-03-09 13:29:59"},{"id":"2","temp":"24.50","hum":"28.60","insert_date":"2018-03-09 13:31:10"}];
      loadData(jsonData);
    });
  }

  function loadData(jsonData) {
    // load json data
    $.each(jsonData, function (index, row) {
      data.addRow([
        new Date(row.insert_date),
        parseFloat(row.temp),
        parseFloat(row.hum)
      ]);
    });
    drawChart();
  }

  $(window).resize(drawChart);
  function drawChart() {
    // draw chart
    chart.draw(data, options);
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>

Answer 2

Suggest utilizing ajax to fetch data from php

In order to generate a google data table directly from json,
the json needs to be in a specific format, refer to...
Format of the Constructor's JavaScript Literal data Parameter

google.visualization.arrayToDataTable

won't function with the json example provided by you
however, you can manually parse the json, row by row...

$.each(jsonData, function (index, row) {
  data.addRow([
    new Date(row.insert_date),
    parseFloat(row.temp),
    parseFloat(row.hum)
  ]);
});

Recommend using the setup below...

google.charts.load will wait for the page to load,
no requirement for --> $(document).ready -- or similar function

once google loads, create the chart and data table,
these only need to be created once

then use ajax to get the data, and draw the chart

if you wish to continuously add more data to the same chart,
wait for the chart's 'ready' event, then obtain more data

view the working snippet below,
for illustration purposes, the sample data you provided is used in the ajax fail callback,
which can be removed...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // create chart
  var container = $('#chart_div').get(0);
  var chart = new google.visualization.LineChart(container);
  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 60,
      left: 60,
      right: 60,
      bottom: 60
    },
    hAxis: {
      format: 'M/d HH:mm:ss',
      title: 'Time'
    },
    height: '100%',
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  // create data table
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'x');
  data.addColumn('number', 'Temperature');
  data.addColumn('number', 'Humidity');

  // after the chart draws, wait 60 seconds, get more data
  google.visualization.events.addListener(chart, 'ready', function () {
    window.setTimeout(getData, 60000);
  });

  getData();
  function getData() {
    $.ajax({
      url: 'data.php',
      dataType: 'json'
    }).done(function (jsonData) {
      loadData(jsonData);
    }).fail(function (jqXHR, textStatus, errorThrown) {
      var jsonData = [{"id":"1","temp":"24.40","hum":"28.30","insert_date":"2018-03-09 13:28:49"},{"id":"2","temp":"24.50","hum":"28.60","insert_date":"2018-03-09 13:29:59"},{"id":"2","temp":"24.50","hum":"28.60","insert_date":"2018-03-09 13:31:10"}];
      loadData(jsonData);
    });
  }

  function loadData(jsonData) {
    // load json data
    $.each(jsonData, function (index, row) {
      data.addRow([
        new Date(row.insert_date),
        parseFloat(row.temp),
        parseFloat(row.hum)
      ]);
    });
    drawChart();
  }

  $(window).resize(drawChart);
  function drawChart() {
    // draw chart
    chart.draw(data, options);
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>

Answer 3

Answer №2

To display a chart on your webpage, you can initialize the data as a JavaScript variable at the bottom of your page and then use it in the chart function. However, make sure that drawChart() or the file containing this function is included after the variable declaration. Here is an example:

<script>
var php_data = "<?=$json_data?>";
function drawChart() {
    var data = google.visualization.arrayToDataTable(php_data);
</script>

Another approach is to pass the data to the drawChart function as a parameter like this:

<script>
var php_data = "<?=$json_data?>";
function drawChart(php_data) {
    var data = google.visualization.arrayToDataTable(php_data);
</script>

Answer 4

To display a chart on your webpage, you can initialize the data as a JavaScript variable at the bottom of your page and then use it in the chart function. However, make sure that drawChart() or the file containing this function is included after the variable declaration. Here is an example:

<script>
var php_data = "<?=$json_data?>";
function drawChart() {
    var data = google.visualization.arrayToDataTable(php_data);
</script>

Another approach is to pass the data to the drawChart function as a parameter like this:

<script>
var php_data = "<?=$json_data?>";
function drawChart(php_data) {
    var data = google.visualization.arrayToDataTable(php_data);
</script>

Answer 5

Answer №3

I have already created my JSON file, so I read from AJAX in this manner:

function setSensor(sensor)
{
    $.ajax({
        url:"QueryPHPFile.php",
        method:'POST',
        data: {varData: data},
        beforeSend: function(){}
    }).done(function(res){
        res = JSON.parse(res);
        google.charts.load('current', {packages: ['corechart', 'line']});
        google.charts.setOnLoadCallback(function() {displayGraphs(res); });  

    }).fail(function(){
    }).always(function(){});
}

Next, I have a function called displayGraphs where the variable "res" represents my JSON data:

function displayGraphs(res)
    {
        var data = null;
        data = new google.visualization.DataTable();
        data.addColumn('date', 'hAxis');
        data.addColumn('number', 'vAxis');
        var total = [];
        var ValueFloat;
        for (var i = res.length - 1; i >= 0; i--) {
            ValueFloat = parseFloat(res[i] ['NameLabelInYourJsonFile']); 
            var date2= res[i]['Fecha'];
            var esplit = date2.split("-",3); 
            total.push([ new Date (esplit[0] , esplit[1] -1, esplit[2]),ValueFloat]); 
        }

        data.addRows(total);

        var options = {
            hAxis: {
                title: 'hAxis Name',
                format: 'd MMM' 
                },
            vAxis: {
                title: 'vAxis Name'
                },
                backgroundColor: '#ffffff', 
                width: 700,
                lineWidth: 1, 
                height: 400,
                title: 'Graph Title',

            };
        var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
        chart.draw(data, options);
        }

Using `res.length`, we can determine how many records are in the JSON file. When dealing with dates, make sure to insert newData as needed based on the documentation provided. Hope this explanation helps you!

Answer 6

I have already created my JSON file, so I read from AJAX in this manner:

function setSensor(sensor)
{
    $.ajax({
        url:"QueryPHPFile.php",
        method:'POST',
        data: {varData: data},
        beforeSend: function(){}
    }).done(function(res){
        res = JSON.parse(res);
        google.charts.load('current', {packages: ['corechart', 'line']});
        google.charts.setOnLoadCallback(function() {displayGraphs(res); });  

    }).fail(function(){
    }).always(function(){});
}

Next, I have a function called displayGraphs where the variable "res" represents my JSON data:

function displayGraphs(res)
    {
        var data = null;
        data = new google.visualization.DataTable();
        data.addColumn('date', 'hAxis');
        data.addColumn('number', 'vAxis');
        var total = [];
        var ValueFloat;
        for (var i = res.length - 1; i >= 0; i--) {
            ValueFloat = parseFloat(res[i] ['NameLabelInYourJsonFile']); 
            var date2= res[i]['Fecha'];
            var esplit = date2.split("-",3); 
            total.push([ new Date (esplit[0] , esplit[1] -1, esplit[2]),ValueFloat]); 
        }

        data.addRows(total);

        var options = {
            hAxis: {
                title: 'hAxis Name',
                format: 'd MMM' 
                },
            vAxis: {
                title: 'vAxis Name'
                },
                backgroundColor: '#ffffff', 
                width: 700,
                lineWidth: 1, 
                height: 400,
                title: 'Graph Title',

            };
        var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
        chart.draw(data, options);
        }

Using `res.length`, we can determine how many records are in the JSON file. When dealing with dates, make sure to insert newData as needed based on the documentation provided. Hope this explanation helps you!

Using Javascript, Google Charts is able to interpret JSON data

Answer №1

Answer №2

Answer №3

Similar questions

Appending a new element to a JSON object using JavaScript

The development of the React app will pause momentarily upon encountering a single low-severity vulnerability. To address this, you can either run `npm audit fix` to resolve it, or use `npm audit` to gain

javascript / php - modify input fields according to selection change

What is the best way to extract information from a JSON array using Gson?

Troubleshooting issue with decoding encoded JSON in PHP

Could it be possible that my consecutive POST and GET axios requests are gradually slowing down?

Is there a new update to Google Maps API?

Find two separate solutions to the promise

Display an image using a modal window and Ajax XMLHttpRequest

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

Disabling Firebase error logging for unsuccessful signInWithEmailAndPassword attempts

Guide on efficiently inserting values into an array of objects

What steps can be taken to ensure that all object properties become reactive?

What is the method for sending an AJAX request with a dynamically looping ID number parameter in the URL

Combining Two DIVS Side by Side

Error in Heroku deployment - Express and React app displaying a white screen

Why is it that TypeScript does not issue any complaints concerning specific variables which are undefined?

The File plugin in Ionic 3 is encountering difficulties in writing files on the device

Using AJAX, retrieve the attribute of a button and assign it to a node

Check if the string contains any numerical characters