Reading down CSV file makes each value its own series

[robertmgibson]

This may be a relatively simple query, if so, I apologise. I am new to Highstock/Highcharts and experimenting with them. LOVE the appearance and way they seem to work, just need a bit of help to get started...

I'm trying to get the Highstock to output a simple line graph to start with. And I want it to read data from a CSV file. I have a file with weekly values which I want rendered as a line graph, with X axis being the time values (shown in the first column), y being the series values (in column 2). The data on the CSV file is arranged VERTICALLY (which must be pretty standard for data of this sort, I'd have thought). Using the Highcharts example for parsing CSV data, I get an output in which each data point is treated as a separate series, 786 of them in fact!

I suppose I could try to reorient the data on the CSV file to be horizontal (in fact I have done so successfully with a small sample of data), but don't really want to as this would be tricky, given the underlying files that I want to feed into the CSV. Am I missing a relatively simple adjustment in the CSV parsing example that you give?

Grateful for any pointer...

[robertmgibson]

OK, I think I have found a semi-solution from someone who had a similar issue (actually pair of issues): 1) transposing vertically-arranged columns of data into rows; 2) parseing dates such that they can be used as values for the xAxis. The example can be found on http://jsfiddle.net/Uufmn/.

However, the example uses hard-coded data to simulate the csv input, rather than a CSV file. This question will display my ignorance, but is that data replicating the CSV file before it is processed at all, or has it gone through a stage of processing to get to this point? I'm assuming the latter - ie that the csv file has been read and parsed, and that what this example shows, is a second and third stage of parseing and processing, in order to get the data arranged in its final form . Would that be a correct assumption?

[robertmgibson]

Still banging my head away at this, 2 days now Is the answer in tranposing column and row data, to create a list of arrays??

I can see that this is being viewed but not answered. It that's because of my ignorance, I apologise. But I would be glad of any pointers.

[robertmgibson]

Progress of sorts, and my question has moved on a bit now.

By use of this example

Code: Select all

http://jsfiddle.net/Uufmn/

, reading up and experimentation I have got to a stage where I can load up my CSV file with data in columns, have it processed and parsed (now I think I understand that it goes into a list of objects with named values), and sort out the dates issue for the x-Axis, and can just get a glimpse of Nirvana - because the program now WORKS, but so far as I can see, only in Firefox. In Google Chrome, I get a title and credit but no chart ; in IE and in Safari I get nothing at all. As I say, what I can see in Firefox is a glimpse of Nirvana.

In an attempt to to get to the bottom of the matter, I took the source code from the jsfiddle, with the simple data it uses, saved it into an htm document on my PC, and then attempted to view it. It worked on Firefox and Google Chrome, but not on IE and Safari. This was EXACTLY the source code in the jsfiddle.

The good news is that in the morning I can probably move on to the API and learning how to improve my graph, but only if I view it on Firefox. In the meantime, could anyone advise me on how to improve the rendering across different browsers? The url for the jsfiddle is given above; my code is as follows:

Code: Select all

 


<script type='text/javascript'>
$(document).ready(function() {


function parseDate(dateStr) {
    var matches = dateStr.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})/)
    return Date.UTC(matches[3], matches[1] - 1, matches[2]);
}

$.get('data.csv', function visualise(csvData) {

    var series = [],
        lines = csvData.split('\n'),
        rows;

    $.each(lines, function(i, line) {

        rows = line.split(',');

        if (i === 0) {

            for (i = 1; i < rows.length; i++) {
                series.push({
                    name: rows[i],
                    data: []
                });
            }

            return;
        }


        for (i = 1; i < rows.length; i++) {
            series[i - 1].data.push([
                parseDate(rows[0]),
                parseInt(rows[i])
                ]);
        }


    });
    console.log(series)
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container'
        },

        xAxis: {
            type: 'datetime'
        },
        series: series
    });

});

visualise(csv)


});

</script>


</head>
<body>
 
<div id="container" style="height: 500px; width: 600px;"></div>

 
</body>


[torstein.honsi]

Your jsFiddle runs perfectly in IE8! My (hard-earned) guess is that you are trying to run it without the console open, so IE throws an error when you do console.log.

[robertmgibson]

Torstein, you are spot-on.

I (or my client) will certainly be purchasing a licence, and I hope I may bring you further clients in time.

Best wishes

[robertmgibson]

Hi Torstein,

Maybe I spoke just a bit too soon!

I shall make a separate post on the fact that the legend and presentation are all squashed up in IE8. Better to start a new topic as it is so far from the original starting point of this one, I think.