rakannimer / react-google-charts Goto Github PK
View Code? Open in Web Editor NEWA thin, typed, React wrapper over Google Charts Visualization and Charts API.
Home Page: https://react-google-charts.com/
License: MIT License
A thin, typed, React wrapper over Google Charts Visualization and Charts API.
Home Page: https://react-google-charts.com/
License: MIT License
I think some of the chart options only work with material design.
axes: {
y: {
0: {side: 'right'}
}
}
Here's the fiddle from Google's example. https://jsfiddle.net/api/post/library/pure/
I'm using this library and lovin' it! It actually works, I can render the charts from the examples.
Now I'm trying to render GeoCharts: https://developers.google.com/chart/interactive/docs/gallery/geochart#core
This is my code:
var options2 = {
sizeAxis: { minValue: 0, maxValue: 100 },
region: '155', // Western Europe
displayMode: 'markers',
colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
};
var rows2 = [[
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]];
var columns2 = [ {
'type': 'string',
'label' : 'Country'
},
{
'type' : 'number',
'label' : 'Number'
}];
...
<Chart chartType = "GeoChart"
rows = {rows2}
options = {options2}
graph_id = "GeoChart"
width={"100%"}
height={"400px"} legend_toggle={false} />
I get an empty div, and no errors.
May this be related to the part where google includes external scripts?
Note: GeoCharts require both of the following lines in the <head> section of the page
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<Chart chartType="PieChart" options={options} data={data} graph_id={id}/>
Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
I can't create timeline chart using those configurations. It says React Chart Rendering...
then nothing happens, no console error.
<Chart
chartType="Timeline"
columns={[{"id":"President","type":"string"},{"id":"Start","type":"number"},{"id":"End","type":"number"}]}
rows={[["Washington",12,14],["Adams",12,14],["Jefferson",12,14]]}
graph_id="ScatterChart"
options={{"width":"600px"}}
width={"100%"}
chartPackage={"timeline"}
/>
Hi, i'm trying to save chart that i'm building with your component into pdf. For that, i need to get dataUri of the chart, but i can't figure out how to do it. From official docs i see that it's possible to call on chart object, but how can i retrieve this object from react component ?
I have been trying to figure out which commit it was however it seems to refer to a function build_big_data_table
which is not shown in the commit history of this git hub repo. I would recommend re-exporting the code to npm.
Wanted to say thanks for the work you've done on this. We started using it last year on Cronitor.io at version ~0.12 I think. We moved to 1.0 and i'm digging the richer API.
Hi @rakannimer,
do you think you could release on npm the latest code you have on master ?
Cheers,
Antoine
When I include react-google-charts on a component my mocha tests are breaking:
TypeError: doc.getElementsByTagName is not a function
at .../node_modules/react-google-charts/node_modules/scriptjs/dist/script.js:13:18
The Script.js library appears to expect a document to exist during execution, but that is not the case when running mocha tests.
Is there a pie chart example that I can look at anywhere?
I have a react component that contains a chart. I want the chart to render different data depending on the state of the component. The change in state represents a change in what should be rendered along the horizontal axis.
When I call setState(...)
, the ScatterPlot is re-rendered correctly. However, the chart's title and hAxis
/ vAxis
labels do not change to reflect the change in state. I can see in React DevTools that the options
prop has updated correctly, but the title and hAxis
label are stuck as whatever string was initially rendered.
I'm guessing it is due to the optimization in Chart.js, l.109 - 132. Once wrapper
is defined, it never gets re-created; perhaps this is why the title and axis are never re-rendered?
In IE9 the charts display a message like 'Invalid chart type: LineChart' and the console displays: SCRIPT5009: 'gvjs_lk' is undefined
The same code works fine in Chrome.
I'm trying to use it, but, inspecting, I'm getting a div without contents:
No browserify errors or console errros.
What can it be?
I'm trying to load the material version of the charts by passing the chartPackages
prop. For example, if I set chartPackages
to the following:
let chartPackages = ['line'];
....
<Chart chartPackages={chartPackages}....
I get the error google.load
is not a function.
A few questions:
chartPackages
prop isn't documented and I found out about it by looking it at the code.README.md
file with the props that the componenet does accept in order to be some basic level of documentation ?Cool library, otherwise, thanks!
I'm getting the following error:
ReferenceError: document is not defined
[1] at /my/project/node_modules/scriptjs/dist/script.js:12:13
[1] at doc (/my/project/node_modules/scriptjs/dist/script.js:8:72)
In case you need some context, I'm using it within this boilerplate.
Evidently something is wrong because document
is not defined on the server. Is this scriptjs
's fault? Any quick fixes?
I want to add an overlay to my chart as shown here..
https://developers.google.com/chart/interactive/docs/overlays
However I am unable to do so because I cannot get the ChartLayoutInterface. Is there any way to implement this?
When i import the react-google-chart the server rendering broken.
"Document is not defined"
How can i use the module without this error?
https://github.com/RakanNimer/react-google-charts/blob/master/src/components/Chart.js#L91
drawChart: function() {
if ((this.props.data !== null && this.props.data.length === 0) || this.props.columns.length === 0) {
return;
}
...
The above code means that if we don't specify a columns prop, drawChart exits without doing anything. From what I can tell, this means that the first example in your README where you provide options and data, but no columns, does not display anything.
I'm running into this problem with tool tips getting stuck: http://stackoverflow.com/questions/36205526/tooltip-bug-with-dynamic-google-charts
Can you consider adding this solution:
"
container = document.getElementById('' + youridentifier + '');
chart = new google.visualization.Timeline(container);
chart.draw(dataSet, options);
Every time you "redraw" the google chart you have to create a new visualization object .
"
Thanks
I'm trying to display two charts at once, Timeline and LineChart, whichever I put as a second chart (bellow the first one) I keep getting error for it "google.load is not a function". If I remove one of the charts, it's working perfectly. I checked the data, is correct. Cause when I'm loading them separately, they are working. Here's a sample of my code:
<FlexRow>
<Chart chartType="Timeline"
graph_id="TimelineChart"
chartPackages={['timeline']}
rows={this.props.timeline.rows}
columns={this.props.timeline.columns}
width={"100%"} height={"400px"}/>
</FlexRow>
<FlexRow>
<Chart chartType="LineChart"
rows={this.props.linechart.rows}
columns={this.props.linechart.columns}
width={"100%"} height={"400px"}/>
</FlexRow>
What could be the problem?
Initializing using rows and columns only works correctly when rows have a length of two. I'd like to create a stacked column chart, but only the first of the stacked items is showing up in my chart.
Looks like the react google charts refers to deprecated methods in React 0.14. Opening an issue to track migration
I've added setChartType
after setOptions (around line 125) to allow for switching of chart types
this.wrapper.setOptions(this.props.options);
this.wrapper.setChartType(this.props.chartType)
any chance you could add this?
Trying to render a gauge and it is not working at all. Not sure what I might be doing incorrectly here.
import React, { Component, PropTypes } from 'react';
import { Chart } from 'react-google-charts';
class NetworkGauge extends Component {
componentDidMount() {
this.renderChart();
}
constructor(props, context) {
super(props, context);
this.state = {
data: [],
options: {},
}
}
renderChart() {
const data = [
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
];
const options = {
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
this.setState({
'data' : data,
'options' : options
});
}
render() {
console.log(this.state.data);
return (
<Chart chartType="Gauge" data ={this.state.data} options={this.state.options} graph_id="Gauge" width={"100%"} height={"400px"}>
</Chart>
);
}
}
export default NetworkGauge;
Hi Rakan,
Thanks for this very helpful piece of work.
Wondered if Sankey diagram was supported or if you had any plan to add it in the near future?
There is a bug in Chart.js on https://github.com/RakanNimer/react-google-charts/blob/master/src/components/Chart.js#L128
callback is being stored in a variable in a for loop. So callback is always going to reference the last event.
Chart with this properties show error message
Data column(s) for axis #0 cannot be of type string
{"chartType":"BarChart","data":[["Element","Density",{"role":"style"}]],"width":"100%","height":"300px","options":{"title":"Density of Precious Metals, in g/cm^3","bar":{"groupWidth":"95%"},"legend":{"position":"none"}},"chartEvents":[{"eventName":"onmouseover"}]}
It turns out that changing chart type blows away events. I've had to do this inside drawChart()
:
...
else {
this.updateDataTable.bind(this)();
this.wrapper.setDataTable(this.dataTable);
// this.wrapper.setChartType(this.props.chartType)
this.wrapper.setOptions(this.props.options)
if (this.wrapper.getChartType() != this.props.chartType) {
google.visualization.events.removeAllListeners(this.wrapper)
this.wrapper.setChartType(this.props.chartType)
var self = this
google.visualization.events.addOneTimeListener(this.wrapper, 'ready', function () {
self.chart = self.wrapper.getChart();
self.listenToChartEvents.call(self);
});
}
}
this.wrapper.draw();
I get an error "google.load is not a function". Other charts do seem to work.
In file examples/src/components/Examples/BarCharts.js
here is a typo: var BarChartData = require('../../sample_data/Bar
chart');
(expect BarChart
)
I have copied one of the example <Chart />
s but I just get the rendering node, the chart never actually renders. Is there a way I can debug this?
Sorry to ask this here; is there a typescript definition file available for react-google-charts?
For react.rocks -- thanks
Does it exist in this library?
Hello,
I am trying to pass data as an array, using the code below. The chart doesn;t appear just a grey box. I don't get any errors, Can you help?
var chartAttributes = {
chartType: this.props.chartTypes[this.state.statsChart.chartType],
graph_id: this.props.chartTypes[this.state.statsChart.chartType],
width: this.state.statsChart.chartWidth,
height: this.state.statsChart.chartHeight,
legend_toggle: true
};
chartAttributes.options = {
title: 'Stats ' + this.props.chartTypes[this.state.statsChart.chartType],
is3D: this.props.chartTypes[this.state.statsChart.chartType] == 'PieChart'
};
chartAttributes.data = [
['Attendance','Percentage'],
['Present',this.getCodesTotals().present[0]],
['Authorised Absent',this.getCodesTotals().authorisedAbsent[0]],
['Unauthorised Absent',this.getCodesTotals().unauthorisedAbsent[0]]
];
return (
<Chart {...chartAttributes} />
);
This is the code to compute the div style at https://github.com/RakanNimer/react-google-charts/blob/master/src/components/Chart.js#L273
const divStyle = {
height: this.props.height || this.props.options.height,
width: this.props.width || this.props.options.width,
};
I assume its purpose is "when this.props.height
is absent, fallback to this.props.options.height
".
But then we have defaultProps
from https://github.com/RakanNimer/react-google-charts/blob/master/src/components/Chart.js#L324 which says
Chart.defaultProps = {
width: '400px',
height: '300px',
};
which provides this.props.height
already when it's absent, and that ||
will never take effect unless this.props.height
is manually set to null
of 0
etc, and leaving height
to be always 300px if we set options.height
to some value without setting props.height
, making the behaviour very confusing
When i clicked the legend of my chart, it will turn off the line that i clicked. I want to know how to turn off that onclick function, because i edited the tooltip so the column is like:
{type:'datetime', label:'Date', role: 'domain'},
{type: 'number', label:'Chat Count', role: 'data'},
{type: 'string', role: 'tooltip', p: {'html': true}},
{type: 'number', label:'Chat Growth', role: 'data'},
{type: 'string', role: 'tooltip', p: {'html': true}}
when i clicked the legends, i got this error : All series on a given axis must be of the same data type
I added a ref to the chart component and am calling: this.refs.userVisitPieChart.wrapper.getChart().setSelection([{row: 1, column: null}]
It looks like this.refs.userVisitPieChart.wrapper.getChart().setSelection
is exposed correctly by the chart wrapper, but the setSelection function with an argument does not augment the Pie Chart as intended.
0.1.8 worked (jQuery based loader), 0.2.2 gives 'Table has no columns' (no user code changes).
The given datatable is identical, but replacing the contents of the GoogleChartLoader.js component with the jQuery version in 0.1.8 operation is restored.
My project is using React 15.1, jQuery 2.2.4, and is delivered as a single .js bundle using browserify, transform, babelify, and bundle. No errors on the browsers console.
Hi,
Is there any way to apply google.visualization.NumberFormat?
https://developers.google.com/chart/interactive/docs/reference#numberformat
It give me this error
var doc = document
^
ReferenceError: document is not defined
at /Users/mboutin2/working-directory/project/node_modules/scriptjs/dist/script.js:12:13
at doc (/Users/mboutin2/working-directory/project/node_modules/scriptjs/dist/script.js:8:72)
at Object.<anonymous> (/Users/mboutin2/working-directory/project/node_modules/scriptjs/dist/script.js:11:3)
at Module._compile (module.js:413:34)
at Module._extensions..js (module.js:422:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/mboutin2/working-directory/project/node_modules/babel-register/lib/node.js:166:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/mboutin2/working-directory/project/node_modules/react-google-charts/lib/components/GoogleChartLoader.js:16:17)
at Module._compile (module.js:413:34)
at Module._extensions..js (module.js:422:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/mboutin2/working-directory/project/node_modules/babel-register/lib/node.js:166:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)```
Hi there,
Is there a way to create multiple graphs? I can get one graph to render then the second one will be stuck in the Rendering Chart...
phase.
I have an array of objects that have configurations/options for the graphs then I map this array to a component that calls <Chart />
.
Am I missing something here to make multiple graphs show up? Thanks!
Currently we fetch our data from Google Spreadsheets in a project I am working on. If I were to fetch this data and then pass it to the component, would it be able to accept the response?
I'm not 100% sure how I would go about doing the google.visualization calls.
new google.visualization.Query
perhaps we could pass in a query prop and we could create a function within react-google-charts that would do the fetching and setting of data?
I have been able to get them to work outside of react-google-charts, see http://jsfiddle.net/4THAe/1/
I have been stumped by this error while using react-google-charts: "All series on a given axis must be of the same data type". Can you confirm that you can get tooltips working on scatter plots with react-google-charts?
Here is my code, it is as basic as possible:
function build_scatter() {
return {rows: [[0.5, 0.5, 'test123']], columns: [{
type: 'number',
role: 'domain',
label:'Overall Score'
},
{
type: 'number',
role: 'data',
label:'QB'
},
{
type: 'string',
role: 'tooltip',
label: null
}
]};
}
and then for my plot:
var ScatterChartData =
{
circle_scatter:
{
rows : circle_scatter_data.rows,
columns : circle_scatter_data.columns,
options:
{
title: 'Overall Score vs. Position',
legend: {bottom: 'top', textStyle: {color: 'black', fontSize: 12}},
colors: ['#0000FF','#FF0000', '#00FF00'],
pointSize: 2,
vAxis: {title: 'Overall Score'},
}
}
};
Hi,
really interesting wrapper to work with google charts in react.
I'm just curious. I'm not abe to figure out myself, how I add more charts to the same page. It seems, that the chart only works, when there's only one chart on the page.
/BR
Martin
should something like this be added for componentWillUnmount to avoid memory leaks?
http://stackoverflow.com/questions/30657543/google-charts-remove-event-listener
var event = google.visualization.events.addListener(chart, 'onmouseover', function() {
alert('onmouseover');
google.visualization.events.removeListener(event); //the event object as param
});
Grist for the mill: I've enabled diff charts by adding the following code to buildDataTableFromProps:
buildDataTableFromProps() {
// debug('buildDataTableFromProps', this.props);
if (this.props.diffdata) {
let diffdata = this.props.diffdata
let oldData = google.visualization.arrayToDataTable(diffdata.old)
let newData = google.visualization.arrayToDataTable(diffdata.new)
// must take computeDiff from prototypes since not available with charts early in process
let computeDiff = google.visualization[this.props.chartType].prototype.computeDiff
let chartDiff = computeDiff(oldData,newData)
return chartDiff
}
(and of course adding a diffdata prop)
The key is getting access to the computeDiff
method before having access to the chart for the chartType. Grabbing it from the appropriate prototype in the google.visualization access chain seems to work.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.