Drawing multiple graphs

[willyyang]

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!

[willyyang]

<div>
  <div id='project-margins'>
          {options.map(option => 
            <Chart
              chartType = 'ColumnChart'
              data ={data}
              options={option}
              graph_id = 'ColumnChart'
              width={'100%'}
              height={'400px'}
            />
          )}           
  </div>
</div>

[rakannimer]

Hey,
It looks like you're using the same graph_id for the generated graphs.
Either use different ids for each or don't set one and it will
automatically generate graph_ids for you .

Hope that helps,
Cheers !

On Tue, 21 Jun 2016 at 20:59 willyyang notifications@github.com wrote:

{graphs.map(graph => )}

  </div>

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#54 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ABNkfTzeqUaKK-Fdb8YHNtj0mY2wofL9ks5qOCaDgaJpZM4I7AS4
.

[willyyang]

Doh. Thanks dude!

[rakannimer]

You're welcome :)

[anylyne]

I'm having the same issue even if I'm using a unique id for each graph or if I'm letting it generate the id itself. The version I'm using is 2.0.29.

[rakannimer]

Hey @anylyne,

Can you try updating to >=3.0

npm i react-google-charts@latest

and try again ?

Cheers !

[anylyne]

Thank you for your answer, @rakannimer!

I can't update because my project is using react 15.3.2. Is there any other option in this case?

Best,
Carol.

[anylyne]

@rakannimer More information about this issue in my environment:

• It is working properly in my local. I mean all four graphs are loading simultaneously.
• On staging, some of them renders and some not randomly.

[RachelMcNeely]

Hi @rakannimer,

I am also in the same boat as @anylyne - one chart renders while the others are stuck. However, when I navigate away and then back again, all charts render properly. I also can't update because my project uses React 15.6.2. Is there any other option besides updating >=3.0? Thanks!

[rakannimer]

Hey @anylyne & @RachelMcNeely ,

It would be very helpful if you can create a sandbox that reproduces the problem and I can try to help debug there ?

Cheers !

[josephjs1dev]

Hello, I'm also having same issue with this one. I want to render 3 charts, but it only renders 1 chart successfully while the other stuck at loading.

The version I'm using is 2.0.29 for react-google-charts and 15.3.1 for react.