Problems with Implementation of Dygraph in React (Yes I'm using Redux)

960 views
Skip to first unread message

Sung Soo Cho

unread,
Jun 15, 2017, 4:46:12 AM6/15/17
to dygraphs-users
You can't use <div id="graph"></div> with react. It will throw you an error saying something along the lines of the div does not exist. This is likely because react works in the DOM meaning that I'm trying to implement dygraph in a state.

And yes I'm importing something along the lines of:
g = new Dygraph(
document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
// The x-values could also be dates, e.g. "2012/03/15"
"X,Y,Z\n" +
"1,0,3\n" +
"2,2,6\n" +
"3,4,8\n" +
"4,6,9\n" +
"5,8,9\n" +
"6,10,8\n" +
"7,12,6\n" +
"8,14,3\n",
{
// options go here. See http://dygraphs.com/options.html
legend: 'always',
animatedZooms: true,
title: 'dygraphs chart template'
});

 ~ ~ ~ 


So I tried the wrapper <Dygraph/> but the error I get in this case is:

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method ..."

// state = {
// zoom: null,
// clicked: null,
// data: [[1,10,100], [2,20,80], [3,50,60], [4,70,80]]
// };

Now this is the test data I'm passing in within <Dygraph data = {this.state.data}/> is such. All my imports are correct and present as far as I can see.

Am I missing anything obvious here? Is there any simple Dygraph test code I can run meant for React. I haven't been able to find any information for Dygraph working with React ): Although NPM does have a few react wrappers for Dygraph none of them have any documentation and I can't get them to work either ...  

I am aware that https://github.com/danvk/dygraphs-es6 exists but this isn't based on React and the method used here won't work in React. 

Many thanks! I really hope I'm just making a foolish mistake somewhere!!! I love the functionality of Dygraph but just can't get it to work. Every single other type of graphing tool I've implemented (IE: react chart js google chart etc) has worked beautifully but none match the functionality that I'm looking for with Dygraph!!! I still believe in Dygraph please work!!!

sankalp ranade

unread,
Sep 27, 2018, 11:08:42 PM9/27/18
to dygraphs-users
Did you find any solution because i am struggling with the same issue
Message has been deleted

habibl...@gmail.com

unread,
Oct 23, 2018, 8:42:47 PM10/23/18
to dygraphs-users
me too same issue

Sung Soo Cho

unread,
Oct 24, 2018, 8:08:21 PM10/24/18
to dygraph...@googlegroups.com

On Tue, Oct 23, 2018 at 7:42 PM <habibl...@gmail.com> wrote:
me too same issue

--
You received this message because you are subscribed to the Google Groups "dygraphs-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dygraphs-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages