HighCharts没有价值

时间:2014-05-08 10:03:12

标签: javascript jquery node.js sqlite highcharts

我尝试从sqlite数据库中查看温度历史记录,但我没有从服务器端获得价值。我使用node.js,socket.io和HighCharts库。我认为,它的客户端问题。服务器端:

io.sockets.on('connection', function(socket){
setInterval(function(){
var current_temp = db.all("SELECT * FROM (SELECT * FROM temp_irasai WHERE laikas ORDER BY laikas);",
  function(err, rows){
     if (err){
           console.log('Error serving querying database. ' + err);
           return;
                  }
     data = {temp_irasai:[rows]};
    socket.emit('istorija', data);
});
}, 5000);
});  

客户方:

<script type="text/javascript">
var socket = io.connect('http://ip:3000');
$(document).ready(function() {
   chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'x',
        spaceRight: 20,         
        events: {
            load: function (){
                socket.on('istorija', function(data){
            var series  = chart.series[0];
        var i = 0;
        while (data.temp_irasai[0][i])
        {
           series.data.push([data.temp_irasai[0][i].laikas, data.temp_irasai[0][i].laipsnis]);
           i++;
        }
     chart.addSeries(series);
                });
            }
        }
    },
    title: {
        text: 'Temperatūra'
    },
    subtitle: {
            text: 'Norint priartinti paspauskite ant grafiko ir pažymekite norimą plotą',
            align: 'right',  
           },       
    xAxis: {
           type: 'datetime',
           tickPixelInterval: 150,
           maxZoom: 20 * 1000,
           title: {
              text: 'Time',
              margin: 15
           }},
    yAxis: {
           minPadding: 0.2,
           maxPadding: 0.2,
         showFirstLabel: false,
           title: {
               text: 'Temperatūra \u00B0C',
               margin: 15
           }},
         plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, Highcharts.getOptions().colors[0]],
                                    [1, 'rgba(2,0,0,0)'],
                                ]
                            },
                            lineWidth: 1,
                            marker: {
                                enabled: false,
                                states: {
                                    hover: {
                                        enabled: true,
                                        radius: 5
                                    }
                                }
                            },
                            shadow: false,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        },
                    },
        series: [{
        name: 'DS18B20 jutiklis (\u00B10.5\u00B0C)',
        type: 'area',
        data: []
    }]
    });        
});
    </script>   

和数据库示例:

CREATE TABLE temp_irasai(laikas integer PRIMARY KEY, laipsnis real);

INSERT INTO "temp_irasai" VALUES(1399533644551,20.4);
INSERT INTO "temp_irasai" VALUES(1399533646507,20.4);
INSERT INTO "temp_irasai" VALUES(1399533646547,20.4);
INSERT INTO "temp_irasai" VALUES(1399542709224,21.5);
COMMIT;

2 个答案:

答案 0 :(得分:0)

您的系列中没有给出数据设置您的值数据,它肯定会加载高级图表,祝您好运!

type: 'area', data: []

在这里添加系列数据。

答案 1 :(得分:0)

这部分是错的:

load: function () {
    socket.on('istorija', function (data) {
        var series = chart.series[0];
        var i = 0;
        while (data.temp_irasai[0][i]) {
            series.data.push([data.temp_irasai[0][i].laikas, data.temp_irasai[0][i].laipsnis]);
            i++;
        }
        chart.addSeries(series);
    });
}

您应该添加点,或使用setData,如下所示:

load: function () {
    socket.on('istorija', function (data) {
        var series = chart.series[0];
        var i = 0;
        var d = [];
        while (data.temp_irasai[0][i]) {
            d.push([data.temp_irasai[0][i].laikas, data.temp_irasai[0][i].laipsnis]);
            i++;
        }
        series.setData(d);
    });
}