Chart Line IX
Chart Line IX
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 limit = 700;
            var data = [];
            var dataSeries = { seriesType: "line" };
            var perf = [];
            for (var i = 0; i < limit; i += 1) {
                perf.push({
                    x: i,
                    y: Math.random(),
                });
            }
            $("#chart").devuiChart({
                theme: "light",
                exportOptions: {
                    image: false,
                    print: false
                },
                tooltipSettings: {
                    axisMarkers: {
                        enabled: true,
                        mode: 'x',
                        width: 1,
                        zIndex: 3
                    }
                },
                primaryHeader: {
                    text: "Performance Metrics"
                },
                axisY: {
                    title: {
                        text: "Performance fluctuation"
                    }
                },
                dataSeries: [{
                    seriesType: 'line',
                    pointMark: {
                        enabled: false
                    },
                    collectionAlias: "Performance",
                    data: perf
                }]
            });
        });
    </script>

</body>