用高图从CSV绘制不规则时间数据

Question

I apologize if this is a stupid question but I have no real experience with web developement and I couldn't find a good example to copy/paste from. 如果这是一个愚蠢的问题，我深表歉意，但是我对Web开发没有真正的经验，我找不到可以复制/粘贴的好例子。

I am trying to produce a simple graph based on a CSV file, which looks like this (unix timestamp, human readable date, T1, T2, T3) and which has irregular intervals 我正在尝试基于CSV文件制作一个简单的图形，它看起来像这样（unix时间戳，人类可读的日期，T1，T2，T3）并且间隔不规则

temperatures.dat 温度

1454251326, Sun Jan 31 15:42:06 2016, 21.44, 21.38, 21.06 
1454251338, Sun Jan 31 15:42:18 2016, 21.44, 21.38, 21.06 
1454251351, Sun Jan 31 15:42:31 2016, 21.44, 21.38, 21.00 
1454251363, Sun Jan 31 15:42:43 2016, 21.44, 21.38, 21.00 
1454251376, Sun Jan 31 15:42:56 2016, 21.44, 21.38, 21.06 
1454251388, Sun Jan 31 15:43:08 2016, 21.44, 21.38, 21.00 
1454251401, Sun Jan 31 15:43:21 2016, 21.44, 21.38, 21.00 
1454251413, Sun Jan 31 15:43:33 2016, 21.44, 21.31, 21.00 
1454251426, Sun Jan 31 15:43:46 2016, 21.44, 21.38, 21.00 
1454251438, Sun Jan 31 15:43:58 2016, 21.44, 21.31, 21.00 
1454251451, Sun Jan 31 15:44:11 2016, 21.44, 21.31, 21.00 
1454251463, Sun Jan 31 15:44:23 2016, 21.44, 21.31, 21.00 
1454251476, Sun Jan 31 15:44:36 2016, 21.44, 21.31, 21.00 
1454251488, Sun Jan 31 15:44:48 2016, 21.38, 21.31, 21.00 
1454251501, Sun Jan 31 15:45:01 2016, 21.44, 21.31, 20.94 
1454251513, Sun Jan 31 15:45:13 2016, 21.44, 21.31, 21.00 
1454251526, Sun Jan 31 15:45:26 2016, 21.44, 21.31, 21.00 
1454251538, Sun Jan 31 15:45:38 2016, 21.38, 21.31, 21.00 
1454251551, Sun Jan 31 15:45:51 2016, 21.38, 21.31, 21.00 
1454251563, Sun Jan 31 15:46:03 2016, 21.38, 21.31, 21.00 
1454251575, Sun Jan 31 15:46:15 2016, 21.38, 21.31, 21.00 
1454251588, Sun Jan 31 15:46:28 2016, 21.38, 21.31, 20.94 
1454251600, Sun Jan 31 15:46:40 2016, 21.38, 21.31, 20.94 
1454251613, Sun Jan 31 15:46:53 2016, 21.38, 21.31, 20.94 
1454251625, Sun Jan 31 15:47:05 2016, 21.38, 21.31, 20.94 
1454251638, Sun Jan 31 15:47:18 2016, 21.38, 21.31, 20.94 
1454251650, Sun Jan 31 15:47:30 2016, 21.31, 21.31, 20.94 
1454251663, Sun Jan 31 15:47:43 2016, 21.31, 21.31, 20.94 
1454251675, Sun Jan 31 15:47:55 2016, 21.31, 21.25, 20.94 
1454251688, Sun Jan 31 15:48:08 2016, 21.31, 21.25, 20.94 
1454251700, Sun Jan 31 15:48:20 2016, 21.31, 21.19, 20.88 
1454251713, Sun Jan 31 15:48:33 2016, 21.31, 21.25, 20.88 
1454251725, Sun Jan 31 15:48:45 2016, 21.31, 21.19, 20.94 
1454251738, Sun Jan 31 15:48:58 2016, 21.31, 21.19, 20.88 
1454251750, Sun Jan 31 15:49:10 2016, 21.31, 21.19, 20.88 
1454251763, Sun Jan 31 15:49:23 2016, 21.31, 21.25, 20.88 
1454251775, Sun Jan 31 15:49:35 2016, 21.31, 21.19, 20.88 
1454251788, Sun Jan 31 15:49:48 2016, 21.31, 21.25, 20.88 
1454251800, Sun Jan 31 15:50:00 2016, 21.31, 21.19, 20.88 
1454251813, Sun Jan 31 15:50:13 2016, 21.25, 21.19, 20.88 
1454251825, Sun Jan 31 15:50:25 2016, 21.25, 21.19, 20.88 
1454251838, Sun Jan 31 15:50:38 2016, 21.25, 21.19, 20.88 
1454251850, Sun Jan 31 15:50:50 2016, 21.25, 21.19, 20.88 
1454251863, Sun Jan 31 15:51:03 2016, 21.25, 21.19, 20.88 
1454251875, Sun Jan 31 15:51:15 2016, 21.25, 21.19, 20.88

