how can i make a graph in javascript using c3.js

Question

i am trying to make a graph in javascript using chart.js. i have this code below but when i run it the page is empty. this code is an example that ive seen in the internet, and it says that it doesn't recognize the "generate" function in the javascrpt file (it doesnt throws an exception or an error, just marks the "generate" word in gray and doesn't shows anything when i run the code)

this is the html code:

<!DOCTYPE html>
<html lang="en">


<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id ="myChart"></div>
<script><script src="lol.js"></script></script>
</body>
</html>

this is the js code:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ['data1', 230, 190, 300, 500, 300, 400]
        ]
    });
}, 1000);

setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, 150, 200, 300, 200, 100]
        ]
    });
}, 1500);

setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
}, 2000);

how can i fix that? i need to make a graph to my project with javascript and i trying to find out a way how. thanks!

oops, didn't realiused i was copying the wrong html file. changing it now — Yoav Linder
– Yoav Linder, Commented Oct 7, 2018 at 8:10

Jeto · Accepted Answer · 2018-10-07 08:18:23Z

1

You seem to be missing the bindto part of C3's initialization code:

var chart = c3.generate({
  bindto: '#myChart',  // <---- here
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ]
  }
});

answered Oct 7, 2018 at 8:18

Jeto

15k2 gold badges39 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yoav Linder Over a year ago

its still empty page

Jeto Over a year ago

<script><script src="lol.js"></script></script> is invalid. Try replacing it with <script src="lol.js"></script>. Also check the browser's console for errors/warnings.

Collectives™ on Stack Overflow

how can i make a graph in javascript using c3.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related