https://github.com/joshdover/charts.js

A jQuery plugin to make using Google Charts super simple, without losing any customizability.
https://github.com/joshdover/charts.js

Last synced: about 1 month ago
JSON representation

A jQuery plugin to make using Google Charts super simple, without losing any customizability.

• Host: GitHub
• URL: https://github.com/joshdover/charts.js
• Owner: joshdover
• Created: 2012-10-03T21:58:04.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2012-10-16T02:27:31.000Z (about 12 years ago)
• Last Synced: 2023-03-25T01:45:01.483Z (almost 2 years ago)
• Language: CoffeeScript
• Homepage: http://gerfuls.github.com/charts.js
• Size: 599 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Charts.js 0.3

A jQuery plugin to make using Google Charts super simple, without losing customizability.

## Basic Setup

Include the appropriate libraries in your `` tag

  

```html

    

    

```

Load the Google Charts Library

```html

// Load the visualization library

google.load('visualization', '1.0', {'packages':['corechart']});

```

On the Google Charts callback, draw your charts using Charts.js

```html

google.setOnLoadCallback(makeCharts);

function makeCharts() {

  $("#chart-bar").chart({

    chartType:'bar',

    columnTitles:['Answer', 'Frequency'],

    jsonData: [["1",1],

              ["2",4],

              ["3",1],

              ["4",3]]

  });

}

```

## Specifying Data

You may either pass json directly upon creating the chart, or give the chart a url to make an AJAX request for the data. Currently, all data injected into the chart using the `google.visualization.arrayToDataTable()` method which you can read about [here](https://google-developers.appspot.com/chart/interactive/docs/datatables_dataviews#arraytodatatable).

### Passing JSON

JSON needs to be in a format where each row represents a data point, and each column represents a series. Column titles may be included in either the JSON or the `columnTitles` attribute. Column data types are implicit.

```javascript

$('#chart').chart({

  chartType:'bar',

  columnTitles:['Answer', 'Frequency'],

  jsonData: [

              ["1",1],

              ["2",4],

              ["3",1],

              ["4",3]

            ]

});

```

### Passing a URL

Make sure the JSON returned by the server matches the format above.

```javascript

$('#chart').chart({

  chartType:'bar',

  columnTitles:['Answer', 'Frequency'],

  url: 'demo.json'

});

```

If you have used a URL for data, you can ask the chart to refresh its data by calling `update`.

```javascript

$('#chart').chart('update');

```

### Column Titles

You may either specify the column titles of each series in your array using the `columnTitles` item, or they may be included in the JSON you pass in, or by the data returned by the server at the URL. 

## Customizing

Google Charts allows for tons of customization, you and Charts.js supports all of these customization options. 

### Chart Types

Charts.js supports `'bar'`, `'column'`, `'line'`, `'pie'`, `'combo'`, `'area'`, `'bubble'`, `'candlestick'`, and `'scatter'` graphs. Simply specify the type of graph you want on creation. You can also change it later and redraw the chart to see the changes.

```javascript

// specify at creation

$('#chart').chart({

  chartType:'bar',

  columnTitles:['Answer', 'Frequency'],

  url: 'demo.json'

});

// or change it later

$('#chart').data('chart').chartType = 'bar';

// but don't forget to redraw the chart

$('#chart').chart('draw');

```

### Google Charts Options

You may specify any options from the [Google Charts API](https://google-developers.appspot.com/chart/interactive/docs/customizing_charts) by passing them to the `options` item.

```javascript

$('#chart').chart({

  chartType:'bar',

  url: 'demo.json',

  options: {

    height: 600,

    width: 1200

  }

});

```

Options can also be changed after creation by updating the `options` object and redrawing the chart

```javascript

$('#chart').data('chart').options.height = 1000;

$('#chart').chart('draw');

```

# Changelog

## 0.3

* Fixed animating of charts when data is changed. Animations will work on `$('#chart').chart('update')`. Animations can be customized by changing `options.animation` item.

* Fixed chainability issues with jQuery

## 0.2

* Added all chart types included in the Google Charts `corechart` library

* Added ability to call `draw` to update chart to reflect changed options rather than using `update` for less data polling.