Chart.js

A simple chart component that takes in json data and displays it in various chart styles using Chart.js.

Examples

7-day forecast

City: Columbus

Single data

Multiple data

Components

  • chart

    A chart that illustrates a single y value across the x axis.

    Attributes

    Name Description Type Example
    data an array of key value pair
         		Array
         		[{"country":"France","population":"67.97"},{"country":"Germany","population":"83.8"},{"country":"Japan","population":"125.1"},{"country":"Canada","population":"38.93"}]
    type chart type: line, bar, pie, donut, bubble, area, radar. String
    elementid id unique to the chart component String

  • multi-chart

    A chart that illustrates a multiple y value across the x axis.

    Attributes

    Name Description Type Example
    data an array of arrays of key value pair
         		Array
         		[[{"year":2000,"count":16},{"year":2010,"count":40},{"year":2020,"count":51}],
    [{"year":2000,"count":16},{"year":2010,"count":40},{"year":2020,"count":51}],
    [{"year":2000,"count":16},{"year":2010,"count":40},{"year":2020,"count":51}],]
    datalabels an array that corresponds to each elemenr in the data array Array
         		["France","Germany","Japan","Canada"]
    type chart type: line, bar, pie, donut, bubble, area, radar. String
    elementid id unique to the chart component String

Changelog

  • v1.0.1

    Apr 13, 2014

    [Bug Fixed]
    - Charts are now more responsive on smaller screens.
    - Attributes tables in the home page are now also responsive.

  • v1.0.0

    Apr 13, 2014

    Initial launch of the Chart.js package.
    Added chart and multi-chart components.