Banzai chart no longer adding dynamic series

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
In the previous release you could create a before render snippet and change the series as shown in this post https://community.skuidify.com/skuid/topics/display-chart-series-diff. It appears that in the new Banzai release adding to the series list no longer adds a new series to the chart when it's rendered. The snippet still runs, it just seems that the chart doesn't pickup any newly created series before it is rendered.
Photo of Justin Forrest

Justin Forrest

  • 200 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Hi, Justin. That should still be supported, but we did make some changes under the hood for Banzai, so we could have a bug. Care to share that snippet so I can take a closer look?
Photo of Justin Forrest

Justin Forrest

  • 200 Points 100 badge 2x thumb
Of course, here is the snippet that is currently working in our production environment using the old build. This just keeps a running total of a single series in the chart and adds it as a line. The console log at the end correctly shows the new series being added it just doesn't show up during runtime.

var chartObj = arguments[0],
$ = skuid.$;

// figure out how many series there are, since this is
// for asset flows there would be anywhere from 1 to 4
// different series
var assetTypeNumber = chartObj.series.length;

if (assetTypeNumber && assetTypeNumber > 0) {
var cumulativeAssets = [];
var sumAssets = 0;

// each series has a data array all of the same size
for (var i = 0; i < chartObj.series[0].data.length; ++i) {
for (var j = 0; j < assetTypeNumber; ++j) {
sumAssets += chartObj.series[j].data[i];
}

cumulativeAssets.push(sumAssets);
}

var newSeries = {
id: 'CumulativeAssets',
name: 'Cumulative Assets',
data: cumulativeAssets,
type: 'column',
xAxis: chartObj.series[0].xAxis,
yAxis: chartObj.series[0].yAxis,
};

// add the new series to the very end of the current
// chart series
chartObj.series[chartObj.series.length] = newSeries;

console.log(chartObj);
}
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Hmmm... Nothing jumps out at me. I took this snippet and pared it down a bit to not rely on a particular data model, added it a column chart and it appears to work:
var chartObj = arguments[0],
$ = skuid.$,
newSeriesData = [];

for (var i = 0; i < chartObj.series[0].data.length; ++i) {
// Just use a dummy value
newSeriesData.push((i+1) * 100000);
}

chartObj.series[chartObj.series.length] = {
id: 'CumulativeAssets',
name: 'Cumulative Assets',
data: newSeriesData,
type: 'column',
xAxis: chartObj.series[0].xAxis,
yAxis: chartObj.series[0].yAxis,
};

console.log(chartObj);
If you try that snippet, does the extra (bogus) series show up? Does this help shed any more light on why this wouldn't be working?
Photo of Justin Forrest

Justin Forrest

  • 200 Points 100 badge 2x thumb
Ah.. I see what has changed. So before the series in the chartObj was a simple number array. Now it is an Object with a y property for the value. So as I was just adding the values it was trying to concatenate objects instead of just adding the values together.
Photo of Justin Forrest

Justin Forrest

  • 200 Points 100 badge 2x thumb
For those interested, in my above snippet if you replace
sumAssets += chartObj.series[j].data[i];
with
sumAssets += chartObj.series[j].data[i].y;
everything works as expected in Banzai
(Edited)
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Ah! Yes, we did standardize on the config object format for series data across all our chart types for Banzai. Previously, each of the categories used a slightly different format. Just a note, it does look like you can mix and match formats within a single chart, but of course, if you've got a snippet that is relying on Skuid constructing your series data in one format or another, it will need to be updated.

Thanks for being a part of our community, Justin!