Chart Donut III
Chart Donut III
View Demo

Insert it in <head>

<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />

<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>

Use Components

<body class="theme-light">

<div id="chart"></div>
<script type="text/javascript">
    $(function () {
        var uri = "/devui/demo/data/weather.json";
        uri = encodeURI(uri);
        jQuery.get(uri, function (r) {
            if (r.data.error) {
                alert(r.data.error[0].msg);
            }
            else {
                $("#chart").devuiChart({
                    theme: "light",
                    primaryHeader: {
                        text: "Remote Data Access",
                    },
                    exportOptions: {
                        image: false,
                        print: false
                    },
                    seriesSettings: {
                        donut: {
                            enablePointSelection: true
                        }
                    },
                    tooltipSettings: {
                        customPointText: "{point.collectionAlias}: {point.y}"
                    },
                    dataSeries: [{
                        seriesType: "donut",
                        collectionAlias: "Maximum Temperature",
                        data: [
                            ["Tomorrow", parseInt(r.data.weather[0].tempMaxC, 10)],
                            ["After 2 days", parseInt(r.data.weather[1].tempMaxC, 10)],
                            ["After 3 days", parseInt(r.data.weather[2].tempMaxC, 10)],
                            ["After 4 days", parseInt(r.data.weather[3].tempMaxC, 10)],
                            ["After 5 days", parseInt(r.data.weather[4].tempMaxC, 10)]
                        ]
                    }]
                });
            }
        });    
    });
</script>

</body>