Highcharts Csv Data Loading
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>
<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.
Post a Comment for "Highcharts Csv Data Loading"