We are giving you line chart demo usign html,css and canvas jquery. This is the best plugin for line chart. this canvasjs plugin also provide animation when chart display. this canvasjs can't take time in loading. canvasjs is most popular plugin for line chart.

We allows to free snippets of javascript line chart example , you can download full code of canvasjs line chart example layout. Here in this post i will give you example of line chart jquery snippet and you will get simple code of html, css and jquery. In canvasjs chart options snippet i give you three tab with html, css and js, you can easily get code of html line graph code layout.


<!doctype html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script> </head> <style type="text/css"> .chart{ height: 400px; width: 80%; margin: 0 auto; margin-top: 100px; } </style> <body> <div id="lineChartContainer" class="chart"></div> <script type="text/javascript"> window.onload = function () { var lineChartOptions = { animationEnabled: true, theme: "light2", title:{ text: "Real vs Projected Sales" }, axisX:{ valueFormatString: "DD MMM" }, axisY: { title: "Number of Sales", suffix: "K", minimum: 30 }, toolTip:{ shared:true }, legend:{ cursor:"pointer", verticalAlign: "bottom", horizontalAlign: "left", dockInsidePlotArea: true, itemclick: toogleDataSeries }, data: [{ type: "line", showInLegend: true, name: "Projected Sales", markerType: "square", xValueFormatString: "DD MMM, YYYY", color: "#F08080", yValueFormatString: "#,##0K", dataPoints: [ { x: new Date(2018, 2, 1), y: 63 }, { x: new Date(2018, 2, 2), y: 69 }, { x: new Date(2018, 2, 3), y: 65 }, { x: new Date(2018, 2, 4), y: 70 }, { x: new Date(2018, 2, 5), y: 71 }, { x: new Date(2018, 2, 6), y: 65 }, { x: new Date(2018, 2, 7), y: 73 }, { x: new Date(2018, 2, 8), y: 96 }, { x: new Date(2018, 2, 9), y: 84 }, { x: new Date(2018, 2, 10), y: 85 }, { x: new Date(2018, 2, 11), y: 86 }, { x: new Date(2018, 2, 12), y: 94 }, { x: new Date(2018, 2, 13), y: 97 }, { x: new Date(2018, 2, 14), y: 86 }, { x: new Date(2018, 2, 15), y: 89 } ] }, { type: "line", showInLegend: true, name: "Real Sales", lineDashType: "dash", yValueFormatString: "#,##0K", dataPoints: [ { x: new Date(2018, 2, 1), y: 60 }, { x: new Date(2018, 2, 2), y: 57 }, { x: new Date(2018, 2, 3), y: 51 }, { x: new Date(2018, 2, 4), y: 56 }, { x: new Date(2018, 2, 5), y: 54 }, { x: new Date(2018, 2, 6), y: 55 }, { x: new Date(2018, 2, 7), y: 54 }, { x: new Date(2018, 2, 8), y: 69 }, { x: new Date(2018, 2, 9), y: 65 }, { x: new Date(2018, 2, 10), y: 66 }, { x: new Date(2018, 2, 11), y: 63 }, { x: new Date(2018, 2, 12), y: 67 }, { x: new Date(2018, 2, 13), y: 66 }, { x: new Date(2018, 2, 14), y: 56 }, { x: new Date(2018, 2, 15), y: 64 } ] }] }; $("#lineChartContainer").CanvasJSChart(lineChartOptions); function toogleDataSeries(e){ if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible){ e.dataSeries.visible = false; }else{ e.dataSeries.visible = true; } e.chart.render(); } } </script> </body> </html>

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:




Tags:- chart3

Random Post


Random Blog