Super Cool HTML5 Canvas chart app chart.js custom prompt line chart
Effect Preview
Instance Code
<div class= "Htmleaf-container" > <div class= "htmleaf-content" > <div style= "width:3 0%;margin:0 auto; " > <div> <canvas id= "Canvas" height= "width=" ></canvas& Gt </div> </div> </div> </div> <script src= "/api/jq/chart/ Js/chart.js "></script> <script> var randomscalingfactor = function () {RET Urn Math.Round (math.random () * 100)}; var linechartdata = {Labels: ["January", "February", "March", "April", "may", "June", "July"], Datasets: [{label: "My first DataSet", FillColor: " RGBA (220,220,220,0.2) ", Strokecolor:" Rgba (220,220,220,1) ", Pointcolor:" RGB A (220,220,220,1) ", POIntstrokecolor: "#fff", Pointhighlightfill: "#fff", Pointhighlightstroke: "R GBA (220,220,220,1) ", Data: [Randomscalingfactor (), Randomscalingfactor (), Randomscalingfactor (), RA Ndomscalingfactor (), Randomscalingfactor (), Randomscalingfactor (), Randomscalingfactor ()]}, {label: "My Second DataSet", FillColor: "Rgba (151,187,205,0.2)", Strokecolor: "Rgba (151,187,205,1)", Pointcolor: "Rgba (151,187,205,1)", Pointstrokecolor: "#fff", Pointhighlightfill: "#fff", point Highlightstroke: "Rgba (151,187,205,1)", Data: [Randomscalingfactor (), Randomscalingfactor (), random Scalingfactor (), Randomscalingfactor (), Randomscalingfactor (), Randomscalingfactor (), Randomscalingfactor ()] } ] } window.onload = function () {var ctx = document.getElementById ("Canvas"). Getcontex T ("2d"); Window.myline = new Chart (CTX). Line (Linechartdata, {responsive:true}); } </script>
Super Cool HTML5 Canvas chart app chart.js custom prompt line chart