Display Chart Series Diff

  • 4
  • Question
  • Updated 4 years ago
  • Answered
I'm starting to get the hang of charts and aggregate models and I've started putting together some great charts with some real business value! One of our users asked if we could do a diff between 2 series in a chart. So for example if we're showing data from 2014 and 2013, could we show the +/- difference between the 2 years as a field/series/data point... Basically some way to show what the difference is between 2 series. Is this doable?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb

Posted 4 years ago

  • 4
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
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?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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. 
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
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: [{                name: 'Week 10',
                data: [3, 4, 3, 5, 4, 10, 12],
                dataLabels: {
                    enabled: true,
                    formatter: function(){
                        var secondY = this.series.chart.series[1].yData[this.point.x],
                            firstY = this.y;
                        return (((secondY/firstY)*100)-100).toFixed(2)+' %';
                    }
                }
            }
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!
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
The Before Render Snippet approach has been working for me: https://community.skuidify.com/skuid/topics/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.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
I used some JS from this thread: https://community.skuidify.com/skuid/topics/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.$;
var dataLabels = {
    enabled: true,
    formatter: function(){
        var secondY = this.series.chart.series[1].yData[this.point.x],
            firstY = this.y;
        var returnVal;    
        if(firstY > secondY){
            returnVal = "+" + (firstY - secondY);
        }else if(firstY < secondY){
            returnVal = "-" + (secondY - firstY);
        }else{
            returnVal = firstY;
        }
        return returnVal;
    }
};
chartObj.series[0].dataLabels = dataLabels;
console.log(chartObj);
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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... 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
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.$;
var Appts = chartObj.series[0].data,
    Comp = chartObj.series[1].data,
    Shows = [];
for (var i = 0; i < Appts.length; i++){
    Shows.push(Appts[i] / Comp[i]);
}
$.extend(chartObj.series,{
    name: 'Show Rate',
    data: Shows,
    type: 'line'
});
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Try this:

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

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Perfect! Thanks, Moshe.