Dygraph with javascript array?

Question

First of all, I have just started learning JavaScript, so please don't bash me if this question is too trivial.

So.. For the last 2 days I am trying to plot x-y graph using dygraph without any success.

Dygrahp takes 'data' as csv input (Official Documentation):

<html>
<head>
<script type="text/javascript"
  src="dygraph-combined-dev.js"></script>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
  g = new Dygraph(

    // containing div
    document.getElementById("graphdiv"),

    // CSV or path to a CSV file.
    "Date,Temperature\n" +
    "2008-05-07,75\n" +
    "2008-05-08,70\n" +
    "2008-05-09,80\n"

  );
</script>
</body>
</html>

In the jsp file, I am storing the data to a javascript array and then converting that array to comma separated values. Then I pass this csv to Dygraph. But for some reason the graph does not show.

Here is my code:

<div id="graphdiv"></div>

        <script type="text/javascript">
            $(document).ready(function() {
                var list = ${dateAndWaitTimes};
                var x = document.write(list);
                g = new Dygraph( document.getElementById("graphdiv"), x);
            });
        </script>

Here's chrome debugger output:

Please help me, I am really frustrated.

Thanks.

Get rid of `document.write(list)`. [`document.write` will ruin your day.](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) Instead, you need to pass your list `Dygraph`, as the documentation shows. So do `g = new Dygraph(document.getElementById("graphdiv"), list)`. By passing it `x`, you're passing it `undefined`. — Mike Cluck, Jul 13 '16 at 19:56
@MikeC: If I remove it, then how can I convert the list to csv, which dygraph requires? — Retr0spect, Jul 13 '16 at 19:58
Why do you think `document.write` will do that for you? All it does is write stuff to the DOM. Use [`join`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) to bring it all together. `list.join('')`. — Mike Cluck, Jul 13 '16 at 19:59
I thought document.write converted list to csv. Sorry for my ignorance, I am absolute beginner in javascript. Will try list.join(). Thanks a lot. — Retr0spect, Jul 13 '16 at 20:02
I removed this line "var x = document.write(list);", and changed next line to "g = new Dygraph( document.getElementById("graphdiv"), x.join());". Still the graph does not show up. — Retr0spect, Jul 13 '16 at 20:09
Did you see any errors in your console? Because now you're using `x`, which doesn't exist and you left out the `''` in `join`. You should be doing `list.join('')`. By default, it places commas between each item but you don't want that. — Mike Cluck, Jul 13 '16 at 20:10
Sorry, My mistake. I changed "g = new dygraph(document.getElementById("graphdiv"), list.join(''));". Again no graph. In debugger variable 'list' has all the values, but "g = new dygraph(document.getElementById("graphdiv"), list.join(''));" has no effect. — Retr0spect, Jul 13 '16 at 20:18
[It works just fine for me.](https://jsfiddle.net/24rgz67k/1/) You must be doing something else. Perhaps some other code is emptying out `graphdiv` or you have a typo in your code, such as doing `dygraph` instead of `Dygraph`. **Check your console for errors.** — Mike Cluck, Jul 13 '16 at 20:25
Nice! May be it's not working for me because I am using the script with jstl? Anyway, thanks again for you help, I really appreciate it. Edit: There are no typos in my code. — Retr0spect, Jul 13 '16 at 20:29

score 1 · Answer 1 · answered Oct 24 '17 at 09:59

Dygraph does accept datatables (similar to Google Charts protocol). Example

const dygrafTable = [     // 2D-array
  [x1, y1],    // either number or Date format
  ...
];
const g = new Dygraph(
    dygrafDiv ,     // where to plot
    dygrafTable,    // data (instead of a CSV file)
    {title, width, height, axes}  // options
);

With more than 2 columns, it draws several "ys" against a same "x"

Dygraph with javascript array?

Here's chrome debugger output:

1 Answers1