Cumulative Chart

Adam JohnsonAdam Johnson Member
edited June 25 in Questions
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!

Comments

  • Pat VachonPat Vachon Member πŸ’ŽπŸ’ŽπŸ’Ž
    edited June 25
    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.
  • Pat VachonPat Vachon Member πŸ’ŽπŸ’ŽπŸ’Ž
    edited January 2016
    Ran out of steam. :S
    Maybe tomorrow.
  • Rob HatchRob Hatch Skuad, Sonar ✭✭
    edited September 2016
    Check out this forum discussion for some good ideas.Β 

    https://community.skuidify.com/skuid/topics/display-chart-series-diff



  • edited December 2015
    Hi Pat. Did you find anything out about how this could be achieved?
  • Pat VachonPat Vachon Member πŸ’ŽπŸ’ŽπŸ’Ž
    edited January 2016
    I did manage to do this once. I used a snippet to accumulate the current value with the previous value(s). Looking for the code I wrote.
  • Pat VachonPat Vachon Member πŸ’ŽπŸ’ŽπŸ’Ž
    edited January 2016
    Et voila! Enjoy!
    var chart = arguments[0],     $ = skuid.$;               if (chart.series.length > 0){         $.each(chart.series, function(cs,cSeries){             var cSeriesData =  cSeries.data,             cumulative = 0;                          $.each(cSeriesData,function(s,currentSeries){                 cumulative = cumulative + currentSeries;                 chart.series[cs].data[s] = cumulative;             });         });      }
  • Rob HatchRob Hatch Skuad, Sonar ✭✭
    edited September 2016
    Thanks Pat - you found it even while you were at Dreamforce. Β That's awesome.Β 
  • Pat VachonPat Vachon Member πŸ’ŽπŸ’ŽπŸ’Ž
    edited January 2016
    Nope. 30,000 ft up. Decided to cut my trip short.
  • edited December 2015
    Wow, HUGE thanks!! Amazing. I'll check it out :)
  • Jack SanfordJack Sanford Member ✭✭
    edited May 2016
    Can you explain this just a little more? What do you replace with your own series names?

    I'm trying to make a Pareto chart, which is a mash up of a column chart sorted by prevalence left to right (h/t to this thread) and a line chart that shows the cumulative percent of the totalΒ 
  • Jack SanfordJack Sanford Member ✭✭
    edited May 2016
    Can you explain this just a little more? What do you replace with your own series names?

    I'm trying to make a Pareto chart, which is a mash up of a column chart sorted by prevalence left to right (h/t to this thread) and a line chart that shows the cumulative percent of the totalΒ 
  • Pat VachonPat Vachon Member πŸ’ŽπŸ’ŽπŸ’Ž
    edited January 2016
    Here you go.

    You'll have to introduce the same data as two series. Once for the column and another as the line chart. Done it before and here's what it looks like. Not a great illustration but works well with certain data sets.


    image
    var chart = arguments[0],     $ = skuid.$;               if (chart.series.length > 0){         $.each(chart.series, function(cs,cSeries){             var cSeriesData =  cSeries.data,             cumulative = 0;             if (cs == chart.series.length - 1){                 $.each(cSeriesData,function(s,currentSeries){                                          cumulative = cumulative + currentSeries;                     chart.series[cs].data[s] = cumulative;                                                               });             }         });      }     
  • edited December 2015
    Pat, thanks a millIon for this! Now Skuidify team, in my opinion, this would be a hugely useful addition to the declarative toolset. We get asked for these Pareto charts all the time. Oh, and it's times like this, that "like" button needs relabelled to "Love"...
  • edited November 2015
    I attempted to use Pat's first snippet, but the chart does not show any data... I copied and pasted the snippet and placed the name of the snippet in the Before Render Snippet. Am I missing anything?

    Thanks!
  • edited November 2015
    I attempted to use Pat's first snippet, but the chart does not show any data... I copied and pasted the snippet and placed the name of the snippet in the Before Render Snippet. Am I missing anything?

    Thanks!
  • Henry GoddardHenry Goddard Member
    edited March 2018
    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 August 2017
    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.Β 
  • edited December 2017
    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.
  • edited December 2017
    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.
  • Ben MurrayBen Murray Member
    edited July 2018
    Henry,

    a brief thank you. This worked beautifully...

    Cheers,

    Ben
Sign In or Register to comment.