-
-
Save rakannimer/327a347411253806e5530544c3a4f7f5 to your computer and use it in GitHub Desktop.
import React from 'react' | |
import {render} from 'react-dom' | |
import {Chart} from 'react-google-charts' | |
export default class App extends React.Component { | |
constructor(props) { | |
super(props) | |
this.state = { | |
data: [], | |
options: {} | |
}; | |
} | |
componentDidMount() { | |
let options = { | |
title: 'Age vs. Weight comparison', | |
hAxis: {title: 'Age', minValue: 0, maxValue: 15}, | |
vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, | |
legend: 'none', | |
}; | |
let data = [ | |
['Age', 'Weight'], | |
[ 8, 12], | |
[ 4, 5.5], | |
[ 11, 14], | |
[ 4, 5], | |
[ 3, 3.5], | |
[ 6.5, 7] | |
]; | |
let chart_events = [ | |
{ | |
eventName : 'ready', | |
callback : (Chart) => { | |
// Returns Chart so you can access props and the ChartWrapper object from chart.wrapper | |
this.setState({chartImageURI: Chart.chart.getImageURI()}) | |
} | |
} | |
]; | |
this.setState({ | |
'data' : data, | |
'options' : options, | |
'chart_events' : chart_events | |
}); | |
} | |
render() { | |
return <div> | |
<h2>Welcome to React</h2> | |
<Chart chartType = "ScatterChart" | |
data = {this.state.data} | |
options = {this.state.options} | |
graph_id = "ScatterChart" | |
width={"100%"} | |
height={"400px"} | |
legend_toggle={true} | |
chartPackage= {['controls']} | |
chartEvents = {this.state.chart_events} | |
ref={(ref) => this.GoogleChart = ref} | |
/> | |
<div onClick={()=>{ | |
this.setState({chartImageURI: this.GoogleChart.chart.getImageURI()}); | |
}}> <h1>CLICK ME TO TURN CHART INTO PNG </h1> </div> | |
<div> | |
Chart image in base64 : | |
{this.state.chartImageURI} | |
</div> | |
<div> | |
<h2>Chart as png</h2> | |
<img src={this.state.chartImageURI} /> | |
</div> | |
</div> | |
} | |
} |
According to this, Chart.chart
should be Chart.getChart()
. Apparently, they changed the API since the last time this gist was updated.
clearly, this example is outdated.
line 32 -> 40 should be:
let chart_events = [
{
eventName: 'ready',
callback: (ChartRef) => {
// Returns Chart so you can access props and the ChartWrapper object from chart.wrapper
this.setState({
chartImageURI: ChartRef.chartWrapper.getChart().getImageURI(),
});
},
},
];
@
clearly, this example is outdated.
line 32 -> 40 should be:let chart_events = [ { eventName: 'ready', callback: (ChartRef) => { // Returns Chart so you can access props and the ChartWrapper object from chart.wrapper this.setState({ chartImageURI: ChartRef.chartWrapper.getChart().getImageURI(), }); }, }, ];
Thank you very much. I was wondering why I kept getting can get getImageURI
of undefined.
it worked like champ
let chart_events = [ { eventName : 'ready', callback : (rcatChart) => { console.log(rcatChart.chartWrapper.getChart()) // Returns Chart so you can access props and the ChartWrapper object from chart.wrapper setChartURI(rcatChart.chartWrapper.getChart().getImageURI()) } } ];
I also saved the image using file-saver library
`<Button
type='button'
size='small'
variant='contained'
fullWidth
onClick={(e)=>{
saveAs(chartURI, 'rcat-chart.png')
}}
Save Graph
`
Thank you everyone here.
It doesn't work like this anymore, where do I find getImageURI?
👍 this really came in handy, however, had to add
shouldComponentUpdate
function to prevent endless loop where re-rendering the chart registers event again and fires it.