Create line chart and set data - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Create line chart and set data

Demo Code

ResultView the demo in separate window 

<html>
   <head></head>
   <body> 
      <h2>Example of Line Graph</h2> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
      <div> 
         <canvas id="chartData" width="600" height="400"></canvas> 
      </div> 
      <script>
    var monthsData = {/*from  w w  w . j a  v a 2 s  .com*/
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
        {
            fillColor: "rgba(172,194,132,0.4)",
            strokeColor: "#ACC26D",
            pointColor: "#fff",
            pointStrokeColor: "#9DB86D",
            data: [203, 156, 99, 251, 305, 247]
        }
        ]
    };
    var months = document.getElementById("chartData").getContext("2d");
    new Chart(months).Line(monthsData);

      </script>  
   </body>
</html>

Related Tutorials