Reading data from CSV with highstock

问题

3 days trying all methods of loading data into Highstock chart end I have some problems with my code:

1. Date on Xaxis is displayed "2013-04-23 21:07:40" in line; not sorted day, hour 

Value  temperature is rounded to the nearest value
example 19.44 - in graph 19 
I dont have button "zoom" end window "from" "to"
i dont have range selector
I want graph like in this site:
http://www.highcharts.com/stock/demo/data-grouping
I'm not a good programmer, but I try.
I find in this forum similar problem, but solution not working
Somebody please help.
Best regards

The data in the CSV is formatted like so:
2013-04-23 21:07:40,19.44
2013-04-23 21:30:50,19.38
2013-04-23 22:00:11,19.69
2013-04-23 22:45:02,19.44
2013-04-23 23:00:03,19.75
2013-04-23 23:45:03,19.19
2013-04-24 00:00:12,19.13
2013-04-24 00:45:03,19
 

My HTML Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

var c = [];
var d = [];
// Create a timer
var start = + new Date();
var options = {

                chart: {
            events: {
                    load: function(chart) {
                        this.setTitle(null, {
                            text: 'Built chart at '+ (new Date() - start) +'ms'
                    });
                }
            },
                renderTo: 'chart',
      defaultSeriesType: 'line',
                zoomType: 'x'                
            },
    rangeSelector: {
            buttons: [{
                type: 'day',
                count: 3,
                text: '3d'
            }, {
                type: 'week',
                count: 1,
                text: '1w'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'month',
                count: 6,
                text: '6m'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
    selected: 3
    },
            title: {
                text: 'Hourly temperatures in room'
            },
    subtitle: {
            text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
        },
            xAxis: {
                title: {
                    text: 'Date Measurement'
                },
                categories: c
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },
            series: [{
    name:'Temperature',
            data: d,
     tooltip: {
            valueDecimals: 2,
            valueSuffix: '°C'
            }
        }]
                };

$.get('dane.csv', function(data) {
        var lines = data.split('\n');
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
            c.push(items[0]);
            d.push(parseInt(items[1]));
        })
       var chart = new Highcharts.Chart(options);
});
});

</script>
</head>
   <body>
<script src="highstock.js" type="text/javascript"></script>
<script src="exporting.js" type="text/javascript"></script>
<div id="chart" style="height: 500px; min-width:500px"></div>
</body>
</html>

回答1:

Highcharts use timestamps (time in miliseconds), so you need to parse your data or use Date.UTC() function.

Article about preprocessing: http://docs.highcharts.com/#preprocessing

回答2:

1. Sorry, this is too difficult for me. But, I have litte succes, in my graph I have buttons zoom, and buttoms range. . My graph start from Jan ,1 ,1970. This ist start timestamp, i.e.not recognized my date:( 2. I'm worried about rounding temperature section tooltip: { valueDecimals: 2, valueSuffix: '°C' not working.

回答3:

valueDecimals: 2 isn't working, because you are parsing your values in a int

d.push(parseInt(items[1]));

Your should use

d.push(parseFloat(items[1]));

For the date Problem: As already said, you need to parse your date for ex.:

 var dateAndTime = itmes[0].split(' ');    
 var dateParts = dateAndTime[0].split('-');    
 var timeParts = dateAndTime[1].split(':');
 var date = Date.UTC(parseInt(dateParts[2]), parseInt(dateParts[1]) - 1, parseInt(dateParts[0]), parseInt(timeParts[0]), parseInt(timeParts[1]));

来源：https://stackoverflow.com/questions/17243650/reading-data-from-csv-with-highstock

标签

highstock