<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://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<table><tr><td style="width: 750px;"><div id="wdr-component"></div></td>
<td><div id="googlechart-container" style="width:750px;height:550px;"></div></td></tr></table>
var pivot = new WebDataRocks({
        container: "#wdr-component",
        toolbar: true,
        report: {
            dataSource: {
                filename: "https://cdn.webdatarocks.com/data/data.csv"
            },
            formats:[
                {maxDecimalPlaces:2}
            ],
            slice:{
                rows:[
                    {"uniqueName": "Category"}
                ],
                columns:[
                    {"uniqueName":"Country"}
                ],
                measures:
                [
                    {"uniqueName":"Price", "aggregation":"average"
                    }
                ]
            }
        },
        reportcomplete: function() {
            pivot.off("reportcomplete");
            pivotTableReportComplete = true;
            createGoogleChart();
        }
    });
    var pivotTableReportComplete = false;
    var googleChartsLoaded = false;

    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(onGoogleChartsLoaded);
    function onGoogleChartsLoaded() {
        googleChartsLoaded = true;
        if (pivotTableReportComplete) {
            createGoogleChart();
        }
    }

    function createGoogleChart() {
        if (googleChartsLoaded) {

            pivot.googlecharts.getData({ type: "area" },
                drawChart,
                drawChart
            );
        }
    }

    function drawChart(_data) {
        var data = google.visualization.arrayToDataTable(_data.data);
 var formatter = new google.visualization.NumberFormat(pivot.googlecharts.getNumberFormat({decimalPlaces: 1})); // change the formatting option and see how the values on the charts are changed
  formatter.format(data, 1); // Apply formatter to the second column 
      
        var options = {
            title: "Average price of products in Category",
            legend: { position: 'top' }
        };

        var chart = new google.visualization.AreaChart(document.getElementById('googlechart-container'));
        chart.draw(data, options);
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.