Timeline Chart

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"}
/>

[rakannimer]

Hey ! Thanks for reporting 😃 Regarding your problem I can see 4 issues in the code you wrote :

1. The component expects chartPackages prop not chartPackage in order to load the packages.
2. chartPackages expects an array not a string (we want to be able to load many packages simultaneously). So it should be chartPackages={['timeline']}
3. The timeline chart from the Google Charts APIs needs dates not numbers so the type in the Start and End column should be date
4. Since the type is date, the rows should have dates.

Here is a working version of your code that I ran :

<Chart chartType = "Timeline" columns = {[{"id":"President","type":"string"},{"id":"Start","type":"date"},{"id":"End","type":"date"}]} rows= {[['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]]} options = {{}} graph_id = "TimelineChart"  width={"100%"} height={"400px"}   chartEvents={this.chartEvents} chartPackages={['timeline']}/>

This is not very clear in the examples and docs, I’ll try to make better docs when I have some free time 😃 Hope this helps, Cheers !

[del42]

how would following example look like in react-google-charts? http://jsfiddle.net/asgallant/qgo310pc/1/

I can’t seem to plot this…