Membaca data dari CSV dengan highstock

3 hari mencoba semua metode memuat data ke grafik Highstock. Saya punya beberapa masalah dengan kode saya:

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



    

  1. Nilai temperatur dibulatkan ke nilai terdekat contoh 19,44 – pada grafik 19
    2. 

  2. Saya tidak punya tombol "zoom" dan mengakhiri jendela "dari" "ke"
    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

 


Kode HTML saya


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

Jawaban (3)


arrow_upward
0
arrow_downward

Highchart menggunakan stempel waktu (waktu dalam milidetik), jadi Anda perlu mengurai data atau menggunakan fungsi Date.UTC().

Artikel tentang prapemrosesan: http://docs.highcharts.com/#preprocessing

person Sebastian Bochan    schedule 24.06.2013
comment
Silakan lihat solusi dalam Javascript juga di SO, cara mengurai data. - person Sebastian Bochan; 27.06.2013

arrow_upward
0
arrow_downward

1. Maaf, ini terlalu sulit bagi saya. Tapi, saya sedikit berhasil, di grafik saya ada tombol zoom, dan rentang pantat. . Grafik saya mulai dari 1 Januari 1970. Ini adalah stempel waktu mulai pertama, yaitu tidak mengenali tanggal saya:( 2. Saya khawatir tentang pembulatan keterangan bagian suhu: { valueDecimals: 2, valueSuffix: '°C' tidak berfungsi.

person user2510100    schedule 29.06.2013

arrow_upward
0
arrow_downward

valueDecimals: 2 tidak berfungsi, karena Anda mengurai nilai Anda dalam int

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

Anda harus menggunakan

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

Untuk tanggalnya Masalah: Seperti yang telah dikatakan, Anda perlu mengurai tanggal Anda misalnya:

 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