Highchartsの更新方法

現在、CGI より、server からJSON データを取得し、Highstocksを使ってマルチトレンド図を描いていますが、 WEB画面を立ち上がるだけ、最新JSONデータでトレンド図を描けているですが、その後、更新ができず、困っています。その更新方法を知っている方から、是非教えて下さい。

No.5 回答者： fujillin 回答日時： 2013/07/16 22:27

A No4です。

＞色々探しましたので、なかなか方法が見つかりませんでしたので皆様に聞いている訳で御座います。
てーことは、No4のものとは違う、『Highstocks』ということなのでしょうか？

こちらではここの質問に書いてあること以外の情報はまったくわからないので、それ以外は推測するだけなのですが、これまでのいろいろな推測でどれが当たっていて、どれがはずれているのかもわからない状態です。

それなので、憶測に憶測を重ねるしか方法はないのですが…
別の『Highstocks』であるなら、その配布元には、大概、使い方の説明があると思います。また、それが一番確かな説明とも言えますので、使い方に関することはそちらで確認なさるのがよろしいのではないでしょうか。（多分、A No4で示したような説明が、きっと、その配布元サイトにもあるはずと推測します。）

この回答へのお礼

ご親切の回答を頂き、どうもありがとうございました。

お礼日時：2013/07/20 16:41

No.4 回答者： fujillin 回答日時： 2013/07/16 18:21

Ａ Ｎｏ3です。

＞教えて頂きたいのはまさにHighstocksのことです。
Highstocksってまったく知りませんので、使ってらっしゃる質問者様のほうがよほどよくご存知と思いますが…

一応、検索してみましたが、これのことでしょうか？
　http://www.highcharts.com/products/highstock

もしそうだとするなら、documentationによれば、同じ要素に新しいチャートを書くのなら、一旦消してから書けとありますけど？
　http://api.highcharts.com/highcharts#Chart.destr …
私は英語がからきしなので、（↑）の意味も違っているかもしれませんので、ご自身で確認なさってください。

この回答へのお礼

ご親切の回答を頂き、どうもありがとうございました。

WEB上では色々探しましたので、なかなか方法が見つかりませんでしたので、皆様に聞いている訳で御座います。

お礼日時：2013/07/16 21:48

No.3 回答者： fujillin 回答日時： 2013/07/15 15:19

A No1、2です。

＞jQuery.getJSON('iTrendData.json',function(data) を
＞再実行してもdata が更新されないことです
同じことの繰り返しになるので、これ以上は書きませんが、前にもかきましたように、
　iTrendData.json にアクセスした時に、cgiは自動で更新データを返す仕組みになっているのでしょうか？

普通に考えれば、cgiは同じデータを返すか、あるいは（別のシステムからデータが更新されていて）常に最新データが返されるなどという仕組みかでしょう。
このあたりがちゃんとできているのら、Highstocksのデータ更新の方法が間違っているのでは？（Highstocksは知りませんので、ご確認下さい）

ajaxでの再リクエストに対する返信内容を直に確認すれば、更新されたデータになっているかどうか簡単にわかるでしょうから、どこがおかしいのかも特定できるはずです。

この回答へのお礼

ご回答頂き、どうもありがとうございました。

CGIは経験があるので、その動作は確認しており、教えて頂きたいのはまさにHighstocksのことです。

お礼日時：2013/07/16 13:18

No.2 回答者： fujillin 回答日時： 2013/07/14 23:36

A No1です。

Highstocksなるものをわかっていませんので、推測のなりますが、ご提示のコードでロード時に表示はできているのですよね。

No1に書いた内容の繰り返しになってしまいますが…
通信方法としては同様の方法で更新するデータを受け取ることは可能ですが、サーバへどのようなリクエストを行うことで、更新データが返される仕組みになさっているのでしょうか？

普通のUIで推測するなら、ユーザの何らかのアクションに応じて（オプションなどの）データを送信し、サーバはそれに対応した（更新）データを返すというものですが、そのような仕組みになっているでしょうか。

Highstocksでデータを更新して表示するのが、初期設定と同じでよいのであるなら、ご提示のajax通信を（データを変えて）再度実行すればよいのではないでしょうか。

この回答へのお礼

ご回答頂き、どうもありがとうございました。

最新JSON データの準備は問題がないので、問題になるのは << jQuery.getJSON('iTrendData.json', function(data)>>を再実行してもdata が更新されないことです。

お礼日時：2013/07/15 07:54

No.1 回答者： fujillin 回答日時： 2013/07/14 18:13

よくわかっていませんが、

最初にjasonデータを受け取るのにどのような方法を用いていらっしゃるのでしょうか。
想像するところではajaxではないかと思いますが、もしそうであるなら、再度リクエストを行えば更新は可能なはずです。

ただし、同じリクエストを行っても返されるデータは同じはずなので、更新にはならない可能性があります。
cgi側に自動で更新するような仕組みがあるか、スクリプトからリクエストする際に、更新されたデータをリクエストする仕組みが必要そうですが、そのあたりは大丈夫でしょうか。

この回答へのお礼

ご回答頂き、どうもありがとうございました。

Javascript など初めてなので、ネット上のサンプルを見て、以下のようなhtmlを作りました(Javascript部分のみ)。

最新JSON データ はJavascript よりサーバCGIを通って、準備されていることは確認しております。

jQuery(function(){
Highcharts.setOptions({
global: {
useUTC: false
}
});
});
jQuery(function(){
jQuery.getJSON('iTrendData.json', function(data) {
var Produce = [];
var Consum = [];
var Buy = [];
var Sale = [];
var SelfRate = [];
var dataLength = data.length;
for (var i = 0; i < dataLength; i++)
{
Produce.push([ data[i][0], data[i][1] ]);
Consum.push([ data[i][0], data[i][2] ]);
Buy.push([ data[i][0], data[i][3] ]);
Sale.push([ data[i][0], data[i][4] ]);
SelfRate.push([ data[i][0], data[i][5] ]);
}
jchart = new Highcharts.StockChart({
chart: {
renderTo: 'TrendChart',
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false,
selected: 1
},
title: {
text: 'Trend Graphics' ,
fontsize: 26
},
credits: {
text: ''
},
yAxis: {
lineWidth: 0,
offset: 10,
labels: {
align: 'right',
x: -3,
y: 6
},
plotLines : [{
value : 100,
color : 'red',
dashStyle : 'shortdash',
width : 2
}]
},
legend: {
enabled: true,
align: 'right',
layout: 'vertical',
verticalAlign: 'top',
y: 100,
},
navigator : {
enabled : false
},

series: [{
name: 'Produce',
data: Produce,
type: 'spline',
tooltip: {
yDecimals: 1
}
},{
name: 'Consum',
data: Consum,
type: 'spline',
tooltip: {
yDecimals: 1
}
},{
name: 'Buy',
data: Buy,
type: 'spline',
tooltip: {
yDecimals: 1
}
},{
name: 'Sale',
data: Sale,
type: 'spline',
tooltip: {
yDecimals: 1
}
},{
name: 'SelfRate',
data: SelfRate,
type: 'spline',
tooltip: {
yDecimals: 1
}
}]
});
});
})

お礼日時：2013/07/14 21:36