1

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?

Pravin
  • 461
  • 5
  • 26
  • http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/data/csv/ this link will help you – Pragnesh Khalas Dec 01 '15 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: https://github.com/requirejs/text – OlleMattsson Dec 01 '15 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 Dec 01 '15 at 14:52
  • What errors do you have in the console? It looks like **a)** your path to the file is wrong. **b)** you are trying to load file from the filesystem, but CORS won't let you. Make sure you have data available on the server. – Paweł Fus Dec 01 '15 at 15:48
  • There are no errors in the console in firefox, which is the problem! In chrome, we have the CORS error, clearly. I have kept the csv file in the same folder of js and html files now (same location, all three) but still not working. What else could be going wrong here. Can we really use $.get directly here @PawełFus , please let me know as I can't find any good reference on csv loading – Pravin Dec 01 '15 at 16:36
  • If you have CORS error, then it means you load files from the filesystem. For example you have index.html file, you open it directly in the browser and you can not load data by AJAX. You should server your indx.html file from server, like apache, nginx etc. For dev process, you can install in Chrome plugin, which will disable CORS. – Paweł Fus Dec 02 '15 at 09:33
  • @PawełFus : It's not a CORS error. I have tried and retried multiple times with $.get and highchart examples, it's still not working. Full location was also given in $.get. Can you please share a working example of any highchart with csv data source, that would be helpful for a lot of people in future. – Pravin Dec 03 '15 at 06:29
  • @PawełFus Is it even possible to load a file (CSV) from local machine or do we have to put it online in a url. Does "$.get" need a URL or file location. Can you please clarify this part? – Pravin Dec 03 '15 at 06:41
  • @Socrata : Please help here, only your method of loading file from online csv works. I need to load from local filesystem, is that even possible? If yes, please guide. – Pravin Dec 03 '15 at 07:19
  • 1
    Please, read carefully my previous comment. Here you can find the same question: http://stackoverflow.com/questions/6923707/using-ajax-to-read-local-files - as you can see this is not Highcharts or jQuery related problem, but in general - how JavaScript works. – Paweł Fus Dec 03 '15 at 10:32
  • @PawełFus : Yes, understood. Your telling me to basically, use a server. I wanted to do it without using apache or any web-server or any framework. It's possible to load files using "d3.csv" . Is there any way I can load the same in highcharts or is using the server necessary here – Pravin Dec 03 '15 at 11:19
  • 1
    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: http://stackoverflow.com/questions/19902538/loading-local-files-with-javascript-without-a-web-server – Paweł Fus Dec 03 '15 at 12:02

1 Answers1

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.

OlleMattsson
  • 414
  • 5
  • 10