chartjs

ChartJS : Simple Way to Creating Chart Using HTML5

Posted on

If you’re looking for a library to create charts, I highly recommend ChartJS. Why? ChartJS is a library-based on javascript and HTML5. The main foundation of this library is <canvas> element in HTML5. Yes, ChartJS requires the latest browser which supports HTML5 in full. Please check your browser using OutdatedBrowser.

Recomended : HTML5 Chart

This post will explain the advantages and use ChartJS speedy. First, I want to explain the features and advantages chartjs.

  1. 100% responsive, so you do not have to worry and think about the look of your apps on all devices.
  2. 6 Chart type. You do not have to worry about running out of stock chart type, and your application will be perfect
  3. The size is only 110KB and free library dependencies with other libraries
  4. Fully tooltip, so that you can display a short information.
  5. Etc.

Ok, Please download ChartJS first, then follow the short tutorial below

1. Install ChartJS

Just adding this code in your HTML head, and done. You’re ready to using all ChartJS feature

<script src="Chart.js"></script>

 2.  First Code to Creating Chart

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var data = {
    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: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            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",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var myLineChart = new Chart(ctx).Line(data, options);
</script>

Ok, just it. I recomended you to reading documentation.

Gravatar Image
Web developer, big fan of CakePHP, loving wordpress soo much. You can found him on Google+ and Facebook. Dont forget to follow him on Twitter.