It is currently Fri Apr 18, 2014 10:14 am Advanced search

Reading down CSV file makes each value its own series

Technical support for the Highcharts Stock package

Reading down CSV file makes each value its own series

Postby robertmgibson » Wed Feb 29, 2012 1:16 pm

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
 
Posts: 32
Joined: Tue Feb 28, 2012 7:12 pm

Re: Reading down CSV file makes each value its own series

Postby robertmgibson » Thu Mar 01, 2012 2:36 pm

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
 
Posts: 32
Joined: Tue Feb 28, 2012 7:12 pm

Re: Reading down CSV file makes each value its own series

Postby robertmgibson » Thu Mar 01, 2012 4:24 pm

Still banging my head away at this, 2 days now :shock: 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
 
Posts: 32
Joined: Tue Feb 28, 2012 7:12 pm

Re: Reading down CSV file makes each value its own series

Postby robertmgibson » Fri Mar 02, 2012 1:41 am

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>
robertmgibson
 
Posts: 32
Joined: Tue Feb 28, 2012 7:12 pm

Re: Reading down CSV file makes each value its own series

Postby torstein.honsi » Wed Mar 07, 2012 3:25 pm

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.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9181
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Reading down CSV file makes each value its own series

Postby robertmgibson » Thu Mar 08, 2012 12:20 am

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
 
Posts: 32
Joined: Tue Feb 28, 2012 7:12 pm

Re: Reading down CSV file makes each value its own series

Postby robertmgibson » Thu Mar 08, 2012 10:45 am

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.
robertmgibson
 
Posts: 32
Joined: Tue Feb 28, 2012 7:12 pm


Return to Highstock Usage

Who is online

Users browsing this forum: Google [Bot] and 3 guests