GUIのデザイン
このプログラムは、C1FlexGridコントロールを非連結モードで設定し、入力されたデータをもとにC1Chart2Dコントロールでバブルチャートを作成します。
C1FlexGridコントロールでは、軸ラベルと各セルへの入力を行います。バブルチャートを作成するには、XY軸データに加えバブルのサイズとなるデータ（Y1軸）とデータ名が必要となるため、行ラベルと合わせて5つの列を作成します。また行数は、とりあえずサンプルプログラムなので7件のデータが格納できるようにします。
C1Chart2Dコントロールは、見やすいグラフにするために、X軸とY軸の最大・最小値を入力できるようにします。 そして、作成したグラフはビットマップ形式の画像として保存できるようにします。
フォームのデザイン
C1Chart、C1FlexGridコントロールを中心に、これらを制御するコントロールを、標準コントロールのTextBox、Buttonコントロールで組み立てていきます。 コードの処理は、4つのButtonコントロールのClickイベントハンドラと、フォームのLoadイベントハンドラを使用します。
フォームの作成
では、フォームのレイアウトを行っていきます。
C1Chartコントロールの配置
最初に、C1Chartコントロールを配置します。
（1）ツールボックスから、C1Chartコントロールをフォームにドラッグアンドドロップします。
（2）スマートタグから「ウィザード」をクリックします。「グラフウィザード」が表示されるので、グラフの種類から「Scatter」を選び、水平スクロールバーを動かして「バブルチャート」を選びます。
（3）「次へ」ボタンをクリックし、「ステップ3」に進みます。
（4）今回のプログラムでは1種類のデータしか使用しませんので、「データセット」の「削除」ボタンをクリックし、「series1」から「series3」を削除して、「series0」だけを残します。
（5）「シンボル」の▼ボタンをクリックし、リストから「Dot」を選びます。
（6）「データテーブル」タブをクリックし、列「X」「Y」の空白のセルをクリックして、あと2行分のデータを入力します。また、「Y1」セルに適当な値を入力し「完了」ボタンをクリックします。
（7）このデータをもとにしたバブルチャートが作成されます。
C1FlexGridコントロールの配置
続いて、C1FlexGridコントロールを配置します。
（1）ツールボックスからC1FlexGridコントロールをフォームにドラッグアンドドロップし、C1Chartコントロールの下に配置します。
（2）プロパティウィンドウで「Cols」プロパティを展開し、「Count」プロパティを「5」に変更します。これで、グリッドは1つの行ヘッダと4つの列になります。
（3）同じくプロパティウィンドウの「Rows」プロパティを展開し、「Count」プロパティを「8」に変更します。これで、グリッドは1つの列ヘッダと7行のセルになります。
（4）C1FlexGridコントロールのスマートタグから「列エディタ」をクリックします。「FlexGrid列エディタ」が表示されますので、行ヘッダの列から順番に列ヘッダをクリックし、「Caption」プロパティに以下の文字列を設定します。これで、列ヘッダが設定されます。
- Data
- データ名
- X軸データ
- Y軸データ
- ボリューム（Y1）
（5）各列の境界線をドラッグし、列幅を調整します。
その他のコントロールの配置
C1Chartでは、グラフのXY軸の最大値・最小値を入力できるインターフェースを、C1FlexGridコントロールでは軸ラベルとなる列ヘッダを変更できるインターフェースを作成します。
（1）GroupBox、Label、TextBox、Buttonの各コントロールを使って2つのインターフェースを作成します。レイアウトは、画面ショットを参考にしてください。
（2）「グラフ作成」と「グラフ保存」ボタンも配置します。そして、4つのButtonコントロールは、それぞれClickイベントハンドラを作成しておきます。
（3）グラフの画像保存のためにSaveFileDialogコントロールを配置します。FileNameプロパティには「*.bmp」を、Filterプロパティには「*.bmp | *.bmp」を設定しておきます。
