Чтение данных из CSV с помощью highstock

3 дня, пробуя все методы загрузки данных в график Highstock, заканчиваются. У меня есть некоторые проблемы с моим кодом:

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



    

  1. Значение температуры округляется до ближайшего значения пример 19,44 - на графике 19
    2. 

  2. У меня нет кнопки "масштабировать" окончание окна "от" "до"
    3. 

  3. 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

 


Мой HTML-код


<!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>

highstock
person user2510100    schedule 21.06.2013    source источник

Ответы (3)


arrow_upward
0
arrow_downward

В Highcharts используются временные метки (время в миллисекундах), поэтому вам необходимо проанализировать ваши данные или использовать функцию Date.UTC().

Статья о предварительной обработке: http://docs.highcharts.com/#preprocessing

person Sebastian Bochan    schedule 24.06.2013
comment
Пожалуйста, ознакомьтесь с решениями в Javascript также в SO, как анализировать данные. - person Sebastian Bochan; 27.06.2013

arrow_upward
0
arrow_downward

1. Извините, это слишком сложно для меня. Но у меня мало успехов, на моем графике есть кнопки масштабирования, а диапазон кнопок. . Мой график начинается с 1 января 1970 года. Это первая отметка времени начала, т. е. моя дата не распознана :( 2. Меня беспокоит всплывающая подсказка в разделе температуры округления: { valueDecimals: 2, valueSuffix: '°C' не работает.

person user2510100    schedule 29.06.2013

arrow_upward
0
arrow_downward

valueDecimals: 2 не работает, потому что вы анализируете свои значения в int

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

Вы должны использовать

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

Для даты Проблема: как уже было сказано, вам нужно проанализировать дату, например:

 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]));
person reneton    schedule 06.04.2014