not able to set dataset value in chart.js

Question

i want to set dataset value dynamically of chart.js to create a bar graph which i am trying to do with the following code

getmths();
mthlen=marr.length;
xdistid=$('#mdistid').val();
mdistid=xdistid.split(',');
mdilen=mdistid.length;
var distdata=[];
for(i=0;i<mdilen;i++)
{
glc=mdistid[i];
for(j=0;j<mthlen;j++)
{
mth=marr[j];
switch(mth)
{
case '1':
distdata[j]=$('#qty1'+glc).val();
break;
case '2':
distdata[j]=$('#qty2'+glc).val();
break;
case '3':
distdata[j]=$('#qty3'+glc).val();
break;
case '4':
distdata[j]=$('#qty4'+glc).val();
break;
case '5':
distdata[j]=$('#qty5'+glc).val();
break;
case '6':
distdata[j]=$('#qty6'+glc).val();
break;
case '7':
distdata[j]=$('#qty7'+glc).val();
break;
case '8':
distdata[j]=$('#qty8'+glc).val();
break;
case '9':
distdata[j]=$('#qty9'+glc).val();
break;
case '10':
distdata[j]=$('#qty10'+glc).val();
break;
case '11':
distdata[j]=$('#qty11'+glc).val();
break;
case '12':
distdata[j]=$('#qty12'+glc).val();
break;
}

}
//Month Loop Ends here;

alert("Distributor data:"+distdata);

if(i==0)
{
datasetValue[0]=
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: distdata
};  
}
if(i==1)
{
datasetValue[1]=
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: distdata
};  
}

}
//Distributor Loop Ends here;

alert("Datasets: "+datasetValue[0].data);
alert(datasetValue.length);
mkchart();
mklinechart();

my problem is that after the loop finishes when i am checking the value of datasetValue[0].data i am getting the same value which sholud be of datasetValue[1].data please help me with this problem.........Thanks in advance

score 0 · Answer 1 · edited May 23 '17 at 12:29

my problem is that after the loop finishes when i am checking the value of datasetValue[0].data i am getting the same value which sholud be of datasetValue[1].data

Your issue is that you are setting the data of both chart datasets to the same array object (distdata). When you update the array, both dataset's data object change (because they 2 variables that point to the same object)

You can fix this easily by creating a copy of distdata when you assign it to the data property of the dataset. The easiest way to do this is using slice() (see Javascript fastest way to duplicate an Array - slice vs for loop for a more ways to do this).

In short, change your dataset assignment to be like so (notice the extra .slice())

...
if (i == 0) {
    datasetValue[0] =
    {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: distdata.slice()
    };
}
if (i == 1) {
    datasetValue[1] =
    {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: distdata.slice()
    };
}
...

That's nice. Without slice at all or without slice on the 2nd one? (the 2nd slice is not actually required if you have 2 arrays - I just included it because it makes it consistent and easier to maintain) — potatopeelings, Sep 11 '15 at 13:29

not able to set dataset value in chart.js

1 Answers1