<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<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>
        <td style="width: 800px;">
            <div id="wdr-component"></div>
        </td>
        <td>
            <div id="highchartsContainer" style="width:500px;height:400px;"></div>
        </td>
    </tr>
</table>
var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    report: {
        "dataSource": {
            "dataSourceType": "json",
            "data": getJSONData()
        },
        slice: {
            rows: [{
                uniqueName: "Country"
            }, {
                uniqueName: "Measures"
            }],
            columns: [{
                uniqueName: "Category"
            }],
            measures: [{
                uniqueName: "Price"
            }]
        }
    },
    reportcomplete: function() {
        pivot.off("reportcomplete");
        createChart();
    }
});

function createChart() {
    pivot.highcharts.getData({
        type: "areaspline"
    }, function(data) {
        Highcharts.chart('highchartsContainer', data);
    }, function(data) {
        Highcharts.chart('highchartsContainer', data);
    });
}

function getJSONData() {
    return [{
        "Country": "Australia",
        "Category": "Wood",
        "Price": 445
    }, {
        "Country": "Australia",
        "Category": "Bikes",
        "Price": 125
    }, {
        "Country": "China",
        "Category": "Clothing",
        "Price": 190
    }, {
        "Country": "United States",
        "Category": "Aircraft",
        "Price": 406
    }, {
        "Country": "United States",
        "Category": "Bikes",
        "Price": 85
    }, {
        "Country": "United Kingdom",
        "Category": "Cars",
        "Price": 21
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Price": 666
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Price": 563
    }, {
        "Country": "United Kingdom",
        "Category": "Bikes",
        "Price": 397
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Price": 800
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Price": 172
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Price": 352
    }, {
        "Country": "United Kingdom",
        "Category": "Aircraft",
        "Price": 540
    }, {
        "Country": "United Kingdom",
        "Category": "Aircraft",
        "Price": 204
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Price": 292
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Price": 901
    }, {
        "Country": "Canada",
        "Category": "Wood",
        "Price": 348
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Price": 725
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Price": 13
    }, {
        "Country": "China",
        "Category": "Wood",
        "Price": 62
    }]
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.