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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 536

vanille

score 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>
        <head>
        <meta charset="UTF-8">
        <script src="https://cdn.anychart.com/js/7.14.0/anychart-bundle.min.js"></script>
        <link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css" />
        <title>Weather Dashboard</title>
        <style>
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>
        </head>
        <body>
<div id="container"></div>

<!-- Java Script --> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript" src="./js/push.js"></script> 
<script type="text/javascript">
$(function() {

  // content のサイズを取得しておく
  var width  = parseInt($('#container').css('width'));

  // オブジェクトを生成
  var push = new Push('./push.php');

  // 更新時の処理を登録
  push.onUpdate = function(json){ 
    // 下のscriptを挿入
     // Create table to place gauges and information
    layoutTable = anychart.standalones.table(4, 3);
    layoutTable.hAlign('center')
            .vAlign('middle')
            .useHtml(true)
            .fontSize(16)
            .cellBorder(null);
//-----------------------------略------------------------------------


        return gauge
    }
  };

  // 終了時の処理を登録
  push.onSuccess = function(){
      console.log('finished');
  };

  // エラー時の処理を登録
  push.onError = function(){
      console.log('error occured');

      // 再起動
      location.reload();
  };


  // 受信開始
  push.start();

});
</script> 
<script type="text/javascript">   
 // サンプルのスクリプト      
anychart.onDocumentReady(function () {
    // Create table to place gauges and information
    layoutTable = anychart.standalones.table(4, 3);
    layoutTable.hAlign('center')
            .vAlign('middle')
            .useHtml(true)
            .fontSize(16)
            .cellBorder(null);

    // Set height and width for some cols and rows for layout table
    layoutTable.getCol(2).width('50%');
    layoutTable.getRow(0)
            .height(60)
            .fontSize(18);
    layoutTable.getRow(1).height(60);
    layoutTable.getRow(3)
            .height(60)
            .fontSize(14)
            .vAlign('top');



 //-----------------------------略------------------------------------
        return gauge
    }
});

        </script>
</body>
</html>
/**
 * push.js

 */
var Push = (function ($) {

    // Constructor
    function Push(url) {
        this.url = url;
    }

    /**
     * 引数のテキストが JSON かどうか 判別する内部関数
     */
    var isJSON = function (arg) {
        arg = (typeof arg === "function") ? arg() : arg;
        if (typeof arg !== "string") {
            return false;
        }
        try {
            arg = (!JSON) ? eval("(" + arg + ")") : JSON.parse(arg);
            return true;
        } catch (e) {
            return false;
        }
    };

    /**
     * データ更新時に呼ばれるイベントハンドラ
     */
    Push.prototype.onUpdate = function (json) {
        console.log('update');
    }

    /**
     * 通信正常終了時に呼ばれるイベントハンドラ
     */
    Push.prototype.onSuccess = function () {
        console.log('success');
    }

    /**
     * 通信異常終了時に呼ばれるイベントハンドラ
     */
    Push.prototype.onError = function () {
        console.log('error');
    }

    /**
     * 通信を開始するメソッド
     */
    Push.prototype.start = function () {
        var mytimer = null;

        var push = this;

        $.ajax({
            type: 'get',
            url: this.url,
            cache: false,
            xhrFields: {
                onloadstart: function () {
                    var xhr = this;
                    //console.log('start');

                    // 前回取得したデータの文字数
                    var textlength = 0;

                    // データが来るまで待つ
                    mytimer = setInterval(function () {

                        // 受信済みテキストを保存                    
                        var text = xhr.responseText;

                        // 前回の取得からの差分を取得
                        var newText = text.substring(textlength);

                        // JSONデータを取得
                        var lines = newText.split("\n");

                        if (text.length > textlength) {
                            // 長さを更新
                            textlength = text.length;

                            lines.forEach(function (line) {
                                if (isJSON(line)) {
                                    // 正常な JSON データの時
                                    var json = JSON.parse(line);

                                    // 更新
                                    if (push.onUpdate) {
                                        push.onUpdate(json);
                                    }
                                }
                            });
                        }

                    }, 100);
                }
            },
            success: function () {
                //console.log('finished!');

                if (push.onSuccess) {
                    push.onSuccess();
                }

                // 一秒後にタイマー停止
                setTimeout(function () {
                    clearInterval(mytimer);
                }, 1000);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //$("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status);
                //$("#textStatus").html("textStatus : " + textStatus);
                //$("#errorThrown").html("errorThrown : " + errorThrown.message);

                if (push.onError) {
                    push.onError();
                }

                // タイマー停止
                clearInterval(mytimer);
            }
        });

    }

    return Push;

})(jQuery);
<?php
// push.php

function output_chunk( $chunk ) {
    echo sprintf( "%x\r\n", strlen( $chunk ) );
    echo $chunk . "\r\n";
}

/** 
 * Ajaxによるリクエストかどうか 
 * 
 * @return boolean True or False 
 */
function isAjax() {
    if ( isset( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) == 'xmlhttprequest' ) {
        return true;
    }
    return false;
}


if ( isAjax() ) {
    // Ajax のアクセスのみ受け付ける

    header( "Content-type: application/octet-stream" );
    header( "Transfer-encoding: chunked" );
    ob_flush();
    flush();

    $i = 0;
    while ( !connection_aborted() ) {
        // クライアントからの接続が続いている間繰り返す

        // ファイルを読み込み専用でオープンする
        $fp = fopen( 'ondo.txt', 'r' );
        // ファイルから一行読み込む
        $line = fgets( $fp );

        // ファイルをクローズする
        fclose( $fp );

        // JSON に入れるデータ
        $id = $line;
        $message = "hoge" . $i;
        $createdAt = date( "Y-m-d H:i:s" );

        // JSON データを作る
        $json = json_encode(
            array(
                "id" => $id,
                "message" => $message,
                "createdAt" => $createdAt
            )
        );

        // データを掃き出す
        output_chunk(
            $json . str_repeat( ' ', 8000 ) . "\n"
        );
        ob_flush();
        flush();

        // 一秒停止
        sleep( 1 ); // 一秒ごとに生成

        $i++;
    }
    echo "0\r\n\r\n";
} else {
    // Ajax アクセス以外はトップページへ誘導
    header( "Location: http://" . $_SERVER[ "SERVER_NAME" ] . "/" );

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる