6 返信 最新の回答 日時: Nov 20, 2016 9:08 PM ユーザー:user14047

    GoogleChartToolの利用について2

    kobamasa

      お世話になります。

       

      GoogleChartToolsのComboChartsをFileMakerに組み込む方法について検討しています。

       

      FileMakerからスクリプトでデータを作成しチャートを表示させるところまではうまくいきました。

      次のステップとしてチャートをクリックした時にFileMakerのスクリプトを起動しようとしています。

      その際に日付をスクリプト引数として起動したいと考えています。

       

      データは下記のような感じです。

      ['日付','在庫データ1','在庫データ2'],

      ['2016/11/01',在庫1,在庫2],

      ['2016/11/02',在庫1,在庫2]

       

      株式会社ライジングサン・システムコンサルティング様のブログからダウンロードしたサンプルファイルを参考にしようと思ったのですが

      ComboChartsとPieChartの形式の違いが原因なのか、うまくスクリプトが起動してくれません。

       

      // Select Event

      function selectHandler() {

      var selectedItem = chart.getSelection()[0];

      if (selectedItem) {

      var fmScriptParam = data.getValue(selectedItem.row, 0);

      window.location = 'fmp://$/googleChartsDemo.fmp12?script=T03.DrillDown&param=' + fmScriptParam ;

      }

      }

       

      ファイルパス、ファイル名、スクリプト名、スクリプト引数は実際に使用するものに変更しています。

      スクリプトデバッガを起動した状態でクリックしているのですがスクリプトが動いている気配はありません。

       

      解決方法をご存知の方がいらっしゃいましたら御教授の程よろしくお願いします。

        • 1. Re: GoogleChartToolの利用について2
          user14047

          ファイルパスは必要ないですよ。

          'fmp://$/FileName?script=scriptName&param='

          で。上記の + fmScriptParam の部分はそのまま記述しておけば、javascript で設定した値(一つ上の行で var fmScriptParam= で設定された値)がそのまま入ります。

          もし、ファイル名、スクリプト名に日本語が含まれる場合、英数文字だけにしておくとトラブルが減らせます。

           

          • 2. Re: GoogleChartToolの利用について2
            user14047

            (また途中でサブミットしてしまいました...)

            もし、ファイル名、スクリプト名、引数等に日本語が含まれる場合で、macOS や iOS のデバイスも考慮しなければいけない場合、エンコードに気をつけてください。

            OS のバージョンによっても違ったりと、とても面倒なので、FMPro.jp : カスタム関数 : FMPUrlScheme 関数 こんなカスタム関数を使うのが楽かと思います。

            • 3. Re: GoogleChartToolの利用について2
              kobamasa

              user4047様

               

              回答ありがとうございます。

               

              返信が遅くなって申し訳ありません。

               

              ファイル名、スクリプト名、引数を全て半角英数にしてみたのですが起動できませんでした。

               

               

              ComboCharts と PieChart の違いで変わることはないのですか?

               

              スクリプト引数に使いたいのはデータの1列目に当たる日付です。

               

              よろしくお願いします。

              • 4. Re: GoogleChartToolの利用について2
                user14047

                Google Developers : Visualization: Combo Chart

                この Javascript 内のどこに、どういう風に、fmp:// のURL スキームを仕込みましたか?

                 

                あと、javascript を利用する以上最低限の知識はどうしても必要になってきてしまうかと思います。

                javascript 入門」 あたりをキーワードに検索して javascript がどんなものなのか眺めてみるのも役に立つかと思います。

                • 5. Re: GoogleChartToolの利用について2
                  kobamasa

                  回答ありがとうございます。

                   

                  大変ご迷惑おかけしてしております。

                  先々週のFileMakerカンファレンスでGoogleChartToolsについて習ったばかりなので

                  JavaScriptに関しては全くの素人です。

                   

                  今後のために勉強してみようと思っています。

                   

                  組み込んでいるJavaScriptは下記のとおりです。

                  データの部分は外部には出せないので在庫1、在庫2の表記になっていますが原文は数値です。

                  正しく表示されているのでこの部分は間違っていないと思います。

                   

                  <html>

                    <head>

                      <meta http-equiv='X-UA-Compatible' content='IE=Edge' />

                      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

                      <script type="text/javascript">

                        google.charts.load('current', {'packages':['corechart']});

                        google.charts.setOnLoadCallback(drawVisualization);

                   

                   

                        function drawVisualization() {

                          // Some raw data (not necessarily accurate)

                          var data = google.visualization.arrayToDataTable([

                  ['日付','在庫1','在庫2','在庫3','在庫4','在庫5'],

                  ['2016/11/01',在庫1,在庫2,在庫3,在庫4,在庫5],

                  ['2016/11/02',在庫1,在庫2,在庫3,在庫4,在庫5],

                  ['2016/11/03',在庫1,在庫2,在庫3,在庫4,在庫5]

                        ]);

                   

                      var options = {

                        title : '在庫一覧表',

                        vAxis: {title: '地金量'},

                        hAxis: {title: '日付'},

                        seriesType: 'bars',

                        series: {4: {type: 'line'}}

                    

                  };

                   

                   

                  // Select Event

                      function selectHandler() {

                          var selectedItem = chart.getSelection()[0];

                          if (selectedItem) {

                              var fmScriptParam = data.getValue(selectedItem.row, 0);

                              window.location = 'fmp://$/在庫管理.fmp12?script=test&param=' + fmScriptParam ;

                          }

                      }

                   

                   

                      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

                      chart.draw(data, options);

                    }

                      </script>

                    </head>

                    <body>

                      <div id="chart_div" style="width: 900px; height: 500px;"></div>

                    </body>

                  </html>

                  • 6. Re: GoogleChartToolの利用について2
                    user14047

                    この javascript だと、function selectHandler {}  が呼び出されるきっかけがありませんから、その中で記述されている fmp URLスキーム経由で FileMaker のスクリプトを呼び出すことができないでいます。

                     

                    どんな時に、どういうイベントを起こしたいのか、

                    Google Developers : Charts : Handling Events

                    をじっくり読んで、イベントを追加してみてください。

                    ライジングサン・システムコンサルティング : FileMakerとGoogleChartToolsを使ってインタラクティブなデータ可視化を実現する

                    のサンプルと比較してみるとわかりやすいかと思います。

                     

                    また、Re: GoogleChartToolの利用について でも書きましたが、 Web ブラウザのデバッガーも利用してみてください。

                    javascript のデバッグだけでなく、Web Viewer 内のスタイルを整えるスタイルシートを書く時にも利用できますので便利ですよ。

                    参考 : f12 開発ツール 利用方法 / Safari Webインスペクタ 利用方法