Utilizing arrays dynamically to generate data for a bar chart display in JavaScript

Question

Utilizing arrays dynamically to generate data for a bar chart display in JavaScript

I'm currently working on generating a bar stack graph using the chart.js JavaScript library. My JavaScript array contains the following data:

0: {labels: "01/01/2020 00:00:00", data: 7433, category: "A"}
1: {labels: "01/01/2020 00:00:00", data: 774, category: "B"}
2: {labels: "01/01/2020 00:00:00", data: 5993, category: "C"}
3: {labels: "30/01/2020 00:00:00", data: 7624, category: "A"}
4: {labels: "30/01/2020 00:00:00", data: 900, category: "B"}
5: {labels: "30/01/2020 00:00:00", data: 5865, category: "C"}
6: {labels: "18/02/2020 00:00:00", data: 7161, category: "A"}
7: {labels: "18/02/2020 00:00:00", data: 1005, category: "B"}
8: {labels: "18/02/2020 00:00:00", data: 5940, category: "C"}

The AJAX request retrieves this data and now I need to dynamically set it in order to create a stack chart.

// STACK BAR CHART
var stackBarData = [];
var stackBarLabels = [];

$.ajax({
    type: "POST",
    async: false,
    url: "ExecView.aspx/ReturnStackBarData",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        var stackbarDatas = data.d;
        stackBarData = new Array(stackbarDatas.length);

        console.log(stackBarData);

        for (i = 0; i < stackbarDatas.length; i++) {

            stackBarData[i] = { labels: stackbarDatas[i].label, data: stackbarDatas[i].data, category: stackbarDatas[i].category };
        }

        console.log(stackBarData); // ARRAY OUTPUT ABOVE

    }
});

var BarpopData = {
    datasets: [{
        data: stackBarData
    }],
};

I want the data array with date 01/01/20 to be shown as the first label on the X-axis, with Category A displayed at the bottom of the stack with data 7433, Category B in the middle with data 774, and Category C at the top with data 5933. This pattern should continue for the next sets of data.

I aim for a dynamic approach that adjusts automatically based on the changing data. The Y-axis should adjust its minimum and maximum values accordingly for a clear representation of the bar stack graph.

You can view an example of the expected outcome in this JS Fiddle: https://jsfiddle.net/1eq8w0Lx/. I need to replace the hardcoded values with dynamic ones from my array. How can I achieve this?

javascript ajax

Answer 1

Answer №1

To begin with, organize the data to ensure they are properly arranged:

const order = ['X', 'Y', 'Z']
data.sort((x, y) => {
  const xDate = new Date(x.labels).getTime()
  const yDate = new Date(y.labels).getTime()
  if (xDate === yDate) {
    return order.indexOf(x.category) - order.indexOf(y.category)
  }
  return xDate - yDate
})

Getting the labels is straightforward:

const labels = [...new Set(data.map(item => item.labels.slice(0, -9)))]

When it comes to the datasets, its sequence should mirror that of the array order:

const datasets = order.map(o => ({ label: o, data: [] }))
for (const d of data) {
  const idx = order.indexOf(d.category)
  datasets[idx].data.push(d.data)
}

Answer 2

To begin with, organize the data to ensure they are properly arranged:

const order = ['X', 'Y', 'Z']
data.sort((x, y) => {
  const xDate = new Date(x.labels).getTime()
  const yDate = new Date(y.labels).getTime()
  if (xDate === yDate) {
    return order.indexOf(x.category) - order.indexOf(y.category)
  }
  return xDate - yDate
})

Getting the labels is straightforward:

const labels = [...new Set(data.map(item => item.labels.slice(0, -9)))]

When it comes to the datasets, its sequence should mirror that of the array order:

const datasets = order.map(o => ({ label: o, data: [] }))
for (const d of data) {
  const idx = order.indexOf(d.category)
  datasets[idx].data.push(d.data)
}

Answer 3

Answer №2

After reviewing the jsfiddle link provided, I made some updates to the ajax success method in order to enhance its functionality. These modifications could potentially assist you in achieving the desired outcome.

