Back

Categories

Categorise data based on different fields.




Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

        <div>
            <div id="demo" style="float:right; width: 60%">
            </div>
            <div style="float:left; width: 30%">
                <label for="cc" style="margin:5px"><input style="margin-right:5px" type="radio" id="cc" name="c" value="atoutside" checked="true">Categorise based on continents and countries</label><br />
                <label for="cy" style="margin:5px"><input style="margin-right:5px" type="radio" id="cy" name="c" value="atinside">Categorise based on continents and years</label><br />
                <label for="c" style="margin:5px"><input style="margin-right:5px" type="radio" id="c" name="c" value="awinside">Categorise based on countries</label><br />
            </div>
        </div>
        <div style="clear:both;"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

        var chart = new PieChart({
            container: document.getElementById("demo"),
            area: { height: null },
            data:
            {
                url: "/dvsl/data/pie-chart/continental-data.json",
                autoCategories: ["continent", "country"],
                sortField: "continent"
            }
        });

        document.getElementById("cc").addEventListener("click", function () {
            var s = chart.setPie([""], 0);
            chart.updateSettings({
                data: {
                    autoCategories: ["continent", "country"],
                    sortField: "continent"
                }
            });
        });

        document.getElementById("cy").addEventListener("click", function () {
            var s = chart.setPie([""], 0);
            chart.updateSettings({
                data: {
                    autoCategories: ["continent", "year"],
                    sortField: "continent"
                }
            });
        });

        document.getElementById("c").addEventListener("click", function () {
            var s = chart.setPie([""], 0);
            chart.updateSettings({
                data: {
                    autoCategories: ["country"],
                    sortField: "country"
                }
            });
        });

Data

Data 
//Data too large to output
Download Data