草庐IT

javascript - 具有多个系列的 Highcharts 异步服务器加载

coder 2023-10-21 原文

我正在尝试按照其示例使用 Highcharts 的延迟加载

http://www.highcharts.com/stock/demo/lazy-loading

和他们的php代码

https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php

但我唯一得到的是一张空白图表,其中包含 2011 年的 2 天(示例数据)。 我的 PHP 代码:

<?php


// get the parameters

$callback = $_GET['callback'];
if (!preg_match('/^[a-zA-Z0-9_]+$/', $callback)) {
        die('Invalid callback name');
}

$start = $_GET['start'];
if ($start && !preg_match('/^[0-9]+$/', $start)) {
        die("Invalid start parameter: $start");
}

$end = $_GET['end'];
if ($end && !preg_match('/^[0-9]+$/', $end)) {
        die("Invalid end parameter: $end");
}
if (!$end) $end = mktime() * 1000;



// connect to MySQL
$link = mysqli_connect('localhost:3306', 'root', 'elektra','telegestione');
// set UTC+1 time
//mysql_query("SET time_zone = '+01:00'");

// set some utility variables
$range = $end - $start;
//$startTime = gmstrftime('%Y-%m-%d %H:%M:%S', $start / 1000);
$startTime= date('Y-m-d H:i:s', strtotime(gmstrftime('%Y-%m-%d %H:%M:%S', $start / 1000) . ' - 1 day'));
//$endTime = gmstrftime('%Y-%m-%d %H:%M:%S', $end / 1000);
$endTime= date('Y-m-d H:i:s', strtotime(gmstrftime('%Y-%m-%d %H:%M:%S', $end / 1000) . ' + 0 day'));

