CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
awenborn
awenborn

Reputation: 417

Duplicated Series of Data in Google Area Chart

I'm trying to plot a Chart using Google's Visualization API using some data returned from a database by a PHP script. My data is a JSON object in the format:

jsonObject = {
  "routes":[{
    "name":"Route 0",
    "chart":{
      "x":[ /* array of x values */ ],
      "y":[ /* array of y values */ ]
    }
  },{
    "name":"Route 1",
    "chart":{
      "x":[ /* array of x values */ ],
      "y":[ /* array of y values */ ]
    }
  }]};

I'm trying to plot a chart of each member of jsonObject.routes individually using the following code:

function drawChart() {
  var baseChart = jsonObject.routes[1].chart;  //  Want to manipulate this value to plot different sets of data
  var chartData = [];

  for (var g = 0; g < baseChart.x.length; g++) {
    var dataPoint = {
      c: [
        { v: baseChart.x[g] },
        { v: baseChart.y[g] },
      ]
    };
    chartData.push(dataPoint);
  }

  var dataJson = {
    cols: [
      { role: "domain", type: "number", label: "Distance" },
      { role: "data", type: "number", label: "Main Route" },
    ],
    rows: chartData
  };

  var dataTable = new google.visualization.DataTable(dataJson);
    var chart = new google.visualization.AreaChart(document.getElementById('chart'));

  var options = {};

  chart.draw(dataTable, options);
}

However, whenever I try to access the latter objects of the jsonObject.route array, it seems to be pulling data for every object in the jsonObject.route array prior to it as well.

I've included a link to a Fiddle with a sample dataset at the bottom; the chart is fine when only plotting jsonObject.routes[0], but when trying to plot jsonObject.routes[1] it will plot the data from jsonObject.routes[0] too.

I suspect this is more of an issue with my Javascript code rather than with the Google Visualization API, but I've been pulling my hair out with it and can figure out why it's pulling data from all the elements in that array. Many thanks for any help!

Link to Fiddle

Upvotes: 1

Views: 51

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

not sure i completely follow the question...

looking at the fiddle, the one chart seems to draw fine,

just need to sort the data to fix funny looking area 

dataTable.sort([{column: 0}]);

see following snippet in order to draw separate charts for each --> jsonObject.routes 

google.charts.load('current', {
  callback: function () {
    jsonObject.routes.forEach(function (route) {
      var chartData = [];

      route.chart.dist.forEach(function (x, index) {
        chartData.push({
          c: [
            {v: x},
            {v: route.chart.ele[index]}
          ]
        });
      });

      var dataJson = {
        cols: [
          { role: "domain", type: "number", label: "Distance" },
          { role: "data", type: "number", label: "Main Route" },
        ],
        rows: chartData
      };

      var dataTable = new google.visualization.DataTable(dataJson);
      dataTable.sort([{column: 0}]);
      var options = {};
      var container = document.getElementById('chart_div').appendChild(document.createElement('div'));
      var chart = new google.visualization.AreaChart(container);
      chart.draw(dataTable, options);
    });
  },
  packages:['corechart']
});

note: definition of jsonObject is excluded above

AND

when building a working fiddle, i noticed that since jsonObject is so large,
once you leave the page and comeback,
the fiddle breaks it up into chunks, which then breaks the code
and only one chart is drawn

here is a working fiddle with far less data

Upvotes: 1

Related Questions