Skip to content

Latest commit

 

History

History
142 lines (108 loc) · 9.72 KB

class12.md

File metadata and controls

142 lines (108 loc) · 9.72 KB

Chart.js, Canvas

Charts

what is Chart.js?

Chart.js is a community maintained open-source library "in gitHub" that helps you easily visualize data using JavaScript. It’s similar to Chartist and Google Charts. It supports 8 different chart types (including bars, lines, & pies), and they’re all responsive. In other words, you set up your chart once, and Chart.js will do the heavy-lifting for you and make sure that it’s always legible (for example by removing some uncritical details if the chart gets smaller).

In a gist, this is what you need to do to draw a chart with Chart.js:

  • Define where on your page to draw the graph.

  • Define what type of graph you want to draw.

  • Supply Chart.js with data, labels, and other options.

and you’ll get a beautiful, responsive, graph!

Image

Step 1: Add Chart.js

The first thing we need to do is download Chart.js. Copy the Chart.min.js out of the unzipped folder and into the directory you’ll be working in. Then create a new html page and import the script:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <script src='Chart.min.js'></script>
    </head>
    <body>
    </body>
</html>

Step 2 :Prepare a place in your HTML to render the chart

For this project, you should prepare a simple playground with a HTML file with only the essentials. Download the starting point and open the folder, and you should see three files:

  • index.html
  • styles.css
  • app.js

Step 3: Prepare the data

The data you have and you want to add it into the chart

Step 4: Drawing a line chart

To draw a line chart, the first thing we need to do is create a canvas element in our HTML in which Chart.js can draw our chart. So add this to the body of our HTML page:

<canvas id="buyers" width="600" height="400"></canvas>

The last thing we need to prepare before we can start visualizing our data is to define an area in our HTML where we want to draw the graph. For Chart.js you do this by adding a canvas element, and setting width and height to define the proportions of your graph.

Canvas element

Then, using that canvas element, we create a line chart (type: 'line'), and pass along some of our data.

  • labels: years sets our array of years (that we created earlier) for the labels along the x-axis, and
  • data: africa uses our africa variable to draw the line.

For every line that we want to create, we add another object to the datasets array. On every object we can make a range of adjustments, we can not only pass the data to draw the line, but we can change the name, change the beavior, and change the looks of the line.

The great things about Chart.js are that it’s simple to use and really very flexible. Plus, once you’ve mastered the basics here, you’ll discover that there are tons of options listed in the documentation.

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

Drawing a Path

Drawing a path: A path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color. A path, or even a subpath, can be closed. To make shapes using paths, we take some extra steps:

  1. First, you create the path. Then you use drawing commands to draw into the path.Once the path has been created, you can stroke or fill the path to render it.

Colors If we want to apply colors to a shape, there are two important properties we can use:

  1. fillText(text, x, y, width, height) Fills a given text at the given (x,y) position. Optionally with a maximum width to draw.

  2. strokeRect(text, x, y, width, height) Strokes a given text at the given (x,y) position. Optionally with a maximum width to draw.

  3. clearText(x, y, width, height) Clears the specified rectangular area, making it fully transparent.

Styling text

  • font = value The current text style being used when drawing text. This string uses the same syntax as the CSS font property. The default font is 10px sans-serif.
  • textAlign = value Text alignment setting. Possible values: start, end, left, right or center. The default value is start.
  • textBaseline = value Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic.
  • direction = value Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.

Image2

Colors

  • fillStyle = color Sets the style used when filling shapes.
  • strokeStyle = color Sets the style for shapes' outlines.