Display Chart Series Diff

Good stuff. We did a rapid-fire charting dev session yesterday and got some amazing results really 
quickly. Charts work beautifully with the new table features (fixed height and multi select filters).




So your +/- difference requirement. Am I right in thinking that the variance number doesn’t exist in the data, so you need to calculate it at runtime? Looks like Highcharts supports something like that through formatting data labels, like this example: http://jsfiddle.net/7gvuA/1/  Is that similar to your scenario?

Another thought.  Could you create the dif in the data somwhere?  Custom Object?  Analytic snapshot?  Formula field?  Then you can include that data as one of your series - along with the series from the primary object. 

Thanks Glenn that’s exactly what I was trying to do. I’m realizing that the charts are based on Highcharts and that their API should be usable in skuid. I imagine that I can add that diff in a before render snippet which would dynamically add another series. I would have to reproduce this section:

series: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Week 10',<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [3, 4, 3, 5, 4, 10, 12],<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataLabels: {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enabled: true,<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formatter: function(){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var secondY = this.series.chart.series[1].yData[this.point.x],<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; firstY = this.y;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (((secondY/firstY)*100)-100).toFixed(2)+' %';<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } 

Glenn or Rob are their some examples out there of working with skuid JS and highcharts JS together?I know I’m veering off the point and click highway, but I think it would be really cool to customize the charts even farther!

The Before Render Snippet approach has been working for me: https://community.skuid.com/t/superbank-chart-options-data-preprocess
So far I’ve used it for basic chart styling and for changing the animation of a plot series. But in theory you should be able to make it work for your need. I’m still learning the Highcharts API, but it looks good, similar to what we’ve been working with from Kendo.

All in all this new analytics feature set is pretty seriously awesome.

I used some JS from this thread: https://community.skuid.com/t/superbank-chart-options-data-preprocess . I think I’m getting the hang of it now! I was able to set a dynamic +/- diff using the following snippet.

var chartObj = arguments[0], $ = skuid.$;<br>var dataLabels = {<br>&nbsp; &nbsp; enabled: true,<br>&nbsp; &nbsp; formatter: function(){<br>&nbsp; &nbsp; &nbsp; &nbsp; var secondY = this.series.chart.series[1].yData[this.point.x],<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; firstY = this.y;<br>&nbsp; &nbsp; &nbsp; &nbsp; var returnVal; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; if(firstY &gt; secondY){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; returnVal = "+" + (firstY - secondY);<br>&nbsp; &nbsp; &nbsp; &nbsp; }else if(firstY &lt; secondY){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; returnVal = "-" + (secondY - firstY);<br>&nbsp; &nbsp; &nbsp; &nbsp; }else{<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; returnVal = firstY;<br>&nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; return returnVal;<br>&nbsp; &nbsp; }<br>};<br>chartObj.series[0].dataLabels = dataLabels;<br>console.log(chartObj);

Great to see you guys pushing the boundaries, and discovering the possibilities.  Thanks for kicking the tires so hard.  We’d love to see what you are coming up with… 

Gentlemen,

I’m trying to add a series to my chart which divides the values of two series. I have Total Appointments and Completed Appointments, and would like to compute/display Show Rate. I’m using this before render snippet, but I’m not getting anything on the chart. Help? I’m new to Javascript, so I’m just guessing on a lot of this…

var chartObj = arguments[0], $ = skuid.$;<br>var Appts = chartObj.series[0].data,<br>&nbsp; &nbsp; Comp = chartObj.series[1].data,<br>&nbsp; &nbsp; Shows = [];<br>for (var i = 0; i &lt; Appts.length; i++){<br>&nbsp; &nbsp; Shows.push(Appts[i] / Comp[i]);<br>}<br>$.extend(chartObj.series,{<br>&nbsp; &nbsp; name: 'Show Rate',<br>&nbsp; &nbsp; data: Shows,<br>&nbsp; &nbsp; type: 'line'<br>});

Try this:

var chartObj = arguments[0], $ = skuid.$;var Appts = chartObj.series[0].data,<br>&nbsp; &nbsp; Comp = chartObj.series[1].data,<br>&nbsp; &nbsp; Shows = [];<br>for (var i = 0; i &lt; Appts.length; i++){<br>&nbsp; &nbsp; Shows.push(Appts[i] / Comp[i]);<br>}<br>//try something else here, just set the series directly<br>//I've had some issues with the extend function<br>var newSeries = {<br>name: 'Show Rate',<br>&nbsp; &nbsp; data: Shows,<br>&nbsp; &nbsp; type: 'line'<br>}<br>chartObj.series[2] = newSeries;<br>//check out how it looks in the console after the change<br>//there should be 3 series now<br>console.log(chartObj);

Perfect! Thanks, Moshe.