CODEWITHSUNDEEP
javascriptobjectchartsgoogle-visualization
aborted
aborted

Reputation: 4541

Preparing dynamic data for displaying via Google Chart API

I have an amount of data coming as a JSON string via an API that look like this:

someData1: {0: {_id: {date: "2015-11-11"}, count: 1}, length: 1}
    0: {_id: {date: "2015-11-11"}, count: 1}
        _id: {date: "2015-11-11"}
        date: "2015-11-11"
        count: 1
    length: 1
someData2: {0: {_id: {date: "2015-11-12"}, count: 5}, 1: {_id: {date: "2015-11-11"}, count: 3}, length: 2}
    0: {_id: {date: "2015-11-12"}, count: 5}
        _id: {date: "2015-11-12"}
        count: 5
    1: {_id: {date: "2015-11-11"}, count: 3}
        _id: {date: "2015-11-11"}
        date: "2015-11-11"
        count: 3
    length: 2
someDataN: ...

However, I need this data to be displayed in a Google Chart (Area chart exactly).

From what I have understood, in a Google chart, the first column can be a date/string and the rest have to be numbers, so I am having trouble formatting the data in such a way to make it useable for Google charts.

So in my case someData1 and someData2 have to be columns, basically after the first date column.

So columns would be: [date, someData1, someData2]

  1. obviously the first column takes a date. How do I use the dates in my provided object in this case?
  2. How do I create rows in their own column using the data above as an example?

It's easy to set the columns in this case, but setting the rows is what has confused me. How do I make sure the count of someData1 will be under the someData1 column and so on?

How can I restructure this object to make it suit my needs?

Thank you.

Upvotes: 0

Views: 1092

Answers (1)

jrkt
jrkt

Reputation: 2715

I wrote a javascript function to do this exact thing:

var GenerateChart = function(element, columns, data, title, type) {
var dataArr = [];

for (var i = 0; i < data.length; i++) {
  var cell = [];
  for (var n = 0; n < data[i].length; n++) {
    if (n === 0) {
      cell.push(data[i][n]);
    } else {
      cell.push(parseInt(data[i][n], 10));
    }

  }
  dataArr.push(cell);
}
var data = new google.visualization.DataTable();

for (var i = 0; i < columns.length; i++) {
  if (i === 0) {
    data.addColumn('string', columns[i].label);
  } else {
    data.addColumn('number', columns[i].label);
  }
}
data.addRows(dataArr);

var options;
var chart;
switch (type) {
  case 'line':
    options = {
      title: title,
      curveType: 'function',
      legend: {
        position: 'bottom'
      }
    }
    chart = new google.visualization.LineChart(element);
    break;
  case 'bar':
    options = {
      title: title,
      trendlines: {
        0: {}
      },
      legend: {
        position: 'bottom'
      },
    }
    chart = new google.visualization.ColumnChart(element);
    break;
  case 'pie':
    options = {
      title: title
    }
    chart = new google.visualization.PieChart(element);
    break;
  case 'bubble':
    var hAxis;
    var vAxis;
    for (var i = 0; i < 3; i++) {
      if (i === 1) {
        hAxis = columns[i].label;
      } else if (i === 2) {
        vAxis = columns[i].label;
      }
    }
    options = {
      title: title,
      hAxis: hAxis,
      vAxis: vAxis,
      buble: {
        textStyle: {
          fontSize: 11
        }
      }
    }
    chart = new google.visualization.BubbleChart(element);
    break;
  }
chart.draw(data, options);
  }

You would just need to add an 'area' case to the switch statement. But, most of their graphs are treated with very similar json structures. You would call that function above like this:

var element = document.getElementById('graph');
var columns = result[key].columns;
var data = result[key].data;
GenerateChart(element, columns, data, "Graph Title", "area");

And the 'result' variable above would be your json object. I will put an example of a json object I would use for the function above shortly. Example of a bar chart:

{
    "title":"Feeds Today",
    "type":"bar",
    "columns":[
            {"label":"Feed Type"},
            {"label":"Successes"},
            {"label":"Fails"}],
    "data":[
         ["ListHub","507",2],
         ["Reliance","270",0],
         ["Realogy","88",0],
         ["DDF","36",0],
         ["RETS","231",7],
         ["IDX","23",0],
         ["XML","26",3]]
}

Upvotes: 1

Related Questions