Adjust the month to be plotted on the X-axis of the ColumnChart using the specified

Question

Adjust the month to be plotted on the X-axis of the ColumnChart using the specified

My ORIGINAL POST:

I've put together a fiddle to showcase how my data is sourced from JSON and displayed in a ColumnChart.

This is an example of how my JSON data is structured:

[{"lPlusScoreID":1,"jan":60.03,"feb":43.57,"mar":48.55},
 {"lPlusScoreID":2, "jan":89.42,"feb":85.71,"mar":90.46},
 {"lPlusScoreID":3,"jan":86.22,"feb":90.61,"mar":89.53}]

The resulting column chart looks like this: Link to Chart Image

My objective is to have months along the x-axis and products as columns/bars.

How can I achieve this? I'd prefer using a Google Visualization chart, method, or configuration option. If data transformation through coding is necessary, I'm open to it, but I'm new to development.

Thank you for any assistance!

Here's my EDITED POST:

I've managed to implement the code below.

Created dataArray_input with predefined months and then populated it with data from the original JSON.

Utilized the transposeArray() function to transpose dataArray_input into dataArray_trans.

function transposeArray(a) {
return Object.keys(a[0]).map(function (c) {
    return a.map(function (r) {
        return r[c];
    });
});  }

Appended dataArray_trans to the final dataArray_output using the appendArray() function, which is then used by the Google API.
```
function appendArray(a, b) {
for (var i = 0; i < a.length; i++) {
    b.push(a[i]);
}    }
```

Below is the final code snippet.

I'd appreciate feedback to ensure I'm progressing in the right direction. I'm new to this field.

Special thanks to @WhiteHat for the prompt and effective solution.

Code snippet:

javascript json google-visualization

Answer 1

Answer №1

when utilizing google charts, the key lies in how the data is provided to generate the chart

there exist various methods for manipulating data such as group() and join()
but there aren't specific methods for pivoting from columns to rows, for example...

for the specific chart that is needed, the data must be formatted as shown below...

['month', 'Product1', 'Product2']
['jan', 60.03, 89.42]
['feb', 43.57, 85.71]

refer to the live snippet below for a working example...

the data table is initialized with a single column for the month
additional columns are appended for each "lPlusScoreID"

the getFilteredRows data table method is utilized to check if the month has already been included as a row
if it has, the row is updated; otherwise, a new row is added

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var jsonData = [
    {"lPlusScoreID":1, "jan":60.03, "feb":43.57, "mar":48.55},
    {"lPlusScoreID":2, "jan":89.42, "feb":85.71, "mar":90.46},
    {"lPlusScoreID":3, "jan":86.22, "feb":90.61, "mar":89.53}
  ];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');

  // generate data
  jsonData.forEach(function (row) {
    var colIndex;
    var rowIndex;

    // handle each key in the row object
    Object.keys(row).forEach(function (key) {
      // create column for ID
      if (key === 'lPlusScoreID') {
        colIndex = data.addColumn('number', 'Product' + row.lPlusScoreID.toString());
        return;
      }

      // locate / insert row for month
      rowIndex = getRowIndex(key);
      if (rowIndex === null) {
        rowIndex = data.addRow();
        data.setValue(rowIndex, 0, key);
      }
      data.setValue(rowIndex, colIndex, row[key]);
    });
  });

  function getRowIndex(rowMonth) {
    var rowIndex = data.getFilteredRows([{
      column: 0,
      value: rowMonth
    }]);
    if (rowIndex.length > 0) {
      return rowIndex[0];
    }
    return null;
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data);
});

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

Answer 2

when utilizing google charts, the key lies in how the data is provided to generate the chart

there exist various methods for manipulating data such as group() and join()
but there aren't specific methods for pivoting from columns to rows, for example...

for the specific chart that is needed, the data must be formatted as shown below...

['month', 'Product1', 'Product2']
['jan', 60.03, 89.42]
['feb', 43.57, 85.71]

refer to the live snippet below for a working example...

the data table is initialized with a single column for the month
additional columns are appended for each "lPlusScoreID"

the getFilteredRows data table method is utilized to check if the month has already been included as a row
if it has, the row is updated; otherwise, a new row is added

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var jsonData = [
    {"lPlusScoreID":1, "jan":60.03, "feb":43.57, "mar":48.55},
    {"lPlusScoreID":2, "jan":89.42, "feb":85.71, "mar":90.46},
    {"lPlusScoreID":3, "jan":86.22, "feb":90.61, "mar":89.53}
  ];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');

  // generate data
  jsonData.forEach(function (row) {
    var colIndex;
    var rowIndex;

    // handle each key in the row object
    Object.keys(row).forEach(function (key) {
      // create column for ID
      if (key === 'lPlusScoreID') {
        colIndex = data.addColumn('number', 'Product' + row.lPlusScoreID.toString());
        return;
      }

      // locate / insert row for month
      rowIndex = getRowIndex(key);
      if (rowIndex === null) {
        rowIndex = data.addRow();
        data.setValue(rowIndex, 0, key);
      }
      data.setValue(rowIndex, colIndex, row[key]);
    });
  });

  function getRowIndex(rowMonth) {
    var rowIndex = data.getFilteredRows([{
      column: 0,
      value: rowMonth
    }]);
    if (rowIndex.length > 0) {
      return rowIndex[0];
    }
    return null;
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data);
});

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

Adjust the month to be plotted on the X-axis of the ColumnChart using the specified

Answer №1

Similar questions

Make sure to wait for the loop to complete before moving on to the next line

Issue with Bootstrap side navbar not collapsing when clicked on a link

Incorporate new content into JavaScript using the input element

When the function is called, it will return the global `this

Failure to establish connection between electron/socket.io client and python-socketio/aiohttp server

Dialogue and Data Retrieval: A Powerful Combination

Issue: TypeError - 'process.env' can only accept a configurable while installing windows-build-tools

Embracing Interfaces Over 'any' Types in TypeScript

JavaScript has the ability to sort tables using tags

The performance implications of implicit returns in Coffeescript and their effects on side effects

A guide to decoding a variety of data types from a stream

The $mdSticky feature in AngularJS Material seems to be malfunctioning

Converting a Form to JSON Format Using JQuerySerialize

Unable to delete a row from a dynamically generated table using jQuery

Is there a way to access an object stored on my server using JavaScript?

Having trouble accessing the menu in the dropdown div when clicking back?

Changing the color of a div element dynamically with JavaScript

Ways to verify the presence of a key within an array of objects

Merging a VUE project and a .NET framework project to unleash their full potential