CODEWITHSUNDEEP
javascriptchart.js
juju
juju

Reputation: 555

Is there a way to insert multiple lines, with labels, dynamically, into a ChartJS Line chart?

I was hoping it's possible as I've been trying to find a way to do this, with a little knowledge of js, and ChartJS. I was hoping to call addData, and fill the lines but I've not figured out a way of mapping which data is for the corresponding label, for each line. My issues are that the objects that I'm passing by JSON, all have have different dates, for different wages;

{
  "details": [
    {
     "user": [
       {
          "amount": "15000",
          "startdate": "01/01/2012",
          "enddate": "01/01/2012",
          "id": "23",
        }, {
          "amount": "21000",
          "startdate": "01/01/2013",
          "end": "01/01/2012",
          "id": "23",
        }],
  "user" : etc etc
}

And then, catch this with js and arrange with something like this (my actual code is a lot longer so you can see what I'm trying to do);

for (var i = 0; i < details.length; i++)
{
   for (int j = 0; j < details[i].length; j++)
   {
       addStuffTodataArray(details[i].user[j]);
   }
    var lineData = {
        labels: labelArray,
        datasets: [
            {
                label: JsonData.user,
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: dataArray 
            }
   }

At the moment, I'm going to work everything out manually (ie, get the period specified by the user with jQuery, and run through the time frame specified, counting the months and applying a label for each one, then assigning values).

My new way seems like a lot of processing, and I was sure ChartJS would handle this a little better.

Thanks in advance.

Upvotes: 0

Views: 1708

Answers (3)

juju
juju

Reputation: 555

I ended up doing something like this;

lineChartData = {}; //declare an object
lineChartData.labels = []; //add 'labels' element to object (X axis)
lineChartData.datasets = []; //add 'datasets' array element to object
var moreData = [[1, 3, 6, 16, 30, 6], [3,2,3,5,1,2], [3,11,23,2,1,9]];
function getLabels()
{
 var labels = ["one", "two", "three", "four", "five", "six"];  
 return labels;
}

for (line = 0; line < moreData.length; line++) {
    y = [];
    lineChartData.datasets.push({}); //create a new line dataset
    dataset = lineChartData.datasets[line]
    dataset.fillColor = "rgba(0,0,0,0)";
    if (moreData[line][0] == 1){
        dataset.strokeColor = "rgba(0,0,205,1)";
    } else {
        dataset.strokeColor = "rgba(200,200,200,1)";
    }
    dataset.data = []; //contains the 'Y; axis data

    for (x = 0; x < getLabels().length; x++) {
        labels = getLabels();
        for (var k = 0; k < moreData[line].length; k++){
        y.push( moreData[line][k]);
        }

        if (line === 0)
            lineChartData.labels.push(labels[x]);
    }

    lineChartData.datasets[line].data = y;
}

ctx = document.getElementById("Chart1").getContext("2d");
myLineChart = new Chart(ctx).Line(lineChartData);

Upvotes: 0

potatopeelings
potatopeelings

Reputation: 41075

You might want to use the Chart.Scatter extension (http://dima117.github.io/Chart.Scatter/). This is also linked to from the Chart.js documentation (see http://www.chartjs.org/docs/#advanced-usage-community-extensions)

Chart.Scatter supports date scales, which would get rid of the

At the moment, I'm going to work everything out manually (ie, get the period specified by the user with jQuery, and run through the time frame specified, counting the months and applying a label for each one, then assigning values).

that you are doing (you'd still have to to reformat your data structure to fit in with the data structure expected by Chart.Scatter)

Upvotes: 1

Marc
Marc

Reputation: 11633

Here's a guess. I haven't tried this, but based on the structure of the datasets, I'm thinking you can add a dataset to the array of data and then call update();

//here's the new dataset you want to add
var myNewDataset = {
        label: "My third dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    };

//push that onto the datasets array
lineData.datasets.push(myNewDataset);

//call the update method to render the new data
myLineChart.update();

Update method is described here: http://www.chartjs.org/docs/#line-chart-prototype-methods

Upvotes: 4

Related Questions