Skip to content

Instantly share code, notes, and snippets.

@hoasung01
Created October 22, 2016 04:29
Show Gist options
  • Save hoasung01/2367eda2b5f0feff545faaf3399d83dc to your computer and use it in GitHub Desktop.
Save hoasung01/2367eda2b5f0feff545faaf3399d83dc to your computer and use it in GitHub Desktop.
post-comment-chart
var PostsCommentsChart = React.createClass({
getInitialState: function() {
return {
data: [],
step: ""
};
},
handleChange: function(data) {
var self = this;
$.ajax({
url: '/posts/set_posts_chart',
type: 'GET',
dataType: 'json',
data: {
start_at: data.start_at,
end_at: data.end_at,
step: data.step
},
success: function(data) {
console.log("Change DatePicker: success");
self.setState({
data: data
})
},
error: function(error){
console.log('something wrong');
}
})
},
radioClick: function(e) {
this.setState({step: e.target.value});
},
render: function(){
return(
<div>
<div className="row">
<div className="title col-md-4">
<h4>Posts/Comments Chart</h4>
</div>
<div className="posts-comments-chart col-md-3">
<DatePicker isChange={this.handleChange}/>
</div>
<div className="col-md-3">
<label className="radio-inline">
<input type="radio" name="optradio" value="day" onChange={this.radioClick}/>Day
</label>
<label className="radio-inline">
<input type="radio" name="optradio" value="week" onChange={this.radioClick}/>Week
</label>
<label className="radio-inline">
<input type="radio" name="optradio" value="month" onChange={this.radioClick}/>Month
</label>
</div>
</div>
<div className="row">
<div className="col-md-12">
<div style={{height: 250}} id={this.props.graph_name}></div>
</div>
</div>
</div>
)
},
componentDidMount: function() {
this.handleChange({start_at: "", end_at: ""})
},
componentDidUpdate: function() {
this.drawChart();
},
drawChart: function(){
var arrData = [];
this.state.data.map(function(item) {
arrData.push([item[0], item[1], item[2], item[3], item[4]]);
})
var options = {
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
annotations: {
boxStyle: {
gradient:{
color1: '#547fbb',
color2: '#91d9fc'
}
}
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById(this.props.graph_name)
);
chart.draw(google.visualization.arrayToDataTable(arrData), options);
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment