CODEWITHSUNDEEP
javascripthtmlcsvc3.js
CdSdw
CdSdw

Reputation: 359

Loading data into graph for c3.js (trying to get this example to work)

I'm trying to get this example to work.

My HTML file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>C3</title>
    <meta charset="utf-8" />
    <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="chart"></div>

    <script>

    var chart = c3.generate({
        data: {
            url: 'data/c3_test.csv',
            type: 'line'
        }
    });

    setTimeout(function () {
        chart.load({
            url: 'data/c3_test2.csv'
        });
    }, 1000);

    setTimeout(function () {
        chart.load({
            columns: [
                ['data1', 130, 120, 150, 140, 160, 150],
                ['data4', 30, 20, 50, 40, 60, 50],
            ],
            unload: ['data2', 'data3'],
        });
    }, 2000);

    setTimeout(function () {
        chart.load({
            rows: [
                ['data2', 'data3'],
                [120, 300],
                [160, 240],
                [200, 290],
                [160, 230],
                [130, 300],
                [220, 320],
            ],
            unload: 'data4',
        });
    }, 3000);

    setTimeout(function () {
        chart.load({
            columns:[
                ['data4', 30, 20, 50, 40, 60, 50,100,200]
            ],
            type: 'bar'
        });
    }, 4000);

    setTimeout(function () {
        chart.unload({
            ids: 'data4'
        });
    }, 5000);

    setTimeout(function () {
        chart.load({
            columns:[
                ['data2', null, 30, 20, 50, 40, 60, 50]
            ]
        });
    }, 6000);

    setTimeout(function () {
        chart.unload();
    }, 7000);

    setTimeout(function () {
        chart.load({
            rows: [
                ['data4', 'data2', 'data3'],
                [90, 120, 300],
                [40, 160, 240],
                [50, 200, 290],
                [120, 160, 230],
                [80, 130, 300],
                [90, 220, 320],
            ],
            type: 'bar'
        });
    }, 8000);

    setTimeout(function () {
        chart.load({
            rows: [
                ['data5', 'data6'],
                [190, 420],
                [140, 460],
                [150, 500],
                [220, 460],
                [180, 430],
                [190, 520],
            ],
            type: 'line'
        });
    }, 9000);

    setTimeout(function () {
        chart.unload({
            ids: ['data2', 'data3']
        });
    }, 10000);

    </script>

</body>
</html>

In the same directory as the HTML file, I have the directory '/data/' which contains two files:

c3_test.csv:

data1,data2,data3
120,80,200
140,50,210
170,100,250
150,70,300
180,120,280

c3_test2.csv

data1,data2,data3
20,180,400
40,150,310
70,120,470
50,170,400
80,200,380

This is exactly how the example is set up, yet, when I open the HTML file in a browser, I don't get anything on the page. I know that my basic setup must be correct, because when I copy the simple_multiple.js code from this other example for a line chart into the javascript section of my code, I get the exact line chart of the example. I'm just not sure why the csv import for the graphs isn't working.

I've also tried replacing both url's with the full path to the files, but that did not work.

Here is the error messages that I get from my browser console:

d3.min.js:1 XMLHttpRequest cannot load file:///full/file/path/to/c3_test.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

d3.min.js:1 XMLHttpRequest cannot load file:///full/file/path/to/c3_test2.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

I've ran the HTML in both Chrome and IE, but neither worked.

Am I missing something extremely obvious? Any help would be appreciated. Thanks!

Upvotes: 0

Views: 820

Answers (2)

CdSdw
CdSdw

Reputation: 359

I got it to work! I had to run Chrome with the --allow-file-access-from-files flag so that it could open the .csv files.

Upvotes: 0

Harris
Harris

Reputation: 1785

If the "data" directory isn't right at the root level of your project, you won't find it with that reference. Whenever you have a reference, starting it with '/' makes it start at the root. Remove that first /, and it'll start looking in whatever directory the current HTML file is in.

url: '/data/c3_test.csv' should be url: 'data/c3_test.csv'

Upvotes: 1

Related Questions