Skip to content Skip to sidebar Skip to footer
Home / Csv / Highcharts / Javascript / Jquery / Socrata

Highcharts Csv Data Loading

Post a Comment
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/w

Solution 1:

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><scriptdata-main="js/index"src="bower_components/requirejs/require.js"></script></html>

/js/index.js

// define dependeniesrequire.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 beforeconsole.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.

Post a Comment for "Highcharts Csv Data Loading"