gistfile1.js

/** @jsx React.DOM */
var React = require('react');
var _ = require('lodash');
var Router = require('react-router');
var Link = Router.Link;

var Grapher = React.createClass({

	getDefaultProps: function() {
		return {
			graphColors: {
				signups: 'rgba(26, 194, 28, 0)',
				comments: 'rgba(137, 133, 169, 0)',
				flags: 'rgba(237, 10, 10, 0)',
				pageviews: 'rgba(28, 125, 231, 0)',
				submissions: 'rgba(240, 140, 78, 0)',
				hits: 'rgba(80, 208, 17, 0)'
			}
		};
	},
	getInitialState: function() {
		return {
			data: [],
			graphData: [],
			canvasNode: ''
		};
	},

	prepareData: function(graphInterval, graphParams) {
		if (!graphInterval) {
			console.error('nothing to get', graphInterval);
			return;
		}

		//Get data from combostats and save it in a state
		//check the data we get back with props we care about (this.props.liveStats)
		//push to data as array
		var self = this;
		$.getJSON('API URL HERE' + graphInterval, function(jsonData) {
			self.setState({data: jsonData});

			//construct graph data
			var graphData = self.constructMultipleDataSet(graphParams, jsonData);
			self.setState({graphData: graphData});
		});
	},

	constructMultipleDataSet: function(charts, jsonData) {
		//Accepts an array of charts to be constructed into the dataset to render multiple lines in a single chart
		if (!charts) {
			console.error('No chart parameters found, dont know what to graph', charts);
			return null;
		}

		var data = {
			labels: [],
			datasets: []
		};

		//colorSchema
		var graphColors = this.props.graphColors;

		var chartParams;	//single chart param during loop

		//Go through each chart params
		_.each(charts, function(chartCategory, key) {

			chartParams = jsonData[chartCategory];
			//Get x axis (date label)
			var tempDateLabel = [];

			//get y axis (data count)
			var tempDataSets = [];

			_.each(chartParams, function(chartParam, key) {
				//push into date
				tempDateLabel.unshift(chartParam.date);
				tempDataSets.unshift(chartParam.count);
			});

			data.labels = tempDateLabel;
			data.datasets.push({
				label: chartCategory,
				fillColor: graphColors[chartCategory],
				strokeColor: graphColors[chartCategory].replace('0)', '1)'),	//for opacity
				pointColor: graphColors[chartCategory],
				pointHighlightStroke: "#000",
				data: tempDataSets
			});
		});

		return data;
	},

	createGraph: function() {
		//we need to constantly check when the data has been received from server
		//once datasets's array is populated, and has data, then we can start creating a new graph
		if (this.state.graphData.datasets && this.state.graphData.datasets.length > 0) {
			var data = this.state.graphData;
			var canvas = this.state.canvasNode;

			var graphType = this.props.graphType;

			//Different types of graphs
			if (graphType === 'line') {
		  	new Chart(canvas).Line(data, {
			    //Boolean - Whether the line is curved between points
			    bezierCurve : false,
			    // responsive: true,	//when responsive is on, graph wont show for some reason
			    // maintainAspectRatio: true
			  });
			}

		}
	},

	constructLabels: function() {
		var graphLabels = this.props.graphParams.map(function(graphParam) {

			var legendBoxStyle = 'fa fa-circle ' + graphParam;
			return (
				<span className="graph-legend">
					<i className={legendBoxStyle} /> {graphParam}
				</span>
			)
		});

		return graphLabels;
	},

	componentDidMount: function() {
		this.prepareData(this.props.interval, this.props.graphParams);

		var canvas = this.refs.myCanvas.getDOMNode().getContext("2d");
		this.setState({canvasNode: canvas});
	},

	render: function () {
		this.createGraph();

		//Graph Labels
		var graphLabels = this.constructLabels();

	    return (
	        <div>
						<canvas ref="myCanvas" width={this.props.width} height={this.props.height} />
						<div className="graph-label">
							{graphLabels}
						</div>
	        </div>
	    );
	}

});