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.

Answer 1

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);