1

私の目標は、マンゴー オートメーション データ ポイントを使用してデータを取得する単純な JavaScript リアルタイム シリアル チャートを作成することです。

データ ポイント自体に関しては何の問題もありませんが、チャートをデータ ポイントにリンクしようとするのは非常に面倒です。私が使用しようとしたチュートリアルには、(\pointHierarchyExamples\realtimeSerialChart.shtm) と (\tutorials\dataPointChart.shtm) の 2 種類があります。

前者の例は、データ ポイントをグラフにリンクする方法が明確に示されているため、より実用的であると思われましたが、残念ながらサンプル ページ自体も機能せず、使用できませんでした。一方、後者の例はうまくいきましたが、私が望まないものがたくさんあり (ほとんどの場合、ウィジェットに関連する時間とデータの表現)、削除や変更が難しいようでした。最初は、ページに他のウィジェットを配置せずにグラフのみを作成できるようにしたいと考えています。さらに、ドキュメントが見つかりませんでした

以下に、私が遭遇した問題と、2 番目の例を修正して作成したコードを示します。また、私の考えや質問をコメントとして追加しました。

1つ目の問題は、グラフを作成する際にMangoAPIがグラフを作成するものであるため、グラフの設計に完全な自由がないことです(Fe.テーマを変更できない)。

2 番目の問題は、ページが読み込まれたときにグラフを表示できず、関数が呼び出された後にのみ表示されることです。

3 番目の問題は、関連する mango クラス/関数を含むドキュメントや例をほとんど見つけることができなかったことです。

TL:DR これらの Mango ライブラリに関する優れたドキュメントを見つけたいと思います。その他のヘルプも大歓迎です

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <!-- Add the Mango Favicon -->
    <link rel="icon" href="/images/favicon.ico">

    <!-- Base Library -->
    <script type="text/javascript" src="/resources/loaderConfig.js"></script>
    <script type="text/javascript" src="/resources/require.js"></script>
    <script type="text/javascript" src="/resources/main.js"></script>

    <script type="text/javascript">

    var points = {}; //Map of xids to points where points['xid'] = point;

    //Import needed libraries

    require(['jquery', 'mango/api', 'mango/TimePresetPicker', 'mango/SerialChart',
             'mango/PointValueDataProvider', 'mango/ProviderOptionsManager', 'jquery.notify'],

    //Creating the main function
    function($, MangoAPI, TimePresetPicker, SerialChart, PointValueDataProvider,
            ProviderOptionsManager, point) {
            //Setting up the chart
        var chart = new SerialChart({
            divId: 'Graafi',
            amChart: {
                theme: "light", //Doesn't do anything
                chartScrollbar: {
                    enabled: true,
                    graph: 'DP_211607',
                    offset: 30,
                    oppositeAxis: false,
                    scrollbarHeight: 90
                },
                legend: {
                    align: 'center',
                },
                categoryAxis: {
                    minPeriod: 'ss'
                }
            }
        });

        //Creating the display on the page
        chart.createDisplay();

                    // create a point value data provider
        var dataProvider = new PointValueDataProvider(null, {
            // convert point values to their specified unit
            apiOptions: { converted: true }
        });

                    // setup the time picker with its inputs
        //The time picker requires all three elements  even if I didn't want to. In addition, I couldn't find anything to help me customize it
        var timePicker = new TimePresetPicker({
            presetPicker: $('#presetPicker') //Uses a drop down menu, but I'd rather like fever options that each had their own buttons. 
            //fromPicker: $('#fromPicker'), these can be deleted like I did, but their element will still be on the screen for some reason. And it looks dumb.
            //toPicker: $('#toPicker')
        });
        //The provider manager seems to be really rigid, because it requires timePicker or it won't work. In addition I couldn't find any documentation about how to use it
        var providerManager = new ProviderOptionsManager({ 
            errorFunction: MangoAPI.logError,
            timePicker: timePicker
        });

        // link the chart to the data provider
        dataProvider.addListener(chart);

        // link the provider to the provider manager
        providerManager.addProvider(dataProvider);

        $('#presetPicker').on('change', function() {
            // update the data provider
            dataProvider.addDataPoint(point);// These two lines are the ones that make the graph show on the screen. I would like to be able to do these when the page is loaded, but for some reason they only work when the value of an element is changed
            providerManager.refreshProviders();
        });
        function loadPoints() { 
            MangoAPI.defaultApi.queryPoints('limit(50)').then(function(results){ // I couldn't find any documentation about how to use this query function so I just copied the 'limit(50)' keyword and filtered out the one I wanted based on its XID
                for (var i=0; i<results.items.length; i++) {
                    var point = results.items[i];
                    if (point.xid === 'DP_211607') {
                        points[point.xid] = point;
                        dataProvider.addDataPoint(point); //these two lines of code should update the chart and view it, but for some reason it gives this error "TypeError: this.amChart.validateData is not a function"
                        providerManager.refreshProviders();
                        break;
                    };
                }
           }).fail(MangoAPI.logError);
        }
        loadPoints();

    });
</script>
</head>
<body>
    <div id="data">
        <header></header>
        <div id="Graafi"></div>
        <div class="input">
            <select id="presetPicker" class="form-control"></select>
        </div>
        <footer></footer>
    </div>
</body>

4

1 に答える 1