クライアント側の外部データソースから横棒グラフを作成するには、以下の手順を実行します。

1. ツールボックスからページに C1BarChart を追加します。
2. 「ソース」タブをクリックし、ソース ファイルの末尾の body タグの後に以下を入力します。

   ソースビュー

   コードのコピー

   <script type = "text/javascript">        $(document).ready(function () {              var netflx = "http://odata.netflix.com/Catalog/Genres('Horror Movies')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc";                $.ajax(                    dataType: "jsonp",                    url: netflx,                    jsonpCallback: "callback",                    success: callback              });        });          function callback(result) {              <// 結果を折り返し解除します              var names = [];              var ratings = [];                var movies = result["d"]["results"];                for (var i = 0; i < movies.length; i++) {                      names.push(movies[i].Name);                    ratings.push(movies[i].AverageRating);              }                $("#<%= C1BarChart1.ClientID %>").c1barchart("option", "seriesList", [                          {                                label: "ホラー映画"                                legendEntry: true,                                data: {                                      x: names,                                      y: ratings                                }                          }                    ])        } </script>

3. Y 軸の Text、Min、Max、および AutoMax を次のように定義します。

   ソースビュー	コードのコピー
   <Axis>     <Y Text="Average Rating" Min="0" Max="5" Auto Min="false" AutoMax="false"></Y>     <X Text=""></X> </Axis>

4. ヘッダーの Text を次のように定義します。

   ソースビュー	コードのコピー
   <Header Text="ジャンル毎の映画ートップ10ーNetflix OData"></Header>

5. BarChart の Height を 475、BarChart の Width を 756 に設定します。
6. プロジェクトを実行し、ビルドします。