Chart Range V
Chart Range V
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 style="text-align:center;">
    <div id="quarterChart" class="chart"></div>
    <div id="detailChart" class="chart right"></div>
</div>
<script type="text/javascript">
    var performanceData = [
        { quarter: 0, min: 3, max: 9, values: [12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67] },
        { quarter: 1, min: 12, max: 23, values: [3, 9, 12, 14, 22, 32, 45, 12, 67, 45, 55, 7] },
        { quarter: 2, min: 1, max: 17, values: [23, 19, 11, 134, 242, 352, 435, 22, 637, 445, 555, 57] },
        { quarter: 3, min: -3, max: 12, values: [13, 19, 112, 114, 212, 332, 435, 132, 67, 45, 55, 7] }
    ];
    $(function () {
        $('#quarterChart').devuiChart({
            theme: "light",
            exportOptions: {
                image: false,
                print: false
            },
            seriesSettings: {
                rangebar: {
                    enablePointSelection: true
                }
            },
            tooltipSettings: {
                customPointText: 'Low Value: <b>{point.low}</b><br/>High Value:<b>{point.high}</b>'
            },
            axisY: {
                title: {
                    text: 'Quarter Overview'
                }
            },
            axisX: {
                categoricalValues: ['Q1', 'Q2', 'Q3', 'Q4']
            },
            primaryHeader: {
                text: 'Quarterly Performance'
            },
            dataSeries: [{
                seriesType: 'rangebar',
                collectionAlias: 'Low/High',
                data: $.map(performanceData, function (item, index) {
                    return [[item.min, item.max]];
                })
            }],
            events: {
                pointSelect: function (args) {
                    var detailData = performanceData[args.point.x].values,
                        detailChartElement = $('#detailChart'),
                        detailChart = detailChartElement.swidget(),
                        initialOptions = detailChart.initialOptions,
                        headerText = args.point.name + ' Performance';
                    detailChart.destroy();
                    detailChartElement.devuiChart($.extend(initialOptions, {
                        primaryHeader: {
                            text: headerText
                        },
                        dataSeries: [{
                            seriesType: 'line',
                            collectionAlias: 'Q Data',
                            data: detailData
                        }]
                    }));
                }
            }
        });
        $('#detailChart').devuiChart({
            theme: "light",
            exportOptions: {
                image: false,
                print: false
            },
            axisY: {
                title: {
                    text: 'Break-Down for selected quarter'
                }
            },
            primaryHeader: {
                text: 'Q1 Performance'
            },
            dataSeries: [{
                seriesType: 'line',
                collectionAlias: 'Q Data',
                data: performanceData[0].values
            }]
        });
    });
</script>

</body>