質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1944閲覧

ゲージのチャートをストリームにしたいです。

vanille

総合スコア16

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/07/11 02:14

いつもありがとうございます。
Anychart.jsで気象のダッシュボードを作成するために、下記のサンプルのダッシュボードをストリームにするテストをしているのですが、
http://www.anychart.com/products/anychart/gallery/Linear_Gauges/Weather_Dashboard.php
イメージ説明

AnychartのData streamが応用出来ず、
https://docs.anychart.com/7.3.1/Working_with_Data/Data_Manipulation

push.jsを使って、左の温度計の温度をデータと連動してみたのですが、データは読んだものの、そのままスクリプト全体をfunctionに入れてしまったせいで画面がループしてしまい、上書きされません。修正点、別の方法等をアドバイスしていただければと思い投稿しました。どうぞよろしくお願いします。

html

1<html> 2 <head> 3 <meta charset="UTF-8"> 4 <script src="https://cdn.anychart.com/js/7.14.0/anychart-bundle.min.js"></script> 5 <link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css" /> 6 <title>Weather Dashboard</title> 7 <style> 8html, body, #container { 9 width: 100%; 10 height: 100%; 11 margin: 0; 12 padding: 0; 13} 14</style> 15 </head> 16 <body> 17<div id="container"></div> 18 19<!-- Java Script --> 20<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 21<script type="text/javascript" src="./js/push.js"></script> 22<script type="text/javascript"> 23$(function() { 24 25 // content のサイズを取得しておく 26 var width = parseInt($('#container').css('width')); 27 28 // オブジェクトを生成 29 var push = new Push('./push.php'); 30 31 // 更新時の処理を登録 32 push.onUpdate = function(json){ 33 // 下のscriptを挿入 34 // Create table to place gauges and information 35 layoutTable = anychart.standalones.table(4, 3); 36 layoutTable.hAlign('center') 37 .vAlign('middle') 38 .useHtml(true) 39 .fontSize(16) 40 .cellBorder(null); 41//-----------------------------略------------------------------------ 42 43 44 return gauge 45 } 46 }; 47 48 // 終了時の処理を登録 49 push.onSuccess = function(){ 50 console.log('finished'); 51 }; 52 53 // エラー時の処理を登録 54 push.onError = function(){ 55 console.log('error occured'); 56 57 // 再起動 58 location.reload(); 59 }; 60 61 62 // 受信開始 63 push.start(); 64 65}); 66</script> 67<script type="text/javascript"> 68 // サンプルのスクリプト 69anychart.onDocumentReady(function () { 70 // Create table to place gauges and information 71 layoutTable = anychart.standalones.table(4, 3); 72 layoutTable.hAlign('center') 73 .vAlign('middle') 74 .useHtml(true) 75 .fontSize(16) 76 .cellBorder(null); 77 78 // Set height and width for some cols and rows for layout table 79 layoutTable.getCol(2).width('50%'); 80 layoutTable.getRow(0) 81 .height(60) 82 .fontSize(18); 83 layoutTable.getRow(1).height(60); 84 layoutTable.getRow(3) 85 .height(60) 86 .fontSize(14) 87 .vAlign('top'); 88 89 90 91 //-----------------------------略------------------------------------ 92 return gauge 93 } 94}); 95 96 </script> 97</body> 98</html> 99 100

JS

