evilfer/react-google-charts

A React Google Charts Wrapper

React Wrapper to Google Charts

A React JS wrapper to make it easy and fun to work with Google Charts.

Installation

npm install react-google-charts

Usage

The library can be used as a simple wrapper to the Google Charts API (Full Detailed Guide) :

 <Chart chartType = "LineChart" data = {this.state.data} options = {this.state.options}  width={"100%"} height={"300px"} graph_id = "linechart_graph"  /> 

Where data and options are the dataTable and options parameters of ChartWrapper

For convenience, you can optionally use the rows and columns parameters and the component will build the data table for the chart.

 <Chart chartType = "LineChart" width={"100%"} height={"300px"} rows = {this.state.rows} columns = {this.state.columns} options = {this.state.options}  graph_id = "linechart_graph"  />  

You can also show and hide columns in the chart by clicking on the legend if you set legend_toggle to true :

 <Chart  chartType = "ScatterChart" width={"100%"} height={"300px"} rows = {this.state.rows} columns = {this.state.columns} options = {this.state.options}  graph_id = "linechart_graph" legend_toggle={true} />  

Examples

The examples directory is the source code of : http://rakannimer.github.io/react-google-charts/

So check it out.

Quick Walkthrough

Initialize from array :

	componentDidMount: function() {

        var options = {
          	title: 'Age vs. Weight comparison',
          	hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          	vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
        	legend: 'none'
        };

	    var data = [
        	['Age', 'Weight'],
        	[ 8,      12],
        	[ 4,      5.5],
        	[ 11,     14],
        	[ 4,      5],
        	[ 3,      3.5],
        	[ 6.5,    7]
        ];
      	this.setState({
        	'data' : data,
        	'options' : options
      });


	},
    render: function() {
        <Chart chartType = "ScatterChart" data = {this.state.data} options = {this.state.options} graph_id = "ScatterChart"  width={"100%"} height={"400px"}  legend_toggle={true} />

    }

Initialize using rows and columns :

	componentDidMount: function() {

        var options = {
          	title: 'Age vs. Weight comparison',
          	hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          	vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
        	legend: 'none'
        };

	     var rows = [
        	[ 8,      12],
        	[ 4,      5.5],
        	[ 11,     14],
        	[ 4,      5],
        	[ 3,      3.5],
        	[ 6.5,    7]
        ];

        var columns = [
			{
				'type': 'number',
				'label' : 'Age'
			}, 
			{
				'type' : 'number',
				'label' : 'Weight'
			}
		];

      	this.setState({
        	'rows' : rows,
            'columns' : columns,
        	'options' : options
      });


	},
    render: function() {
        <Chart chartType = "ScatterChart" rows = {this.state.rows} columns = {this.state.columns} options = {this.state.options} graph_id = "ScatterChart"  width={"100%"} height={"400px"}  legend_toggle={true} />

    }

Listen to chart events

Set the chart-specific events you want to listen to and the corresponding callback. The callback has the component as an argument.

	componentDidMount: function() {
		var chart_events = [
        {
        	eventName : 'onmouseover',
            callback  : function(Chart) { 
                // Returns Chart so you can access props and  the ChartWrapper object from chart.wrapper
                console.log("mouseover the chart"); 
            }
        }
        ];

	},
    render: function() {
        <Chart chartType = "ScatterChart" rows = {this.state.rows} columns = {this.state.columns} options = {this.state.options} graph_id = "ScatterChart"  width={"100%"} height={"400px"} chartEvents = {chart_events} />

    }

Development

Fork and clone

npm install

gulp 

Will browserify and reactify the files, put them in the dist folder and serve them on localhost:8000 with livereload on changes

gulp dist

Will browserify and reactify the files, uglify them and put them in the dist folder.

Examples :

git clone https://github.com/RakanNimer/react-google-charts/
cd react-google-charts && cd examples
npm install
gulp