javascript - HTML WebサイトのSQLデータの範囲セレクター付きハイチャート

原文 javascript php jquery highcharts

チャートに範囲セレクターを追加したいのですが、その方法がわかりません。私はjsfiddleからいくつかの例を試しましたが、うまくいきません。

これが私のコードです:

<meta http-equiv="refresh" content="65;url=http://localhost/23-1_chart.php"/>
<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/XXX.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="data.js" ></script>
</head>
<body>


<div id="chart" style="height: 400px; margin: 0 auto"></div>

<script>
$(function() {
//Highcharts with mySQL and PHP - Ajax101.com

var Voc_value = [];
var time = [];
var switch1 = true;
$.get('23-1_values.php', function(data) {

data = data.split('/');
for (var i in data) {
if (switch1 == true) {
time.push(data[i]);   
switch1 = false;
} else {
  Voc_value.push(parseFloat(data[i]));
  switch1 = true;
}

}
time.pop();  // cursor

$('#chart').highcharts({
chart : {
type : 'spline'
},
title : {
  text : 'VOC-Value-A.ROOM'
},
subtitle : {
  text : 'Room A'
},
xAxis : {
 title : {
 text : 'time'
 },
categories : time
 },
yAxis : {
title : {
text : 'VOC-value in ppm'
},
labels : {
  formatter : function() {
    return this.value + 'VOCvalue'
  }
 }
},
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : 'ppm'
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineColor : '#666666',
lineWidth : 1
}
}
},
series : [{

name : 'VOC-value in ppm',
data : Voc_value
}]
});
});
});</script>


最初にSQL値を読み取り、それを23-1_values.phpに入れます。
私のsql値はこのphp-page 23.1_values.phpから読み取っていて、チャートが作成されます。横軸に日時(day-hour-min-s)、縦軸にppm値があります
取得する値が多すぎて、dateformatを減らし、グラフに範囲セレクターを追加したい。

どうすればできますか?

ありがとう
答え
私は自分が何をしたか本当にわかりませんが、現在は機能しています。助けてくれてありがとうございます。コードは次のとおりです。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>XXXXXXXXX</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {

    $.getJSON("XXX.php", function(data) {

    // Create a timer
    var start = + new Date();

    // Create the chart
    $('#container').highcharts('StockChart', {
        chart: {
            events: {
                load: function(chart) {
                    this.setTitle(null, {
                        text: 'Built chart at '+ (new Date() - start) +'ms'
                    });
                }
            },
            zoomType: 'x'
        },

        rangeSelector: {
            buttons: [{
                type: 'day',
                count: 1,
                text: '24h'
            }, {
                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: 0
        },

        yAxis: {
            title: {
                text: 'XX'
            }
        },

        title: {
            text: 'XX'
        },

        subtitle: {
            text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
        },

        series: [{
            name: 'XX',
            type: 'area',
            data: data,
            tooltip: {
                valueDecimals: 1,
                valueSuffix: ' ppm'
            },
            fillColor : {
                linearGradient : {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
            },
        }/*,
        {
            name: 'Temperatur',
            type: 'area',
            data: datarasp,
            tooltip: {
                valueDecimals: 1,
                valueSuffix: ' °C'
            },
            fillColor : {
                linearGradient : {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
            },
        }*/]

     });
     });
   });
    </script>
   </head>
   <body>


   <div id="container" style="height: 500px; min-width: 500px"></div>
   </body>
   </html>


それが誰かを助けることを願って
関連記事

javascript - JSP内のインラインJavaScriptに正しいHTMLを書き込むにはどうすればよいですか?

javascript - AngularJS:JSON文字列を整数または浮動小数点数に解析して、フォーム番号フィールドに表示する方法

javascript - jquery fade toggle各ボタンにフェード効果を追加する方法

javascript - キープレスのリダイレクト用のAngularJSコードは、サービスまたはディレクティブでなければなりませんか?

javascript - AngularJS-/以外のパスでパーシャルが読み込まれない

javascript - angularjsドラッグアンドドロップHTMLコンテンツ

javascript - コンテンツをXMLファイルに更新する

java - URLヒット時のエラー、filenotfoundexceptionによると

javascript - Googleスクリプトは日付に基づいてスプレッドシート間で範囲をコピーします

javascript - JavaScript:別のスクリプトに追加されたdivへのアクセスなし