Chart Line III
Chart Line III
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 householdPrices = [                
                {x:'2001',y:0.164},
                {x:'2002',y:0.173},
                {x:'2003',y:0.184},
                {x:'2004',y:0.167},
                {x:'2005',y:0.177},
                {x:'2006',y:0.189},
                {x:'2007',y:0.180},
                {x:'2008',y:0.183},
                {x:'2009',y:0.188},
                {x:'2010',y:0.160},
                {x:'2011',y:0.176},
                {x:'2012',y:0.178}
            ];
            var industryPrices = [                
                {x:'2001',y:0.103},
                {x:'2002',y:0.105},
                {x:'2003',y:0.112},
                {x:'2004',y:0.111},
                {x:'2005',y:0.102},
                {x:'2006',y:0.099},
                {x:'2007',y:0.110},
                {x:'2008',y:0.113},
                {x:'2009',y:0.117},
                {x:'2010',y:0.119},
                {x:'2011',y:0.123},
                {x:'2012',y:0.117}
            ];                          
            $("#chart").devuiChart({
                theme: "light",
                exportOptions: {
                    image: false,
                    print: false
                },
                primaryHeader: {
                    text: "Electricity prices"
                },
                chartLegend: {
                    align: 'right',
                    verticalAlign: 'top',
                    renderDirection: 'vertical'
                },
                seriesSettings: {
                    line: {
                        enablePointSelection: true,
                        pointMark: {
                            activeSettings: {
                                pointSelectedState: {
                                    drawWidth: 4,
                                    drawRadius: 4
                                }
                            }
                        }
                    }
                },
                axisY: {
                    title: {
                        text: "Price (EUR per kWh)"
                    }
                },
                dataSeries: [{
                    seriesType: 'line',
                    collectionAlias: "Household Prices",
                    data: householdPrices
                }, {
                    seriesType: 'line',
                    collectionAlias: "Industry Prices",
                    data: industryPrices
                }]
            });
        });
    </script>

</body>