WebDataRocks Highcharts not updating data when filtered

Question

When filtering on a parent row in the slice; the child row (which is set as the row slice on the chart) is not updating. The chart does not change. Below is the JavaScript code.

If you filter the pivot table on country, the chart does not change even though it should because the subsequent categories should be filtered too.

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    width: 850,
    report: {
        "dataSource": {
            "dataSourceType": "json",
            "data": getJSONData()
        },
        slice: {
            rows: [{
                uniqueName: "Country"
            },{
                uniqueName: "Category"
            }],
            columns: [{
                uniqueName: "Measures"
            }],
            measures: [{
                uniqueName: "Price",
              format:"currency"
            }]
        },
        options: {
            grid: {
                type: "classic"
            }
        },
      formats: [
      {
        name: "currency",
        thousandsSeparator: " ",
        decimalSeparator: ".",
        decimalPlaces: 2,
        maxDecimalPlaces: -1,
        maxSymbols: 20,
        currencySymbol: "$",
        currencySymbolAlign: "left",
        nullValue: "",
        infinityValue: "Infinity",
        divideByZeroValue: "Infinity",
        textAlign: "right",
        isPercent: false
      }
    ]
    },
    reportcomplete: function() {
        pivot.off("reportcomplete");
        pivot.expandAllData();
        createChart();
    },
    reportchange: function() {
        pivot.off("reportchange")
    }
});


// Apply the theme
Highcharts.setOptions(Highcharts.theme);


function createChart() {
    pivot.highcharts.getData({
        type: "bar",
        slice: {
            rows: [{
                uniqueName: "Category"
            }],
            columns: [{
                uniqueName: "Measures"
            }],
            measures: [{
                uniqueName: "Price",
                format:"currency"
            }]
        }
    }, createAndUpdateChart, createAndUpdateChart);
}
function createAndUpdateChart(data, rawData) {
    if (data.yAxis == undefined) data.yAxis = {};
    // apply the number formatting from the pivot table to the tooltip
    data.tooltip = {
        pointFormat: pivot.highcharts.getPointYFormat(rawData.meta.formats[0])
    }
    Highcharts.chart('highchartsContainer', data);
}


Highcharts.theme = {
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', 
             '#FF9655', '#FFF263', '#6AF9C4'],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
            ]
        },
    },
    title: {
        style: {
            color: '#000',
            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    subtitle: {
        style: {
            color: '#666666',
            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
        }
    },

    legend: {
        itemStyle: {
            font: '9pt Trebuchet MS, Verdana, sans-serif',
            color: 'black'
        },
        itemHoverStyle:{
            color: 'gray'
        }   
    }
};

function getJSONData() {
    return [{
        "Country": "Australia",
        "Category": "Wood",
        "Price": 445,
        "Revenue": 464
    }, {
        "Country": "Australia",
        "Category": "Bikes",
        "Price": 125,
        "Revenue": 440
    }, {
        "Country": "China",
        "Category": "Clothing",
        "Price": 190,
        "Revenue": 310
    }, {
        "Country": "United States",
        "Category": "Aircraft",
        "Price": 406,
        "Revenue": 127
    }, {
        "Country": "United States",
        "Category": "Bikes",
        "Price": 85,
        "Revenue": 821
    }, {
        "Country": "United Kingdom",
        "Category": "Cars",
        "Price": 21,
        "Revenue": 455
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Price": 666,
        "Revenue": 685
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Price": 563,
        "Revenue": 742
    }, {
        "Country": "United Kingdom",
        "Category": "Bikes",
        "Price": 397,
        "Revenue": 340
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Price": 800,
        "Revenue": 948
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Price": 172,
        "Revenue": 800
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Price": 352,
        "Revenue": 947
    }, {
        "Country": "United Kingdom",
        "Category": "Aircraft",
        "Price": 540,
        "Revenue": 328
    }, {
        "Country": "United Kingdom",
        "Category": "Aircraft",
        "Price": 204,
        "Revenue": 216
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Price": 292,
        "Revenue": 644
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Price": 901,
        "Revenue": 237
    }, {
        "Country": "Canada",
        "Category": "Wood",
        "Price": 348
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Price": 725,
        "Revenue": 335
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Price": 13,
        "Revenue": 687
    }, {
        "Country": "China",
        "Category": "Wood",
        "Price": 62,
        "Revenue": 378
    }]
}

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<script src="https://code.highcharts.com/4.2.2/highcharts.js"></script>
<script src="https://code.highcharts.com/4.2.2/highcharts-more.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.highcharts.js"></script>

<table>
    <tr style="width: 1000px;">
        <div id="wdr-component"></div>
    </tr>
    <tr style="width: 1000px;">
        <div id="highchartsContainer" style="width:500px;height:400px;"></div>
    </tr>
</table>

I have tried to fire the reportchange as well as tried to intercept the data in the createAndUpdateChartFunction with no avail.

Hi @Dean Braun, You have used `highcharts` tag, but the problem seems to be strictly related to WebDataRocks. I would suggest to ask this question on: https://www.webdatarocks.com/forum/ — ppotaczek, Mar 17 '23 at 10:30
Hi @ppotaczek, I believe WebDataRocks has disabled their forum. If you try create a post, it takes your straight to this website. — Dean Braun, Mar 20 '23 at 06:21

score 0 · Answer 1 · answered Mar 21 '23 at 12:36

In the provided JavaScript code, the "Country" field is not present in the slice passed to the getData method. Filtering the country won't affect the chart since this field is not passed to the chart's data. Adding the "Country" to the rows would help you to achieve the desired behavior:

pivot.highcharts.getData({
    type: "bar",
    slice: {
        rows: [{
            uniqueName: "Category"
        },{
            uniqueName: "Country"
        }],
        columns: [{
            uniqueName: "Measures"
        }],
        measures: [{
            uniqueName: "Price",
            format:"currency"
        }]
    }
}, createAndUpdateChart, createAndUpdateChart);

It worked! Thank you so much. Truth be told, my code is actually a lot more complex than the example I provided but I managed to implement your fix (with a few changes) and it works perfectly! — Dean Braun, Mar 23 '23 at 08:06

WebDataRocks Highcharts not updating data when filtered

1 Answers1