Json to google charts with variable number of columns and array

Question

Switch my variable chart witch contains this JSON:

[{
    "month": "January",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "February",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "March",
    "values": [35, 3, 8, 18, 0, 0, 0, 0, 0]
}, {
    "month": "April",
    "values": [36, 1, 0, 2, 0, 0, 0, 0, 0]
}, {
    "month": "May",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "June",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "July",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "August",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "September",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "October",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "November",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
    "month": "December",
    "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
}]

The "values" attribute is not static, it depends of the number of technicians who are in my database.

My columns are initialized like this :

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
var techlist = @Html.Raw(Json.Encode(ViewBag.techs));
for(var j=0; j<@ViewBag.nbTechs;j++){
    data.addColumn('number', techlist[j]);
}

So my question is : How can I put the attribute "month" in the Month column and all the values in "values" in the columns I created (in order of "values" and the order of the creation of number column) ?

Thanks in advance for your help !

@WhiteHat first tech in first value in each [values] , second tech is second value of each [values] etc... And the JSON is create to fit exactly with the number of column ! All I need to know is how to put the "month" in first column and first value in first[values] in second column, second value in first[values] in third column,... for each month — MrPixel6
– MrPixel6, Commented Apr 8, 2016 at 11:51

WhiteHat · Accepted Answer · 2016-04-08 12:47:17Z

1

Something like this should work...

google.charts.load('current', {
  callback: drawTable,
  packages: ['table']
});

function drawTable() {
  var jsonData =
  [{
      "month": "January",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "February",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "March",
      "values": [35, 3, 8, 18, 0, 0, 0, 0, 0]
  }, {
      "month": "April",
      "values": [36, 1, 0, 2, 0, 0, 0, 0, 0]
  }, {
      "month": "May",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "June",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "July",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "August",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "September",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "October",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "November",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }, {
      "month": "December",
      "values": [0, 0, 0, 0, 0, 0, 0, 0, 0]
  }];



  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  //var techlist = @Html.Raw(Json.Encode(ViewBag.techs));
  for(var j=0; j<jsonData[0].values.length;j++){
    data.addColumn('number', 'col' + j);
  }

  jsonData.forEach(function(row, index) {
    var currentDate = new Date();
    var rowData = [];
    rowData.push(row.month);
    if (currentDate.getMonth() >= index) {
      rowData = rowData.concat(row.values);
    } else {
      row.values.forEach(function() {
        rowData.push(null);
      });
    }
    data.addRow(rowData);
  });

  var visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, {});
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table"></div>

edited Apr 8, 2016 at 12:47

answered Apr 8, 2016 at 12:07

WhiteHat

61.3k7 gold badges54 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MrPixel6 Over a year ago

Exactly what I wanted ! Thank you very much ! Can I just ask you one more question please ? :) I would like to make null every zero values that are in month after the current month ( so basically if I take for exemple the present time, I would like to make null all values after April). Is this possible ? Thank you for the previous answer any way !

MrPixel6 Over a year ago

Works great ! Thank you really much !

Collectives™ on Stack Overflow

Json to google charts with variable number of columns and array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related