Cumulative Chart

  • 3
  • Question
  • Updated 4 months ago
  • Answered
Is it possible to create cumulative charts with Skuid?

Example: Revenue Chart grouped by purchase month, I want January to show January's revenue and then February to show January + February, etc

Thanks!
Photo of Adam Johnson

Adam Johnson

  • 1,000 Points 1k badge 2x thumb

Posted 4 years ago

  • 3
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
In theory you could loop through the value in the series accumulating and updating the each in the series as you go.

I'll try this for later as I'd like to have this capability.
Photo of Henry Goddard

Henry Goddard

  • 776 Points 500 badge 2x thumb
Better late than never,

I too have tried Pat's script to no avail. However, I have managed to locate where it seems to be going wrong. It seems that the data arrays for each series that Skuid pumps into the highcharts constructor are objects, and not integers. The above snippet assumes 'currentSeries' is an array of integers, when it is actually an array of objects of a format similar to:

{
  y: 0,
  name: "Feb 2016",
  sk_rows: undefined
}
 

Therefore Line 12, or:

cumulative = cumulative + currentSeries;

attempts to cumulate objects, not the y values of each point. To fix that, simply change the line to:

cumulative = cumulative + currentSeries.y;

Further, the snippet only seems to only be interested in the last series and ignores all others with line 10, or:

if (cs == chart.series.length - 1){

removing that will cumulate all the series in the chart.

Since I'm already on the topic, it's worth noting that Skuid will execute the 'Before Render Script' should alternate chart types be selected. This means that already cumulated data will be cumulated once again. To overcome this, I've added a flag to the series to prevent that from happening, here is my version:

var chartObj = arguments[0],
    series = !!chartObj.series ? chartObj.series : [], //catch the empty series case
	$ = skuid.$;

//doit
main();	

//call the cumulator and add tooltips
function main() {
    if (series.length > 0) {
        //cumulate all the series
        $.each( series, function (i, elem) {
            //only cumulate the data if hasn't already been done so
            if( !elem.cum ) {
                cumulate(elem.data);
                elem['cum'] = true; //mark as cumulated
            }
        });
    }
}

//cumulate the array
function cumulate(r) {
    var curSum = 0,
        result = r;
    $.each( r , function (i, data) {
        curSum += data.y; //add the current y value
        result[i].y = curSum; //set the data of the output
    });
    return result
}
(Edited)
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb
Wow, worked perfectly Henry, Thanks! How could one go about learning how to manipulate skuid components with javascript? Would love to know how to make these modifications from scratch for future customizations. 
Photo of Michael L Barnes

Michael L Barnes

  • 176 Points 100 badge 2x thumb
Henry, you rock!  Your snippet worked perfectly for me as well.  Thank you so much!!  Sadly I am a javascript novice at best.  Thanks for the links above as well, as I have some skills that need development on this end.
Photo of Michael L Barnes

Michael L Barnes

  • 176 Points 100 badge 2x thumb
Henry, you rock!  Your snippet worked perfectly for me as well.  Thank you so much!!  Sadly I am a javascript novice at best.  Thanks for the links above as well, as I have some skills that need development on this end.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Check out this forum discussion for some good ideas. 

https://community.skuidify.com/skuid/topics/display-chart-series-diff
Photo of Ben Murray

Ben Murray

  • 1,084 Points 1k badge 2x thumb
Henry,

a brief thank you. This worked beautifully...

Cheers,

Ben