Google Visualization Motion Chartの状態を設定するにはどうすればよいですか？

Question

私はGWTを使用しており、Google API Libraries for GWTのGoogle Chart Tools (aka Visualization) 1.1 Libraryです。

モーショングラフを表示し、可能な限り状態をJavascriptに設定したいとします。

状態を設定する方法がありますか？

Answer 1

ここでは少しからMotionChartを変更されたGWT-はじめJavaScriptからのデータとページを開始しますドキュメンテーション。私はそれをテストしていないので、コードが動作するかどうかはわかりません。

public class SimpleViz implements EntryPoint { 
       public void onModuleLoad() { 
       // Create a callback to be called when the visualization API 
       // has been loaded. 
       Runnable onLoadCallback = new Runnable() { 
        public void run() { 
        Panel panel = RootPanel.get(); 

        MotionChart chart = new MotionChart(createTable(), createOptions()); 

        panel.add(chart); 
        } 
       }; 
       VisualizationUtils.loadVisualizationApi(onLoadCallback, MotionChart.PACKAGE); 
       } 

       private Options createOptions() { 
       Options options = Options.create(); 
       options.setWidth(600); 
       options.setHeight(300); 
       options.setTitle("My Motion Chart"); 

       // Passing JSON state with escaped double quotes to options class. 
       options.setState("{\"orderedByY\":false,\"showTrails\":true,\"dimensions\":{\"iconDimensions\":[\"dim0\"]},\"yAxisOption\":\"3\",\"xZoomedIn\":false,\"time\":\"1988-04-16\",\"yZoomedIn\":false,\"xAxisOption\":\"2\",\"yZoomedDataMin\":150,\"yZoomedDataMax\":617,\"xZoomedDataMin\":300,\"uniColorForNonSelected\":false,\"xLambda\":1,\"playDuration\":15000,\"yLambda\":1,\"duration\":{\"timeUnit\":\"D\",\"multiplier\":1},\"iconType\":\"BUBBLE\",\"iconKeySettings\":[{\"trailStart\":\"1988\",\"key\":{\"dim0\":\"Apples\"}},{\"trailStart\":\"1988\",\"key\":{\"dim0\":\"Oranges\"}},{\"trailStart\":\"1988\",\"key\":{\"dim0\":\"Bananas\"}}],\"colorOption\":\"2\",\"xZoomedDataMax\":1200,\"nonSelectedAlpha\":0.4,\"orderedByX\":false,\"sizeOption\":\"_UNISIZE\"}"); 
       return options; 
       } 

       private AbstractDataTable createTable() { 
       DataTable data = DataTable.create(); 
        data.addColumn('string', 'Fruit'); 
        data.addColumn('date', 'Date'); 
        data.addColumn('number', 'Sales'); 
        data.addColumn('number', 'Expenses'); 
        data.addColumn('string', 'Location'); 
       data.addColumn(ColumnType.STRING, "Fruit"); 
       data.addColumn(ColumnType.DATE, "Date"); 
       data.addColumn(ColumnType.NUMBER, "Sales"); 
       data.addColumn(ColumnType.NUMBER, "Expenses"); 
       data.addColumn(ColumnType.STRING, "Location"); 
       data.addRows(6); 
       data.setValue(0, 0, "Apples"); 
       data.setValue(0, 1, new Date (1988,0,1)); 
       data.setValue(0, 2, 1000); 
       data.setValue(0, 3, 300); 
       data.setValue(0, 4, "East"); 
       data.setValue(1, 0, "Oranges"); 
       data.setValue(1, 1, new Date (1988,0,1)); 
       data.setValue(1, 2, 1150); 
       data.setValue(1, 3, 200); 
       data.setValue(1, 4, "West"); 
       data.setValue(2, 0, "Bananas"); 
       data.setValue(2, 1, new Date (1988,0,1)); 
       data.setValue(2, 2, 300); 
       data.setValue(2, 3, 250); 
       data.setValue(2, 4, "West"); 
       data.setValue(3, 0, "Apples"); 
       data.setValue(3, 1, new Date (1989,6,1)); 
       data.setValue(3, 2, 1200); 
       data.setValue(3, 3, 400); 
       data.setValue(3, 4, "East"); 
       data.setValue(4, 0, "Oranges"); 
       data.setValue(4, 1, new Date (1989,6,1)); 
       data.setValue(4, 2, 750); 
       data.setValue(4, 3, 150); 
       data.setValue(4, 4, "West"); 
       data.setValue(5, 0, "Bananas"); 
       data.setValue(5, 1, new Date (1989,6,1)); 
       data.setValue(5, 2, 788); 
       data.setValue(5, 3, 617); 
       data.setValue(5, 4, "West"); 
       return data; 
    } 
} 

Answer 2

私はこの質問をよく理解していません。参照したドキュメントには、状態を設定するセクションがあります。

基本的には、すでに取り込んだモーショングラフビジュアライゼーションを開き、デフォルトで表示したいエンティティ/オプションを操作してから、グラフのGWTコントロールから状態フィールドを取得する必要があります。

http://code.google.com/intl/fr/apis/visualization/documentation/gallery/motionchart.html#Motion_Chart_initial_state

そこから、通常のルーチンを経​​由してオプションを設定することができます。

Answer 3

1. まず、あなたのチャート（S）&を作成し、それらを養うのDataTableを作成 - あなたがあなたの特定のアプリケーションのために必要なものは何でもオプションで。
2. 次に、Googleの.addRow（）メソッドと.addColumn（）メソッドを使用して、行&を作成します。
3. テーブルを作成し、.draw（）メソッドを使用して初期イメージをレンダリングする
4. 最後に、イメージを更新する方法が必要です。 2つのカスタム関数を作成しました.1つはajax呼び出しでデータを取得し、もう1つは既存のテーブルのデータを操作し、追加の.draw（）を定期的に要求します。

あなたが作業のデモと、ここで簡単なチュートリアルを参照することができます - 私はそれが役に立てば幸いhttp://www.logicwizards.net/monitor-lamp-servers-wbash-php5/

を...