https://github.com/rakannimer/dancing-charts

Animating Google Charts with React
https://github.com/rakannimer/dancing-charts

Last synced: 15 days ago
JSON representation

Animating Google Charts with React

• Host: GitHub
• URL: https://github.com/rakannimer/dancing-charts
• Owner: rakannimer
• Created: 2015-06-20T10:08:24.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2019-05-03T10:49:00.000Z (over 5 years ago)
• Last Synced: 2024-04-09T11:29:18.935Z (7 months ago)
• Language: JavaScript
• Homepage: http://rakannimer.github.io/dancing-charts/
• Size: 1.32 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dancing Charts

Animated Google Charts with React.

## Usage

The Component reads the state of the chart from a Google Spreadsheet. An example one is provided, but you can change it from the user interface.

The SpreadSheet should have 2 sheets :

	1- Data

		The first row should contain the columns in String format

		And each following row represents a state of the graph at a given frame

	2- Options

		The first row should contain the columns in String format

		The second the color of each.

## Demo & Examples

Live demo: [RakanNimer.github.io/dancing-charts](http://RakanNimer.github.io/dancing-charts/)

To build the examples locally, run:

```

npm install

npm start

```

Then open [`localhost:8000`](http://localhost:8000) in a browser.

## Development

Fork the repo and clone it.

```

npm install

```

To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).

## Credits

[tabletop](https://github.com/jsoma/tabletop) to grab the Chart data from Google Spreadsheets.

[Bouncing css Loader](http://codepen.io/dicson/pen/vOxZjM)

[React Component Generator](https://github.com/JedWatson/generator-react-component)