CODEWITHSUNDEEP
chart.jschart.js2
jonbovy
jonbovy

Reputation: 127

How can I scale my dataset values as a percentage of the index in chart.js?

Sorry if the question is poorly worded.Here is my chart

I am looking into scaling the chart's display of dataset(s) values as a percentage such as:

//input
data:{
   datasets[{
      label: 'data1',
      data: [15, 22, 18, 35, 16, 29, 40]
   },
   {
      label: 'data2',
      data: [20, 21, 20, 19, 21, 22, 35]
   }]

data1's points on the chart would be displayed as [42.9, 51.2, 47.4, 64.8, 43.2, 56.9, 57.1]

data2's points on the chart would be displayed as [57.1, 48.8, 52.6, 35.2, 56.8, 43.1, 42.9]

It should look like this. All visible lines should stack up to 100%. If a dataset is hidden, how can I recalculate the percentage and update the chart so that everything stays stacked up to 100%?

I thought about doing a plugin where I do the calculation using myLine.data.datasets but then I don't know how to remove a hidden dataset's values from the calculation and I'm not sure how to display it unless I overwrite the original datasets. I'm pretty sure this is the wrong approach.

Any help would be greatly appreciated.

Upvotes: 1

Views: 1240

Answers (1)

jonbovy
jonbovy

Reputation: 127

So, I figured it out. I needed to write a function to calculate the percentage area of the points in the index and then update the datasets with the calculated percentage values.

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 
 *  DS_update calculates the percentage area of the input datasets 
 * 
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function DS_update(dataset_in, ds_vis){
    // make a deep copy (no references to the source)
    var temp = jQuery.extend(true, [], dataset_in);

    // gets the sum of all datasets at a given index
    function getTotal(index){
        total = 0;
        // step through the datasets
        dataset_in.forEach(function(e, i){
            // inc total if the dataset is visible
            if(ds_vis[i]){
                total += e[index];
            }
            // do nothing if the dataset is hidden

        });
        return total;
    }

    // update temp array with calculated percentage values
    temp.forEach(function(el, ind){                                 

        var j = ind;
        el.forEach(function(e, i){      
            // calculate percentage to the hundredths place
            temp[j][i] = Math.round((e / getTotal(i))*10000)/100;
        }); 
    });

    return temp;
}

Once I tested the functions I had to run them before initial load of the chart or else the user would see the datasets as non area-percent (raw data). which looks something like this:

// Keep source array to use in the tool tips
var Src_ary = Input_data;    // multidimensional array of input data
// holds the percent-area calculations as datapoints
var Prod_ary = DS_update(Src_ary, Init_visible(Src_ary));

Next up was updating the onClick for the legend. I need this to update the calculations every time an item's visibility is toggled:

legend: {
    position: 'bottom',
    usePointStyle: true,
    onClick: 

        function(e, legendItem){      
            var index = legendItem.datasetIndex;
            var ci    = this.chart;
            var meta  = ci.getDatasetMeta(index);
            var vis_ary = [];           
            var updatedSet = [];

            // See controller.isDatasetVisible comment
            meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;

            // load the visible array
            for(var i = 0; i < (ci.data.datasets || []).length; i++){
                switch (ci.getDatasetMeta(i).hidden){
                    case null:
                        vis_ary.push(true);
                    break;     
                    default:
                        vis_ary.push(false);
                    break;
                }
            }  

            // update datasets using vis_ary to tell us which sets are visible
            updatedSet = DS_update(Prod_ary, vis_ary);
            myLine.data.datasets.forEach(function (e,i){
                e.data = updatedSet[i];
            });

            // We did stuff ... rerender the chart
            ci.update();

        }
    }

END RESULT

This is what I was trying to do: highchart fiddle

This is what I ended up with:fiddle

It took a few days and a lot of reading through chartjs.org's documentation to put this together. In the end I think it came out pretty good considering I am new to chart.js and borderline illiterate with javascript.

Upvotes: 2

Related Questions