Highcharts csv data loading

Question

I'm trying to load csv data for a highcharts basic column chart.

I'm using the latest data-module method here and not parsing like the old method ( http://www.highcharts.com/docs/working-with-data/data-module )

I have loaded all js libraries & modules needed (highcharts, exporting & data files) and used the following codes :

HTML :

<body>
    <h1>
        <img src="images/header.png" alt= " This is header! "height = "100px"; width ="1350px">
    </h1>

    <div id="container">
    </div>
</body>

Javascript :

console.log("Enters")

$.get('test.csv', function(csv) {
  console.log("Function")
    $('#container').highcharts({   
        chart: {
            type: 'column'
        },
        data: {
            csv: csv
        },
        title: {
            text: 'Fruit Consumption'
        },
        yAxis: {
            title: {
                text: 'Units'
            }
        }
    });
});

console.log("Function ends");

My screen is empty with only the header display

My console display is as follows :

Enters
Function ends

In the javascript code, $.get function is not working and it's not going inside only. What is going wrong here? Am i missing something very basic on jquery and/or highcharts?

Any feedback is highly appreciated

Update :

So, I found this link wherein data is being loaded from an online CSV file. But, no other link shows data loaded from the local system.

My file is in : D:\Optus\H2 Reporting\H2 Web Dashboard\test.csv The function never enters inside $.get

How do I access this file using $.get function?

jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/… this link will help you — Pragnesh Khalas
– Pragnesh Khalas, Commented Dec 1, 2015 at 14:32
You cannot use $.get to import static stuff like that (unless you have something serving it to your client). In these situations I use requireJS with the text plugin: github.com/requirejs/text — OlleMattsson
– OlleMattsson, Commented Dec 1, 2015 at 14:33
@ Pragnesh: Yeah, I saw that already, but I have an external CSV. In the example, they are loading csv as a html tag. Any examples with external csv with highcharts ? @codebreaker : Thank you for explaining that, can you share an example wherein you are loading csv with requireJS with text plugin? — Pravin
– Pravin, Commented Dec 1, 2015 at 14:52
Please, read carefully my previous comment. Here you can find the same question: stackoverflow.com/questions/6923707/… - as you can see this is not Highcharts or jQuery related problem, but in general - how JavaScript works. — Paweł Fus
– Paweł Fus, Commented Dec 3, 2015 at 10:32
I'm not an expert with d3.csv (do you have some sample which works that way?), but here you can answers, how to load local files: stackoverflow.com/questions/19902538/… — Paweł Fus
– Paweł Fus, Commented Dec 3, 2015 at 12:02

OlleMattsson · Accepted Answer · 2015-12-02 09:34:03Z

If you're not familiar with requireJS (http://requirejs.org/) I highly recommend checking it out. I consider it the most important tool in my js-toolbox and use it in nearly every project that I'm currently working on. requireJS takes care of asynchronous module loading. With the text-plugin we can load csv, json or any other plain-text asset like html for your templates.

This is what I would do in your situation:

/bower.json (dependencies)

{
  "dependencies": {
    "requirejs": "~2.1.20",
    "text": "requirejs/text#~2.0.14"
  }
}

/index.html

<html>
    <body>
    </body>
    <script data-main="js/index" src="bower_components/requirejs/require.js"></script>
</html>

/js/index.js

// define dependenies
require.config({
    paths: {
        text : '/bower_components/text/text',
        csvLoader : '/js/csv-loader'
    }
});

// Start the application 
require( ['csvLoader'], function( csvLoader ){
    console.log( csvLoader.getData() );
});

/js/csvLoader.js

define([
  'text!/assets/data.csv'   
], function( csv ){
    return {
        getData : function () {
            return csv; 
        }
    }
});

/assets/data.csv

id,username,ip
1,jrobertson0,20.206.114.95
2,spierce1,238.8.242.238
3,smoreno2,248.138.97.13
4,ghenry3,112.134.36.7
5,itaylor4,153.211.95.58

When this is run, requireJS makes sure that csv-loader.js and it's dependency, ie. the data.txt are loaded and available before console.log( csvLoader.getData() ); gets called.

Alternatively you could do var myData = csvLoader.getData();

As you can probably imagine by now, you can use requireJS to handle all your module dependencies!

I hope this helps! Happy coding =)

P.S. Do note that with ES6, requireJS becomes quite redundant as module loading is supported natively.

Collectives™ on Stack Overflow

Highcharts csv data loading

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related