Chart Line VIII
Chart Line VIII
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>
<div class="console">
    <div class="consoleheader">
        <div class="consoletitle">EVENT LOG <span id="clearlogger">clear</span></div>
    </div>
    <div id="eventlogger" class="consolecontent"></div>
</div>
<script type="text/javascript">
    jQuery(function ($) {
        function log(text) {
            var logger = $("#eventlogger");
            logger
                .append("<p>" + text + "</p>")
                .scrollTop(logger[0].scrollHeight);
        }
        $("#clearlogger").click(function () {
            $("#eventlogger").html("");
        });
        $("#chart").devuiChart({
            theme: "light",
            primaryHeader: {
                text: "Incidents Percentage"
            },
            exportOptions: {
                image: false,
                print: false
            },
            axisY: [{
                title: {
                    text: "Percent Values",
                    style: {
                        color: '#4DB0F5'
                    }
                },
                axisTickText: {
                    style: {
                        color: '#4DB0F5'
                    }
                }
            }],
            seriesSettings: {
                line: {
                    enablePointSelection: true
                }
            },
            tooltipSettings: {
                axisMarkers: {
                    enabled: true,
                    mode: 'x',
                    width: 1,
                    zIndex: 3
                }
            },
            dataSeries: [{
                seriesType: 'line',
                collectionAlias: 'Households',
                data: [1.264, 0.473, 2.184, 0.667, 3.177, 0.189, 0.180, 0.183, 0.188, 0.160, 0.176, 0.178]
            }, {
                seriesType: 'line',
                collectionAlias: 'Industry',
                data: [0.103, 0.105, 0.112, 0.111, 0.102, 1.099, 1.110, 2.113, 1.117, 2.119, 1.123, 3.117]
            }],
            events: {
                seriesClick: function (args) {
                    log("seriesClick on series " + args.dataSeries.collectionAlias);
                },
                pointSelect: function (args) {
                    log("pointSelect on series " + args.dataSeries.collectionAlias + ", point " + args.point.name);
                }
            }
        });
    });
</script>
<style>
    .console
    {
        display: inline-block;
        width: 100%;
        height: 200px;
        border: solid 1px #555573;
        overflow: hidden;
        margin-top: 30px;
    }
    .consoleheader
    {
        width: 100%;
        height: 30px;
        background-color: silver;
        color: #555573;
        font-weight: bold;
        overflow: hidden;
    }
    .consoletitle
    {
        margin: 5px;
    }
    .consolecontent
    {
        width: 100%;
        height: 170px;
        text-align: left;
        overflow: auto;
    }
        .consolecontent p
        {
            font-style: italic;
        }
    #clearlogger
    {
        float: right;
        color: blue;
        cursor: pointer;
    }
</style>

</body>