Chart JS Dynamic number of datasets

Question

Having done some hunting I thought I was getting close to a solution a couple of times by alas still no luck!

Fully aware that this post was created yesterday: React Chartjs, how to handle a dynamic number of datasets and is a very similar question but sadly no answers.

I am using Chart.JS version 2 and have a script which processes an AJAX request to load the variable number of datasets and their corresponding data.

The dataset label and values are actually displayed and accessed by the script in text inputs within a form.

Accessing everything for the most part is fine but creating a loop to create the datasets is where I keep failing.

I was hoping that this could just be a simple loop but I cannot get it to work and having found a couple of other solutions but having attempted to combine their solutions with my script still no luck.

Script is below. The "GraphLabelString" input is being access no problem as are the other form elements, although the code to get the dataset label and values is currently commented out as I'll cross that bridge once I get the loop to work.

Any help greatly apprieciated.

function LoadProjectActivityGraph(ProjectRef, StartDate, EndDate)
{
var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
        document.getElementById("ProjectActivityGraph").innerHTML = xmlhttp.responseText;

        //GET THE VALUE OF THE GRAPH LABELS FORM INPUT
        var GraphLabelString = document.forms.GraphData.GraphLabels.value;

        //TURN THE VALUE OF THE ABOVE INTO AN ARRAY
        var GraphLabelArray = GraphLabelString.split(","); 

        //GET THE VALUE OF THE TOTAL NUMBER OF DATASETS INPUTS
        var GraphTotalDatasets = parseInt(document.forms.GraphData.TotalDatasets.value);

        //SET THE GRAPH CONFIGURATION VALUES
        var LineChartConfig = {
                    type: 'line',
                data: {
                labels: GraphLabelArray,
                datasets: 
                    [ 

                        for (i=0; i < GraphTotalDatasets; i++)
                        {

                                {
                                label: 'apples',
                                //label: document.forms.GraphData['GraphDatasetLabel'+i].value,
                                data: [12, 19, 3, 17, 6, 3, 7],
                                //data: [document.forms.GraphData['GraphDatasetValues'+i].value],
                                fill: false,
                                borderColor: "red",
                                backgroundColor: "red",
                                pointBackgroundColor: "#ffffff",
                                tension: 0,
                                },

                        }

                    ]
                }
            };


        var ctx = document.getElementById("ProjectActivityGraphCanvas").getContext("2d");
        window.myLine = new Chart(ctx, LineChartConfig);


        }
    }
    xmlhttp.open("GET", "ProjectManagement/HoursManagement_AJAX/Response_ProjectActivityGraph.asp?ProjectRef="+ProjectRef+"&StartDate="+StartDate+"&EndDate="+EndDate, true);
    xmlhttp.send();

}

Have you tried doing the loop before LineChartConfig and then just do datasets: array? — Matt
– Matt, Commented Sep 22, 2017 at 17:19
Thanks Matt2 for the suggestion. Took a bit fiddling but got it working in the end. — DA082
– DA082, Commented Sep 25, 2017 at 11:25

DA082 · Accepted Answer · 2017-09-25 11:27:31Z

Following Matt2's suggestion I ended up with this solution.

This is the working script:

function LoadProjectActivityGraph(ProjectRef, StartDate, EndDate)
{
var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
        document.getElementById("ProjectActivityGraph").innerHTML = xmlhttp.responseText;

        //GET THE VALUE OF THE GRAPH LABELS FORM INPUT
        var GraphLabelString = document.forms.GraphData.GraphLabels.value;

        //TURN THE VALUE OF THE ABOVE INTO AN ARRAY
        var GraphLabelArray = GraphLabelString.split(","); 

        //GET THE VALUE OF THE TOTAL NUMBER OF DATASETS INPUTS
        var GraphTotalDatasets = parseInt(document.forms.GraphData.TotalDatasets.value);

        //CREATE AN ARRAY USED TO GENERATE THE DIFFERENT COLOURS FOR THE GRAPH
        //THIS ARRAY HAS 15 COLOURS SO CAN HANDLE A MAX OF 15 DATASETS
        //COLOUR ORDER IS RED GREEN BLUE ORANGE PURPLE CYAN BLACK DARK GREEN DARK BLUE LIGHT BLUE YELLOW, DARK PURPLE DARK RED LIGHT GREY DARK GREY
        var GraphColourArray = ['#ff0000', '#00ff00', '#0000ff', '#ffd400', '#ff00ff', '#00ffff', '#000000', '#008620', '#001a9f', '#0096ff', '#dccf00', '#8d0088', '#890101', '#beb4b4', '#686868'];

        var GraphDatasetsArray = [];

        for (i=0; i < GraphTotalDatasets; i++)
        {
        var DataArray = document.forms.GraphData['GraphDatasetValues'+i].value.split(","); 
        GraphDatasetsArray[i] = 
                            {
                            label: document.forms.GraphData['GraphDatasetLabel'+i].value,
                            data: DataArray, 
                            fill: false, 
                            borderColor: GraphColourArray[i], 
                            backgroundColor: GraphColourArray[i],
                            pointBackgroundColor: '#ffffff', 
                            tension: 0,
                            }   
        }

        //SET THE GRAPH CONFIGURATION VALUES
        var LineChartConfig = {
                    type: 'line',
                data: {
                labels: GraphLabelArray,
                datasets: GraphDatasetsArray
                    }
            };


        var ctx = document.getElementById("ProjectActivityGraphCanvas").getContext("2d");
        window.myLine = new Chart(ctx, LineChartConfig);
        window.myLine.update();

        }
    }
    xmlhttp.open("GET", "ProjectManagement/HoursManagement_AJAX/Response_ProjectActivityGraph.asp?ProjectRef="+ProjectRef+"&StartDate="+StartDate+"&EndDate="+EndDate, true);
    xmlhttp.send();

}

Collectives™ on Stack Overflow

Chart JS Dynamic number of datasets

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related