success: function (data) {
    var stackbarDatas = data.d;
    stackBarData = new Array(stackbarDatas.length);

    var dataSet = stackbarDatas.map(x=>({label: x.category, data: [x.data]}))
    var labels = stackbarDatas.map(x=>(x.label))

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
                                   type: 'bar',
                                   data: {
                                           labels: labels ,
                                           datasets: dataSet,
                                           options: {
                                                  ...
                                                  //rest settings as it is
}

Answer 4

After reviewing the jsfiddle link provided, I made some updates to the ajax success method in order to enhance its functionality. These modifications could potentially assist you in achieving the desired outcome.

success: function (data) {
    var stackbarDatas = data.d;
    stackBarData = new Array(stackbarDatas.length);

    var dataSet = stackbarDatas.map(x=>({label: x.category, data: [x.data]}))
    var labels = stackbarDatas.map(x=>(x.label))

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
                                   type: 'bar',
                                   data: {
                                           labels: labels ,
                                           datasets: dataSet,
                                           options: {
                                                  ...
                                                  //rest settings as it is
}

Answer 5

Answer №3

If you want to see a live demonstration, check it out here https://jsfiddle.net/k9j6h3tc/2/

Summary of Steps:

To start, set up your chart with empty data values.

const myChart = new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels  : [],
    datasets: [
      {
        label          : 'A',
        data           : [],
        backgroundColor: [ ... ],
        borderColor    : [ ... ],
        borderWidth    : 2
      },
      {
        label          : 'B',
        data           : [],
        backgroundColor: [ ... ],
        borderColor    : [ ... ],
        borderWidth    : 2
      },
      {
        label          : 'C',
        data           : [],
        backgroundColor: [ ... ],
        borderColor    : [ ... ],
        borderWidth    : 2
      },
    ],
  },
  options: { ... }
})

The callback function for the $.ajax call should be structured like this:

function on_success(data) {
  myChart.data.labels = [...new Set(data.map(el => el.labels.slice(0,-9)))];
  ["A", "B", "C"].forEach((cat, idx) => {
    myChart.data.datasets[idx].data,
    data.filter(el => el.category === cat).map(el => el.data)
  });
  myChart.update();
}

Avoid creating a new chart instance each time by using myChart.update().

Answer 6

If you want to see a live demonstration, check it out here https://jsfiddle.net/k9j6h3tc/2/

Summary of Steps:

To start, set up your chart with empty data values.

const myChart = new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels  : [],
    datasets: [
      {
        label          : 'A',
        data           : [],
        backgroundColor: [ ... ],
        borderColor    : [ ... ],
        borderWidth    : 2
      },
      {
        label          : 'B',
        data           : [],
        backgroundColor: [ ... ],
        borderColor    : [ ... ],
        borderWidth    : 2
      },
      {
        label          : 'C',
        data           : [],
        backgroundColor: [ ... ],
        borderColor    : [ ... ],
        borderWidth    : 2
      },
    ],
  },
  options: { ... }
})

The callback function for the $.ajax call should be structured like this:

function on_success(data) {
  myChart.data.labels = [...new Set(data.map(el => el.labels.slice(0,-9)))];
  ["A", "B", "C"].forEach((cat, idx) => {
    myChart.data.datasets[idx].data,
    data.filter(el => el.category === cat).map(el => el.data)
  });
  myChart.update();
}

Avoid creating a new chart instance each time by using myChart.update().

Answer 7

Answer №4

const stackBarDataset = data.d;
        let stackBarDataArray = new Array(stackBarDataset.length);

        stackBarDataArray = stackBarDataset.map(item => ({ category: item.category, data: [item.data], backgroundColor: item.backgroundColor, borderColor: item.borderColor, borderWidth: item.borderWidth }));
        const stackBarLabels = stackBarDataset.map(item => (item.label));

        const uniqueLabels = stackBarLabels.filter((value, index, array) => array.indexOf(value) === index); 

        console.log(JSON.stringify(stackBarDataArray));

        stackBarDataArray.forEach(dataItem => {
            const categoryName = dataItem.category;
            if (!groups[dataItem.category]) {
                groups[dataItem.category] = {
                    label: dataItem.category,
                    data: [],
                    backgroundColor: [],
                    borderColor: [],
                    borderWidth: dataItem.borderWidth
                };
            }
            groups[dataItem.category].data.push(dataItem.data[0]);
            groups[dataItem.category].backgroundColor.push(dataItem.backgroundColor);
            groups[dataItem.category].borderColor.push(dataItem.borderColor);
        });

        stackBarDataArray = Object.values(groups);

Answer 8

const stackBarDataset = data.d;
        let stackBarDataArray = new Array(stackBarDataset.length);

        stackBarDataArray = stackBarDataset.map(item => ({ category: item.category, data: [item.data], backgroundColor: item.backgroundColor, borderColor: item.borderColor, borderWidth: item.borderWidth }));
        const stackBarLabels = stackBarDataset.map(item => (item.label));

        const uniqueLabels = stackBarLabels.filter((value, index, array) => array.indexOf(value) === index); 

        console.log(JSON.stringify(stackBarDataArray));

        stackBarDataArray.forEach(dataItem => {
            const categoryName = dataItem.category;
            if (!groups[dataItem.category]) {
                groups[dataItem.category] = {
                    label: dataItem.category,
                    data: [],
                    backgroundColor: [],
                    borderColor: [],
                    borderWidth: dataItem.borderWidth
                };
            }
            groups[dataItem.category].data.push(dataItem.data[0]);
            groups[dataItem.category].backgroundColor.push(dataItem.backgroundColor);
            groups[dataItem.category].borderColor.push(dataItem.borderColor);
        });

        stackBarDataArray = Object.values(groups);

Utilizing arrays dynamically to generate data for a bar chart display in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to retrieve MongoDB count results in Node.js using a callback function?

Error: SyntaxError - Issue with the AJAX request

C# - Issue with Webbrowser failing to fully load pages

endless update cycle in Vue

Displaying website content within a pop-up dialog box

Incorporating object into main function of VueJS root component

Unable to pass data using $.post() method

Retrieving JavaScript array data following a page reload

Click here to navigate to the same or a different page using an anchor

Explaining the implementation of JQuery's onload event and its impact on reducing dependencies

Leveraging Template Variables for Styling in Vue 3's CSS Classes

Using Waveskeeper for Verification: Solutions for Resolving the 'Waves is not defined' Issue

Creating XML files using Node.js

Do I need to make any changes to the application when adding a new couchbase node to the cluster

Newbie in PHP: Techniques for transferring PHP variables between different sections of PHP code

What could be causing my Material UI Divider to appear invisible within a Material UI Container or Paper component?

Having difficulty accessing POST data through $.ajax request

Obtaining JavaScript data using Python Selenium Web Driver

Please explain this ES6 syntax to me: Using a colon after a function call

How can I pass standard HTML as a component in React?