Cumulative Chart

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.

Ran out of steam. :S
Maybe tomorrow.

Check out this forum discussion for some good ideas. 

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

Hi Pat. Did you find anything out about how this could be achieved?

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.

Et voila! Enjoy!

var chart = arguments[0], $ = skuid.$; if (chart.series.length &gt; 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; }); }); }<br>

Thanks Pat - you found it even while you were at Dreamforce.  That’s awesome. 

Nope. 30,000 ft up. Decided to cut my trip short.

Wow, HUGE thanks!! Amazing. I’ll check it out 🙂

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 

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.

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; }); } }); }

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”…

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!

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:

{<br />&nbsp; y: 0, <br />&nbsp; name: "Feb 2016", <br />&nbsp; sk_rows: undefined<br />}

 

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&#46;series ? chartObj&#46;series : [], &#47;&#47;catch the empty series case $ = skuid&#46;$; &#47;&#47;doit main(); &#47;&#47;call the cumulator and add tooltips function main() { if (series&#46;length &gt; 0) { &#47;&#47;cumulate all the series $&#46;each( series, function (i, elem) { &#47;&#47;only cumulate the data if hasn't already been done so if( !elem&#46;cum ) { cumulate(elem&#46;data); elem['cum'] = true; &#47;&#47;mark as cumulated } }); } } &#47;&#47;cumulate the array function cumulate(r) { var curSum = 0, result = r; $&#46;each( r , function (i, data) { curSum += data&#46;y; &#47;&#47;add the current y value result[i]&#46;y = curSum; &#47;&#47;set the data of the output }); return result }<br />

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. 

Hey Michael, glad it worked for you. 

Some resources:

https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!forum/skuid-custom-componen…


https://github.com/custom-skuid-components

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.

Henry,

a brief thank you. This worked beautifully…

Cheers,

Ben