temperatures.html temperature.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 src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var c = [];
        var t1 = [];
        var t2 = [];
        var t3 = [];
        var options = {
                chart: {
                    renderTo: 'chart',
                    defaultSeriesType: 'line',
                    zoomType: 'x'
                },
                title: {
                    text: 'temperature readings from Rasberry Pi'
                },
                xAxis: {
                    title: { text: 'Date Measurement' },
                    type: 'datetime',
                    series: [{ data: c}]
                },
                yAxis: { title: { text: 'Temperature (C)' }, ordinal: false },
                series: [{ data: t1, name : 'sensor A'}, { data: t2, name : 'sensor B'}, { data: t3, name : 'sensor C'}]
        };

        var jqxhr = $.get('temperatures.dat', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                val1=parseFloat(items[2])
                val2=parseFloat(items[3])
                val3=parseFloat(items[4])
                if(!isNaN(val1) && !isNaN(val2) && !isNaN(val3)) {
                  c.push(parseInt(items[0]*1000));
                  t1.push(val1);
                  t2.push(val2);
                  t3.push(val3);
                }
            })
            var chart = new Highcharts.Chart(options);

        });
    });
</script>
   </head>
   <body>
        <div id="chart" style="width: 600px; height: 400px; margin: 0 auto"></div>
   </body>
</html>

which generates the following plot 生成以下图

以上代码的输出[1]

However as it, it just doesn't recognize the time stamps and just plots following line numbers, 0, 1, 2, ... 但是，它只是不能识别时间戳，而只能按照行号0、1、2，...进行绘制。

If someone could point me in the right direction on how to modify the code I would be very grateful! 如果有人可以为我指出如何修改代码的正确方向，我将不胜感激！

( update （更新

Answer 1

Answering my own question, based on another example I found I managed to construct this working code. 根据另一个示例，我回答了自己的问题，发现自己设法构建了此工作代码。 The important point is to have data pairs (x,y) in each series, instead of separate x and y series. 重要的一点是每个系列中都应有数据对（x，y），而不是单独的x和y系列。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // Define and initialize "options"
    options = {
       chart: {
            renderTo: 'container',
            type: 'line',
            zoomType: 'x'
       },
       title: { text: 'temperature measurements' },
       xAxis: { type: 'datetime' },
       yAxis: { title: { text: 'Temperature (C)' } },
       series: []
    };

    // Read datafile
    $.get('temperatures.dat', function(data) {
        var series1 = { data: [], name: 'sensor A' };
        var series2 = { data: [], name: 'sensor B' };
        var series3 = { data: [], name: 'sensor C' };
        // Split the lines
        var lines = data.split('\n');
        // Slit each line into items separated by commas
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
            // Add 3600 for timezone offset and multiply by 1000 to have time in ms
            t=(parseInt(items[0])+3600)*1000;
            val1=parseFloat(items[2]);
            val2=parseFloat(items[3]);
            val3=parseFloat(items[4]);
            // Add to series if conversion was successful
            if(!isNaN(val1)) series1.data.push([t, val1]);
            if(!isNaN(val2)) series2.data.push([t, val2]);
            if(!isNaN(val3)) series3.data.push([t, val3]);
        });

        // Push the completed series
        options.series.push(series1,series2,series3);
        // Create the plot
        new Highcharts.Chart(options);
    });
});
</script>
</head>
   <body>
        <div id="container" style="width: 800px; height: 500px; margin: 0 auto"></div>
   </body>
</html>

用高图从CSV绘制不规则时间数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-02-01 09:49:54

用高图从CSV绘制不规则时间数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-02-01 09:49:54

解决方案1
1 已采纳 2016-02-01 09:49:54