Superbank Chart Options / Data Preprocess

  • 1
  • Idea
  • Updated 4 years ago
  • Implemented
The new charts functionality is a great step in the right direction. However, to replace our existing charts then we need better manipulation of the the highcharts options.

We can get around some of this by grabbing the highcharts object, doing some manipulation on properties or data and then redrawing after the initial render of the chart. e.g. 

<pre><code>
    var c=Highcharts.charts[0]; // The first Chart
    var s1=c.series[0];         // Closed Delivered series
    var s2=c.series[1];         // Closed Not Delivered series
    var s3=c.series[2];         // Open series

    s1.update({name: 'Delivered', index: 2 , legendIndex: 0});
    s2.update({name: 'Not Delivered', index: 1, legendIndex: 1 });
    s3.update({name: 'Open', index: 0, legendIndex: 2 });

    // Do some manipulation of the data here, add labels, etc

    c.redraw();
</code></pre>

But this is hacky, and we cannot change the main chart options like borders etc due to highcharts limitations in the api after the initial option setup.

So, it would be really useful in the interim (ie. until these are fully exposed in the skuid interface) if:

1) There was an options text field in the chart setup that allowed us to override / add to the chart options before the initial render. e.g.:

<pre><code>
chart:   {
            borderColor: '#cccccc',
            borderRadius: 10,
            borderWidth: 2,
            spacingBottom: 10,
            spacingRight: 30
        },
                        
        title: 
        {
            style: 
            {
                color: '#888888',
                fontWeight: 'bold',
                fontSize: '14px'
            }
        }
</code></pre>

2) Allow a snippet to run after options have been setup and before the render. e.g. like the initial code above to allow manipulation of data, addition of calculations / labels, etc
Photo of Ant Belsham

Ant Belsham

  • 1,022 Points 1k badge 2x thumb

Posted 4 years ago

  • 1
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Official Response
Ant,

The more we thought about this, the more your idea of a "Before Render" snippet made sense. As of 6.8, you should now see an "Advanced" menu which asks for a "Before Render Snippet" when building Charts:



As you'd expect, this corresponds to the name of a snippet to be run just before the initial chart render. This snippet takes a single argument: the JS object that gets sent to Highcharts. For example:
var chartObj = arguments[0],
$ = skuid.$;

$.extend(chartObj.chart,{
borderColor: '#cccccc',
borderRadius: 10,
borderWidth: 2,
spacingBottom: 10,
spacingRight: 30
});
Hopefully this really will help you convert some of those charts over to Skuid charts. In any case, we'd love to hear how it goes. Thanks so much for being a part of this community, and for helping us to make our product better.