// find the right table
// two days range loads minute data
if ($range < 2 * 24 * 3600 * 1000) {
        if (!$link)     {
                        die('Could not connect: ' . mysqli_error());};  
                        echo "minute data2" ;
            $result = mysqli_query($link,"select 1000*unix_timestamp(q1.time) as time, q1.kwhg, q1.kwhc, q1.kwhi, q1.kwhfm, q2.test from (
SELECT
      (t1.dt) AS time,(case
     when t1.value>t2.value AND t2.value>0
          then abs(t1.value - t2.value)
     when t1.value>t2.value AND t2.value=0
          then t2.value
          else t1.value END)kwhg, 
     (case
     when t1.value1>t2.value1 AND t2.value1>0
          then abs(t1.value1 - t2.value1)
     when t1.value1>t2.value1 AND t2.value1=0
          then t2.value1
     when t1.value1=t2.value1 AND t1.value1>0 
        then abs(t1.value1 - t2.value1)
      else 0 END) kwhc, 
      (case
     when t1.value2>t2.value2 AND t2.value2>0
          then abs(t1.value2 - t2.value2)
     when t1.value2>t2.value2 AND t2.value2=0
          then t2.value2
     when t1.value2=t2.value2 AND t1.value2>0 
        then abs(t1.value2 - t2.value2)
      else 0 END)kwhi,
    (case
     when t1.value3>t2.value3 AND t2.value3>0
          then abs(t1.value3 - t2.value3)
     when t1.value3>t2.value3 AND t2.value3=0
          then t2.value3
     when t1.value3=t2.value3 AND t1.value3>0 
        then abs(t1.value3 - t2.value3)
      else 0 END) kwhfm
    FROM 
        (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t1
        JOIN
        (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t2
        on t1.dt = t2.dt + interval 15 minute) as q1
JOIN
    (select dataora, AVG(Test) as test from temperature where dataora between '$startTime' and '$endTime' GROUP BY date(dataora),hour(dataora))  as q2
    ON q1.time=q2.dataora");

 //one week range loads hourly data
} elseif ($range < 7 * 24 * 3600 * 1000) {
        if (!$link)     {
            die('Could not connect: ' . mysqli_error());};  
            echo "hourly data1" ;
    $result = mysqli_query($link,"select 1000*unix_timestamp(q1.time) as time, q1.kwhg, q1.kwhc, q1.kwhi, q1.kwhfm, q2.test from (
SELECT
      (t1.dt) AS time,(case
     when t1.value>t2.value AND t2.value>0
          then abs(t1.value - t2.value)
     when t1.value>t2.value AND t2.value=0
          then t2.value
          else t1.value END)kwhg, 
     (case
     when t1.value1>t2.value1 AND t2.value1>0
          then abs(t1.value1 - t2.value1)
     when t1.value1>t2.value1 AND t2.value1=0
          then t2.value1
     when t1.value1=t2.value1 AND t1.value1>0 
        then abs(t1.value1 - t2.value1)
      else 0 END) kwhc, 
      (case
     when t1.value2>t2.value2 AND t2.value2>0
          then abs(t1.value2 - t2.value2)
     when t1.value2>t2.value2 AND t2.value2=0
          then t2.value2
     when t1.value2=t2.value2 AND t1.value2>0 
        then abs(t1.value2 - t2.value2)
      else 0 END)kwhi,
    (case
     when t1.value3>t2.value3 AND t2.value3>0
          then abs(t1.value3 - t2.value3)
     when t1.value3>t2.value3 AND t2.value3=0
          then t2.value3
     when t1.value3=t2.value3 AND t1.value3>0 
        then abs(t1.value3 - t2.value3)
      else 0 END) kwhfm
    FROM 
        (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t1
        JOIN
        (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t2
        on t1.dt = t2.dt + interval 1 hour) as q1
JOIN
    (select dataora, AVG(Test) as test from temperature where dataora between '$startTime' and '$endTime' GROUP BY date(dataora),hour(dataora))  as q2
    ON q1.time=q2.dataora");

// one month range loads hourly data
} elseif ($range < 31 * 24 * 3600 * 1000) {
        if (!$link)     {
            die('Could not connect: ' . mysqli_error());};  
            echo "hourly data2" ;
    $result = mysqli_query($link,"select 1000*unix_timestamp(q1.time) as time, q1.kwhg, q1.kwhc, q1.kwhi, q1.kwhfm, q2.test from (
SELECT
      (t1.dt) AS time,(case
     when t1.value>t2.value AND t2.value>0
          then abs(t1.value - t2.value)
     when t1.value>t2.value AND t2.value=0
          then t2.value
          else t1.value END)kwhg, 
     (case
     when t1.value1>t2.value1 AND t2.value1>0
          then abs(t1.value1 - t2.value1)
     when t1.value1>t2.value1 AND t2.value1=0
          then t2.value1
     when t1.value1=t2.value1 AND t1.value1>0 
        then abs(t1.value1 - t2.value1)
      else 0 END) kwhc, 
      (case
     when t1.value2>t2.value2 AND t2.value2>0
          then abs(t1.value2 - t2.value2)
     when t1.value2>t2.value2 AND t2.value2=0
          then t2.value2
     when t1.value2=t2.value2 AND t1.value2>0 
        then abs(t1.value2 - t2.value2)
      else 0 END)kwhi,
    (case
     when t1.value3>t2.value3 AND t2.value3>0
          then abs(t1.value3 - t2.value3)
     when t1.value3>t2.value3 AND t2.value3=0
          then t2.value3
     when t1.value3=t2.value3 AND t1.value3>0 
        then abs(t1.value3 - t2.value3)
      else 0 END) kwhfm
    FROM 
        (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t1
        JOIN
        (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t2
        on t1.dt = t2.dt + interval 1 hour) as q1
JOIN
    (select dataora, AVG(Test) as test from temperature where dataora between '$startTime' and '$endTime' GROUP BY date(dataora),hour(dataora))  as q2
    ON q1.time=q2.dataora");

// one year range loads daily data
} elseif ($range < 15 * 31 * 24 * 3600 * 1000) {
        if (!$link)     {
            die('Could not connect: ' . mysqli_error());};  
            echo "daily data2" ;
    $result = mysqli_query($link,"select 1000*unix_timestamp(q1.time) as time, q1.kwhg, q1.kwhc, q1.kwhi, q1.kwhfm, q2.test from (
SELECT
      (t1.dt) AS time,(case
     when t1.value>t2.value AND t2.value>0
          then abs(t1.value - t2.value)
     when t1.value>t2.value AND t2.value=0
          then t2.value
          else t1.value END)kwhg, 
     (case
     when t1.value1>t2.value1 AND t2.value1>0
          then abs(t1.value1 - t2.value1)
     when t1.value1>t2.value1 AND t2.value1=0
          then t2.value1
     when t1.value1=t2.value1 AND t1.value1>0 
        then abs(t1.value1 - t2.value1)
      else 0 END) kwhc, 
      (case
     when t1.value2>t2.value2 AND t2.value2>0
          then abs(t1.value2 - t2.value2)
     when t1.value2>t2.value2 AND t2.value2=0
          then t2.value2
     when t1.value2=t2.value2 AND t1.value2>0 
        then abs(t1.value2 - t2.value2)
      else 0 END)kwhi,
    (case
     when t1.value3>t2.value3 AND t2.value3>0
          then abs(t1.value3 - t2.value3)
     when t1.value3>t2.value3 AND t2.value3=0
          then t2.value3
     when t1.value3=t2.value3 AND t1.value3>0 
        then abs(t1.value3 - t2.value3)
      else 0 END) kwhfm
    FROM 
        (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt)) t1
        JOIN
        (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt)) t2
        on t1.dt = t2.dt + interval 1 day) as q1
JOIN
    (select dataora, AVG(Test) as test from temperature where dataora between '$startTime' and '$endTime' GROUP BY date(dataora))  as q2
    ON q1.time=q2.dataora");

// greater range loads monthly data
} else {
        if (!$link)     {
            die('Could not connect: ' . mysqli_error());};
                echo "monthly data2" ;
    $result = mysqli_query($link,"select 1000*unix_timestamp(q1.time) as time, q1.kwhg, q1.kwhc, q1.kwhi, q1.kwhfm, q2.test from (
SELECT
      (t1.dt) AS time,(case
     when t1.value>t2.value AND t2.value>0
          then abs(t1.value - t2.value)
     when t1.value>t2.value AND t2.value=0
          then t2.value
          else t1.value END)kwhg, 
     (case
     when t1.value1>t2.value1 AND t2.value1>0
          then abs(t1.value1 - t2.value1)
     when t1.value1>t2.value1 AND t2.value1=0
          then t2.value1
     when t1.value1=t2.value1 AND t1.value1>0 
        then abs(t1.value1 - t2.value1)
      else 0 END) kwhc, 
      (case
     when t1.value2>t2.value2 AND t2.value2>0
          then abs(t1.value2 - t2.value2)
     when t1.value2>t2.value2 AND t2.value2=0
          then t2.value2
     when t1.value2=t2.value2 AND t1.value2>0 
        then abs(t1.value2 - t2.value2)
      else 0 END)kwhi,
    (case
     when t1.value3>t2.value3 AND t2.value3>0
          then abs(t1.value3 - t2.value3)
     when t1.value3>t2.value3 AND t2.value3=0
          then t2.value3
     when t1.value3=t2.value3 AND t1.value3>0 
        then abs(t1.value3 - t2.value3)
      else 0 END) kwhfm
    FROM 
        (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t1
        JOIN
        (SELECT (dataora) dt, MAX(kwhg) value, MAX(kwhc) value1, MAX(kwhi) value2, MAX(kwhfm) value3  FROM misure where dataora between '$startTime' and '$endTime' GROUP BY date(dt),hour(dt)) t2
        on t1.dt = t2.dt + interval 1 month) as q1
JOIN
    (select dataora, AVG(Test) as test from temperature where dataora between '$startTime' and '$endTime' GROUP BY date(dataora),hour(dataora))  as q2
    ON q1.time=q2.dataora");
};

$rows = array();
while ($row = mysqli_fetch_assoc($result)) {
        //echo $a= "hello";
        extract($row);

        $rows[] = "[$time,$test,$kwhg,$kwhc,$kwhi,$kwhfm]";
                                            }

// print it
header('Content-Type: text/javascript');
//echo $range;
//echo $startTime;
//echo $end;
echo "/* console.log(' range = $range, start = $start, end = $end, startTime = $startTime, endTime = $endTime '); */";
echo $callback ."([\n" . join(",\n", $rows) ."\n]);";

?>

如演示所示, Highcharts 的输出数据应该是正确的,但我无法初始化图表或显示任何系列...

$(function() {

    // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
    $.getJSON('grafico_nuovo.php?callback=?', function(data) {

        // Add a null value for the end date 
        data = [].concat(data, [[Date.GMT(2013, 9, 14, 19, 59), null, null, null, null]]);

        // create the chart
        $('#container').highcharts('StockChart', {
            chart : {
                type: 'spline',
                zoomType: 'xy'
            },

            navigator : {
                adaptToUpdatedData: false,
                series : {
                    data : data
                }
            },

            scrollbar: {
                liveRedraw: false
            },

            title: {
                text: 'AAPL history by the minute from 1998 to 2011'
            },

            subtitle: {
                text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
            },

            rangeSelector : {
                buttons: [{
                    type: 'hour',
                    count: 1,
                    text: '1h'
                }, {
                    type: 'day',
                    count: 1,
                    text: '1d'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1y'
                }, {
                    type: 'all',
                    text: 'All'
                }],
                inputEnabled: true, // it supports only days
                selected : 2 // day
            },

            xAxis : {
                events : {
                    afterSetExtremes : afterSetExtremes
                },
                minRange: 3600 * 1000 // one hour
            },

            series : [{
                data : data,
                dataGrouping: {
                    enabled: false
                }
            }]
        });
    });
});


/**
 * Load new data depending on the selected min and max
 */
function afterSetExtremes(e) {

    var currentExtremes = this.getExtremes(),
        range = e.max - e.min,
        chart = $('#container').highcharts();

    chart.showLoading('Loading data from server...');
    $.getJSON('grafico_nuovo.php?start='+ Math.round(e.min) +
            '&end='+ Math.round(e.max) +'&callback=?', function(data) {

        chart.series[0].setData(data[0]);
        chart.hideLoading();
    });

}

感谢任何帮助或建议 乔治奥

最佳答案

什么 echo $callback."([\n".join(",\n", $rows) ."\n]);"; 返回?我建议通过 json_encode() 将您的数组转换为 json,然后在 javascript 中使用。

编辑:

您无权访问脚本中的图表,而且您只能在现有系列上使用 setData,而不能在像 chart.series[2] 这样不存在的系列上使用。你应该调用addSeries

 val1 = [];
    val2 = [];
    val3 = [];
    val4 = [];
    val5 = [];
    $.each(data, function (key, value) {
        val1.push([value[0], value[1]]);
        val2.push([value[0], value[2]]);
        val3.push([value[0], value[3]]);
        val4.push([value[0], value[4]]);
        val5.push([value[0], value[5]]);
    });
chart.series[0].setData(val1);
    chart.addSeries({
        data: val2
    });

    chart.addSeries({
        data: val3
    });

    chart.addSeries({
        data: val4
    });

    chart.addSeries({
        data: val5
    });



    chart.hideLoading();

http://jsfiddle.net/4knAX/2/

关于javascript - 具有多个系列的 Highcharts 异步服务器加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21136787/

有关javascript - 具有多个系列的 Highcharts 异步服务器加载的更多相关文章

  1. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  3. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情? 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中,使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件,我们在StackOverflow上找到一个类似的问题

  4. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时,它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器?这是不可能的吗?谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  5. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组,我需要根据最早的事件循环打印。在这种情况下,我需要打印付款和维护日期,如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询,用于查找maintenance和payment项目(非排他性查询),并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  6. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  7. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe? - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗?我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe,无需等待进程完成是否有任何ruby​​gems会支持我的问题? 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  8. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  9. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间,其中100是最大分数。计算平均分并将字母等级作为字符串返回,即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join,

  10. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

随机推荐