【NoCode】bubbleのチュートリアル解説⑩データをチャート表示してみよう

bubbleの登録はこちらから。登録するとチュートリアルが選べるようになります。今回は「Using the chart element」というチュートリアルをやってみます。

★目的：APIを用いてデータをチャート表示させる

１．データの入力欄を作成する

いつもどおりElement PalleteからInputを選択し任意の場所に配置します。その後Placeholderに「Label」と入力しデータの名前を入力できるようにします。また空欄のままデータが送信されないようにThis input should not be emptyにチェックを入れておきます。

もう一つ入力欄を追加して今度は値(Value)を入力できるようにします。フォーマットは小数点以下も受け取れるようにdecimal(小数)を設定しましょう。

最後にButtonを配置して「Save」という表示名をつけます。これでデータを受け取るための見た目が完成したので、実際にデータベースに保存する作業を行っていきましょう。※チュートリアルの仕様でButtonの設定画面から見れる名前自体はSubmitになっていることに注意してください。

２．「Save」ボタンを押した時にデータを保存する

「Save」buttonのStart/Edit workflowをクリックします。

Workflowの編集画面が出るので、Typeに「Data Point」と入力し、Set another fieldに進みます。「Data Point」は前回までのチュートリアルでも説明しているとおりデータベースの名前です。

Field nameにLabel、Field typeにtextを入力してデータベースを作成します。つまりここで入力欄に入力された値を受け取るための箱を作っています。前回までのレッスンでさんざんやっている内容ですね。

Labelの箱にInput Label's valueで入力された値を格納するように指定します。

同じようにSet another fieldを追加し、今度は値を受け取れるようにValueという箱を用意します。今度はField typeにnumberを指定して数値を受け取れるようにします。 

これでInputに入力された名前と値を格納するためのデータベースが完成しました。最後にElement ActionsからReset Inputsを選び、入力値をリセットするワークフローを追加しておきます。

次はいよいよデータを取り出してチャートに表示させる作業です。

３．チャートを表示するためのプラグインをインストールする

Pluginワークスペースに移動してAdd pluginsからChart Elementというチャートを表示させるためのプラグインをインストールします。

４．入力されたデータをチャートに表示させる

再びDesignワークスペースに戻るとLine/Bar ChartというElementが追加されているので、そこをクリックし任意の場所に要素を配置します。

初期設定では表示設定がLineグラフになっているので、Barに変更します。その他諸々の設定も下記の通り変更します。

■Chart type：Bar(棒グラフ)

■Type of data(データの種類)：Data Point(先程作ったデータベースを指定します)

■Data source(データの参照元)：Search for Data Points(先程作ったデータベースです)

Value expressionとLabel expressionにそれぞれデータをラベルと数値を拾って表示させるようにしておきます。

最後にBackground styleをFlat colorに指定します。

Previewを表示して動作を試してみます。

↓↓↓次のチュートリアルはこちら↓↓↓