Chart Bar XVII
Chart Bar XVII
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 () {
            $("#chart").devuiChart({
                theme: "light",
                primaryHeader: {
                    text: "Internet usage statistics"
                },
                axisX: {
                    axisType: "datetime"
                },
                axisY: {
                    title: {
                        text: "Dollars per gallon"
                    }
                },
                dataSeries: [{
                    seriesType: "bar",
                    dataStart: Date.UTC(2010, 0, 1),
                    dataStep: 24 * 3600 * 1000, // one day
                    collectionAlias: "Price",
                    data: [3.923, 3.973, 3.996, 3.997, 3.98, 3.929, 3.889, 3.849, 3.814,
                           3.773, 3.728, 3.671, 3.629, 3.589, 3.494, 3.415, 3.469, 3.485,
                           3.554, 3.568, 3.702, 3.779, 3.803, 3.837, 3.903, 3.907, 3.939,
                           3.889, 3.866, 3.914, 3.886, 3.756, 3.638, 3.563, 3.518, 3.497,
                           3.505, 3.463, 3.419, 3.324, 3.328, 3.369, 3.373, 3.377, 3.386,
                           3.427, 3.604, 3.677, 3.812, 3.851, 3.826, 3.779, 3.764, 3.746,
                           3.714, 3.676, 3.611]
                }]
            });
        });
    </script>

</body>