Chart Bar VI
Chart Bar VI
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">
    $(document).ready(function () {
        var uri = "https://demos.shieldui.com/weather";
        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
                    },
                    axisY: {
                        title: {
                            text: "Temperatures in C"
                        }
                    },
                    axisX: {
                        axisType: 'category',
                        categoricalValues: ['Tomorrow', 'after 2 days', 'after 3 days', 'after 4 days', 'after 5 days'],
                        title: {
                            text: "5 days forecast for Washington, DC"
                        }
                    },
                    seriesSettings: {
                        bar: {
                            stackMode: 'normal'
                        }
                    },
                    dataSeries: [{
                        seriesType: 'bar',
                        collectionAlias: "Maximum Temp (C)",
                        data: [
                            parseInt(r.data.weather[0].tempMaxC, 10),
                            parseInt(r.data.weather[1].tempMaxC, 10),
                            parseInt(r.data.weather[2].tempMaxC, 10),
                            parseInt(r.data.weather[3].tempMaxC, 10),
                            parseInt(r.data.weather[4].tempMaxC, 10)
                        ]
                    }, {
                        seriesType: 'bar',
                        collectionAlias: "Minimum Temp (C)",
                        data: [
                            parseInt(r.data.weather[0].tempMinC, 10),
                            parseInt(r.data.weather[1].tempMinC, 10),
                            parseInt(r.data.weather[2].tempMinC, 10),
                            parseInt(r.data.weather[3].tempMinC, 10),
                            parseInt(r.data.weather[4].tempMinC, 10)
                        ]
                    }]
                });
            }
        }); // end jQuery.get()            
    });
</script>

</body>