Convert JSON data into a Google chart with a dynamic number of columns and arrays

Modify my variable chart which currently holds 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 in the "values" attribute are dynamic and depend on the number of technicians in my database.

I have initialized my columns 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, I am wondering: How can I assign the "month" attribute to the Month column and distribute all the values in "values" across the columns I created (in the same order as they appear in "values" and matching the order of creation of number columns)?

Thank you for your assistance!

Answer №1

Below is an example of how this could be implemented...

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error message "element.getAttribute is not defined" is common when using the Perfect

I'm facing an issue while trying to implement the perfect-scrollbar plugin on my AngularJS website. The error I encounter is as follows: TypeError: element.getAttribute is not a function at getId (http://localhost/Myproject/js/lib/perfect-scrollb ...

Encountered a type mismatch in Flutter where an 'int' was expected but a 'String' was provided instead

Recently, I've been diving into creating a quotes app that utilizes a rest API to fetch data and display random quotes at the center of the screen with just a tap. However, I seem to be encountering some hurdles in getting everything to function as in ...

Creating a Timeless Banner with the Magic of `background:url()`

I have a banner placed within a div tag that displays my banner image. I am trying to create a fading effect when transitioning to the next image, but I am struggling to achieve this. I attempted to use jQuery fadeIn(), however, it did not work as expected ...

Angular app encounters issue with Firebase definition post Firebase migration

Hey there, I'm currently facing an issue while trying to fetch data from my Firebase database using Angular. The error message 'firebase is not defined' keeps appearing. var config = { databaseURL: 'https://console.firebase.google. ...

Design an interactive quarter-circle using CSS styling

My goal is to create this element using CSS, however, the content inside needs to be dynamic. I initially attempted to use border-radius, but realized it is unable to achieve the desired outcome. If anyone has a solution or can offer assistance, I would g ...

Connect guarantees while generating template

Fetching data through a function. Establishing a connection and retrieving necessary information. Some code has been omitted for brevity. function executeSQL(sql, bindParams , options) { return new Promise(function(resolve, reject) { ... resolv ...

Create eye-catching banners, images, iframes, and more!

I am the owner of a PHP MySQL website and I'm looking to offer users banners and images that they can display on their own websites or forums. Similar to Facebook's feature, I want to allow users to use dynamic banners with links. This means the ...

My preference is for the most straightforward ajax form application available

I'm looking to create an ajax application that can handle a basic form with just text input and a submit button. I don't need any validation included, just a simple PHP script to process the form data. I'm reaching out for help because I hav ...

Ways to retrieve numerous data points from an array of dictionaries?

Just starting out with Python and in need of some guidance. I have a list of dictionaries sourced from a json file: x = [{'competition_id': 16, 'season_id': 4, 'country_name': 'Europe', 'competition_name': ...

Node.js - What could be causing my HTTP GET Request to return a 404 error even though the data exists at the specified URL?

As a newcomer to Node, I often struggle with HTTP requests. Despite researching similar issues, I have yet to find a solution that addresses my specific problem. In my current project, I am tasked with fetching JSON files from an API and parsing them into ...

Conceal form after submission - Django 1.6

I'm currently working on a Django 1.6 project where I have this form: <form action="/proyecto/" method="POST" id="myform"> {% csrf_token %} <table> <span class="Separador_Modulo">& ...

Attempting to unveil concealed download URLs

Trying to extract download links from a website, but the format is as follows: <form action="" method="post" name="addondownload" id="addondownload" > <input type="hidden" name="addonid" id="addonid" value="2109" /> <input class="re ...

Talend - Constructing URIs using values retrieved from a list

Struggling to feed a MongoDB collection with values from JSON-providing web services, particularly due to interdependency between URIs. For example, the URI returns a JSON collection structured like this: { "COD_AGENCIA", "521800300", "NAME", "PORANGATU" ...

Is it possible in Java to convert a JSONObject to a JSONStringer and vice versa?

I'm feeling a bit puzzled about how to navigate through the apparent limitations of the JSONStringer class. I am aware that JSONStringer is designed to link together JSON rather than create it as a whole, but when a function only returns a JSONStringe ...

Is it possible to execute Ajax insertions in the right sequence without relying on async:false?

My ASP.Net MVC page contains an AJAX form that allows users to submit data manually or copy large amounts of data for submission at once using JavaScript. @using (Ajax.BeginForm("action", "controller", new AjaxOptions { HttpMethod = "POST", ...

Combine the elements within the HEAD tag into a group

I am currently developing a dynamic page system using AJAX. Whenever a link is clicked, an AJAX call is made to retrieve data from the requested page. However, I have encountered an issue where certain data in the page file needs to be placed within the h ...

Trouble encountered while attempting to parse JSON with GSON library

Currently, I am in the process of parsing a local JSON file using the GSON Library. Below is the structure of my JSON: { "employees":[ { "id":100, "name":"Ranjith" }, { "id":101, "name":"Satheesh" }] } My task is to showcase this da ...

Scrolling to specific ID scrolls only in a downward direction

I have been using fullpage.js for my website and I am facing an issue. When I create a link and connect it to an id, everything works perfectly. However, I am unable to scroll back up once I have scrolled down. Here is the HTML code: <a href="#section ...

The AJAX call in PHP is echoing JavaScript code that seems to be malfunctioning

Currently working on an AJAX page using php, where I plan to output a section of JS code upon completion. Despite having the JS code within the HTML page, it is not functioning properly. Any suggestions on how to get it to work? ...

Prevent the Swiper slider from autoplaying while a video is being played, and automatically move to the next slide once the video is paused or

<div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <video-js id="6304418462001" class="overlayVideo" data-account= ...