1/** 2 * push.js 3 4 */ 5var Push = (function ($) { 6 7 // Constructor 8 function Push(url) { 9 this.url = url; 10 } 11 12 /** 13 * 引数のテキストが JSON かどうか 判別する内部関数 14 */ 15 var isJSON = function (arg) { 16 arg = (typeof arg === "function") ? arg() : arg; 17 if (typeof arg !== "string") { 18 return false; 19 } 20 try { 21 arg = (!JSON) ? eval("(" + arg + ")") : JSON.parse(arg); 22 return true; 23 } catch (e) { 24 return false; 25 } 26 }; 27 28 /** 29 * データ更新時に呼ばれるイベントハンドラ 30 */ 31 Push.prototype.onUpdate = function (json) { 32 console.log('update'); 33 } 34 35 /** 36 * 通信正常終了時に呼ばれるイベントハンドラ 37 */ 38 Push.prototype.onSuccess = function () { 39 console.log('success'); 40 } 41 42 /** 43 * 通信異常終了時に呼ばれるイベントハンドラ 44 */ 45 Push.prototype.onError = function () { 46 console.log('error'); 47 } 48 49 /** 50 * 通信を開始するメソッド 51 */ 52 Push.prototype.start = function () { 53 var mytimer = null; 54 55 var push = this; 56 57 $.ajax({ 58 type: 'get', 59 url: this.url, 60 cache: false, 61 xhrFields: { 62 onloadstart: function () { 63 var xhr = this; 64 //console.log('start'); 65 66 // 前回取得したデータの文字数 67 var textlength = 0; 68 69 // データが来るまで待つ 70 mytimer = setInterval(function () { 71 72 // 受信済みテキストを保存 73 var text = xhr.responseText; 74 75 // 前回の取得からの差分を取得 76 var newText = text.substring(textlength); 77 78 // JSONデータを取得 79 var lines = newText.split("\n"); 80 81 if (text.length > textlength) { 82 // 長さを更新 83 textlength = text.length; 84 85 lines.forEach(function (line) { 86 if (isJSON(line)) { 87 // 正常な JSON データの時 88 var json = JSON.parse(line); 89 90 // 更新 91 if (push.onUpdate) { 92 push.onUpdate(json); 93 } 94 } 95 }); 96 } 97 98 }, 100); 99 } 100 }, 101 success: function () { 102 //console.log('finished!'); 103 104 if (push.onSuccess) { 105 push.onSuccess(); 106 } 107 108 // 一秒後にタイマー停止 109 setTimeout(function () { 110 clearInterval(mytimer); 111 }, 1000); 112 }, 113 error: function (XMLHttpRequest, textStatus, errorThrown) { 114 //$("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status); 115 //$("#textStatus").html("textStatus : " + textStatus); 116 //$("#errorThrown").html("errorThrown : " + errorThrown.message); 117 118 if (push.onError) { 119 push.onError(); 120 } 121 122 // タイマー停止 123 clearInterval(mytimer); 124 } 125 }); 126 127 } 128 129 return Push; 130 131})(jQuery);

php

1<?php 2// push.php 3 4function output_chunk( $chunk ) { 5 echo sprintf( "%x\r\n", strlen( $chunk ) ); 6 echo $chunk . "\r\n"; 7} 8 9/** 10 * Ajaxによるリクエストかどうか 11 * 12 * @return boolean True or False 13 */ 14function isAjax() { 15 if ( isset( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) == 'xmlhttprequest' ) { 16 return true; 17 } 18 return false; 19} 20 21 22if ( isAjax() ) { 23 // Ajax のアクセスのみ受け付ける 24 25 header( "Content-type: application/octet-stream" ); 26 header( "Transfer-encoding: chunked" ); 27 ob_flush(); 28 flush(); 29 30 $i = 0; 31 while ( !connection_aborted() ) { 32 // クライアントからの接続が続いている間繰り返す 33 34 // ファイルを読み込み専用でオープンする 35 $fp = fopen( 'ondo.txt', 'r' ); 36 // ファイルから一行読み込む 37 $line = fgets( $fp ); 38 39 // ファイルをクローズする 40 fclose( $fp ); 41 42 // JSON に入れるデータ 43 $id = $line; 44 $message = "hoge" . $i; 45 $createdAt = date( "Y-m-d H:i:s" ); 46 47 // JSON データを作る 48 $json = json_encode( 49 array( 50 "id" => $id, 51 "message" => $message, 52 "createdAt" => $createdAt 53 ) 54 ); 55 56 // データを掃き出す 57 output_chunk( 58 $json . str_repeat( ' ', 8000 ) . "\n" 59 ); 60 ob_flush(); 61 flush(); 62 63 // 一秒停止 64 sleep( 1 ); // 一秒ごとに生成 65 66 $i++; 67 } 68 echo "0\r\n\r\n"; 69} else { 70 // Ajax アクセス以外はトップページへ誘導 71 header( "Location: http://" . $_SERVER[ "SERVER_NAME" ] . "/" ); 72 73}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

結局のところ、Anychartをやめて、Fusion.jsのReagltimegaugeを応用して、dashboardを作成しています。ありがとうございます。

投稿2017/07/18 02:12

vanille

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問