バージョン

igDataChart をデータにバインド

トピックの概要

目的

このトピックでは、igDataChart™ コントロールを各種データ ソース (JavaScript 配列、IQueryable<T>、Web サービス) にバインドする方法について説明します。

前提条件

以下の表に、このトピックを理解するための前提条件として求められる素材をリストします。

概念

  • データ バインディング
  • JSON
  • XML
  • Web サービス
  • WCF サービス
  • ASP.NET MVC

トピック

  • igDataSource の概要: データ バインドされたコントロールと実際のデータ ソースとの中間層として機能する igDataSource™ コントロールに関する全般的な説明。

  • igDataChart 概要: このトピックでは、igDataChart コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。

  • igDataChart の追加: このトピックでは、igDataChart をコントロールを作成して追加し、データにバインドする方法を紹介します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

データ ソースにバインド

サポートされるデータ ソース

igDataChart コントロールは以下のデータ ソースに対応しています。

データ ソース バインディング
igDataSource データ操作を管理するために、コントロールで内部で使用されます。
IQueryable<T> MVC コントローラー メソッドからデータを提供するために使用されます。

バインドの要件

各データ ソースには、igDataSource コントロールへのデータ バインディングの異なる要件があります。以下の表に、各要件カテゴリを示します。

要件のカテゴリ 要件の一覧
データ構造
  • JSON (クライアント側、あるいは Web または WCF サービスから)
  • XML (クライアント側、あるいは Web または WCF サービスから)
  • JavaScript 配列
  • ASP.NET MVC での IQueryable<T>
データ型
  • 文字列値 (カテゴリ軸のデータ型)
  • 数値
  • 日付

データ ソースの要約

igDataChart コントロールのデータ バインドは、Ignite UI for jQuery™ ライブラリに含まれる他のコントロールのデータ バインドと同じです。データのバインドは、dataSource オプションにデータ ソースを割り当てるという形で行い、Web または WCF サービスによって提供されるデータについては dataSourceUrl に URL を指定するという形で行います。

JavaScript 配列へのバインド

概要

ここでは、igDataChart コントロールを JavaScript データ配列にバインドする際の手順を示します。

前提条件

この手順を実行するには、以下のリソースが必要です。

  • HTML5 Web ページ
  • Web サイトまたは Web アプリケーション プロジェクトに追加された、必要なすべての JavaScript および CSS ファイル。igDataChart インスタンスの作成および構成の詳細については、「igDataChart の追加」を参照してください。

プレビュー

次のスクリーンショットは、サンプル配列へのバインドに成功して、所定のデータが表示されるようになった状態の igDataChart コントロールです。

手順

ここでは、igDataChart コントロールを JavaScript データ配列にバインドする際の手順を示します。

  1. データ配列を定義します。

    次のコードは、サンプルの JavaScript 配列を定義するものです。

    JavaScript の場合:

     <script type="text/javascript">
         var data = [
                 { "DateString": "2.1.2010", "Open": 1000, "High": 1028.75, "Low": 985.25, "Close": 1020, "Volume": 1995 },
                 { "DateString": "3.1.2010", "Open": 1020, "High": 1032.5, "Low": 999.5, "Close": 1021, "Volume": 1964.5 },
                 { "DateString": "4.1.2010", "Open": 1021, "High": 1033.5, "Low": 996, "Close": 1033, "Volume": 1974.75 },
                 { "DateString": "5.1.2010", "Open": 1033, "High": 1062, "Low": 1018.75, "Close": 1042, "Volume": 1978.5 },
                 { "DateString": "6.1.2010", "Open": 1042, "High": 1058.5, "Low": 1019.75, "Close": 1029, "Volume": 1979 },
                 { "DateString": "7.1.2010", "Open": 1029, "High": 1050.75, "Low": 1006, "Close": 1042, "Volume": 1990 }
             ];
     </script>
    
  2. igDataChart コントロールを追加して構成します。

    1.チャートの div 要素を Web ページに追加します。

    Web ページの body 部分に igDataChart チャート コントロール用の div 要素を追加します。

    HTML の場合:

     <body>
         ...
         <div id="chart"></div>
         ...
     </body>
    

    2.igDataChart チャート コントロールのインスタンスを作成して、そのデータ ソースを構成します。

    これを行うには、1 つ前の手順で定義したデータ配列を igDataChart コントロールの dataSource オプションに割り当てます。

    JavaScript の場合:

     <script type="text/javascript">
         $(function () {
             $("#chart").igDataChart({
                 dataSource: data,
                 axes: [{
                     type: "categoryX",
                     name: "xAxis",
                     label: "DateString",
                 }, {
                     type: "numericY",
                     name: "priceAxis",
                 }],
                 series: [{
                     type: "financial",
                     name: "finSeries",
                     title: "Price Movements",
                     xAxis: "xAxis",
                     yAxis: "priceAxis",
                     openMemberPath: "Open",
                     lowMemberPath: "Low",
                     highMemberPath: "High",
                     closeMemberPath: "Close",
                 }]
             });
         });
     </script>
    

このサンプルは、JSON データにバインドされたデータ チャートを表示します。

XML 文字列にバインド

概要

この例では、igDataChart コントロールを XML 文字列にバインドする方法を示します。

ASP.NET MVC での IQueryable<T> へのバインド

概要

ここでは、Ignite UI for jQuery ライブラリにある ASP.NET ヘルパーを使用して一連のデータ オブジェクトをバックエンド コントローラー メソッドからデータ チャートにバインドする手順を示します。

前提条件

この手順を実行するには、以下のリソースが必要です。

  • ASP.NET MVC アプリケーション
  • Web サイトまたは Web アプリケーション プロジェクトに追加された、必要なすべての JavaScript および CSS ファイル。igDataChart インスタンスの作成および構成の詳細については、「igDataChart の追加」を参照してください。

プレビュー

次のスクリーンショットは、サンプル配列へのバインドに成功して、所定のデータが表示されるようになった状態の igDataChart コントロールです。

手順

以下の手順では、ASP.NET MVC で igDataChart コントロールのインスタンスを作成してデータ ソースにバインドする方法を示します。ここでは、厳密に型指定されたビューに表示するデータ オブジェクトのリストを指定し、データ チャートに Ignite UI for MVC DataChart を使用します。

  1. データ モデルを定義します。

    データ モデル クラスを定義します。

    C# の場合:

     public class StockMarketDataPoint
     {
         public double Open { get; set; }
         public double High { get; set; }
         public double Low { get; set; }
         public double Close { get; set; }
         public double Volume { get; set; }
         public DateTime Date { get; set; }
         public string DateString { get { return Date.ToShortDateString(); } }
     }
    
  2. コントローラー メソッドを定義します。

    StockMarketDataPoint オブジェクトの配列を作成するためにコントローラー メソッドにロジックを追加します。ここには、データベースからのデータ取得に適用するカスタム ロジックを指定します。

    StockMarketDataPoint オブジェクトのリストが IQueryable に変換されてからビューに渡されるという点に注意してください。これは Ignite UI for MVC を呼び出すという形で実行することもできますが、ここに示した実装の方がきれいに実行できます。

    C# の場合:

     public ActionResult Index()
     {
         List<StockMarketDataPoint> stockMarketData = new List<StockMarketDataPoint>
         {
             new StockMarketDataPoint { Date = DateTime.Parse("2.1.2010"), Open = 1000, High = 1028.75, Low = 985.25, Close = 1020, Volume = 1995 },
             new StockMarketDataPoint { Date = DateTime.Parse("3.1.2010"), Open = 1020, High = 1032.5, Low = 999.5, Close = 1021, Volume = 1964.5 },
             new StockMarketDataPoint { Date = DateTime.Parse("4.1.2010"), Open = 1021, High = 1033.5, Low = 996, Close = 1033, Volume = 1974.75 },
             new StockMarketDataPoint { Date = DateTime.Parse("5.1.2010"), Open = 1033, High = 1062, Low = 1018.75, Close = 1042, Volume = 1978.5 },
             new StockMarketDataPoint { Date = DateTime.Parse("6.1.2010"), Open = 1042, High = 1058.5, Low = 1019.75, Close = 1029, Volume = 1979 },
             new StockMarketDataPoint { Date = DateTime.Parse("7.1.2010"), Open = 1029, High = 1050.75, Low = 1006, Close = 1042, Volume = 1990 }
         };
         return View(stockMarketData.AsQueryable());
     }
    
  3. igDataChart コントロールのインスタンスを作成して、データ ソースを構成します。

    ASP.NET MVC ビューに含まれる次のコードが、igDataChart のインスタンスを作成して、このリストを割り当てます。厳密に型指定されたビューのデータ モデルが DataChart(Model) の呼び出しによってチャートにマップされる仕組みに注目してください。軸定義では、item.DateString プロパティが Label() 関数呼び出しによってカテゴリの X 軸にマップされます。シリーズの定義では、OpenMemberPathCloseMemberPathLowMemberPath、および HighMemberPath の各呼び出しが、対応するプロパティを金融取引チャートにバインドします。DataBind() メソッドが実際のデータ バインディングを実行し、最後に、Render() メソッドが、クライアント側で実行される最終的な JavaScript コードを発行します。

    ASPX の場合:

     <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IQueryable<DataChartSample.Models.StockMarketDataPoint>>" %>
     <%@ Import Namespace="Infragistics.Web.Mvc" %>
     ...
     <%= 
         Html.Infragistics().DataChart(Model)
             .ID("chart")
             .Axes(axes =>
                 {
                     axes.CategoryX("xAxis").Label(item => item.DateString);
                     axes.NumericY("priceAxis");
                 }
             )
             .Series(series =>
                 {
                     series.Financial("finSeries")
                         .XAxis("xAxis")
                         .YAxis("priceAxis")
                         .OpenMemberPath(item => item.Open)
                         .CloseMemberPath(item => item.Close)
                         .LowMemberPath(item => item.Low)
                         .HighMemberPath(item => item.High);
                 }
             )
             .DataBind()
             .Render()
     %>
    

WCF サービスへのバインド

概要

ここでは、dataSourceUrl オプションを利用して igDataChart を WCF サービスにバインドする手順を示します。Web サービスへのバインドも同様です。

前提条件

この手順を実行するには、以下のリソースが必要です。

  • HTML5 Web ページ
  • Web サイトまたは Web アプリケーション プロジェクトに追加された、必要なすべての JavaScript および CSS ファイル。igDataChart インスタンスの作成および構成の詳細については、「igDataChart の追加」を参照してください。

プレビュー

次のスクリーンショットは、サンプル配列へのバインドに成功して、所定のデータが表示されるようになった状態の igDataChart コントロールです。

手順

igDataChart コントロールを WCF サービスにバインドする手順を以下に示します。

  1. WCF サービス インターフェイスを定義します。

    WCF サービスの完全な実装は、この例とは関連がないので省略します。以下に、GET HTTP 要求に応じてクライアントにデータを提供するサービス コントラクト クラスおよび操作コントラクト メソッドのサンプルを示します。データ モデル クラスは、前の手順 ASP.NET MVC での IQueryable<T> へのバインドで指定したものと同じです。

    このあとに定義するのは、クライアントに StockMarketDataPoint オブジェクトのリストという形で金融取引データを送るサンプルの StockMarket WCF サービスのインターフェイスです。

    C# の場合:

     [ServiceContract]
     [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
     public class StockMarket
     {
         [OperationContract]
         [WebGet(BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
         public List<StockMarketDataPoint> GetStockData()
         {
             return StockMarketGenerator.GenerateData();
         }
     }
    

    ここで注目すべき重要なものは、サーバー メソッド GetStockData() に適用される WebGet 属性です。これは、このメソッドが GET 要求に応答し、その応答がむき出しの(ラップされていない)JSON エンコード データ配列であることを宣言します。

  2. チャート コントロールのインスタンスを作成し、データ ソースを設定します。

    HTML/jQuery

    igDataChart のインスタンスを作成するために次のコードを HTML5 ページの冒頭部に追加します。WCF サービス アドレスは、アドレスを dataSourceUrl オプションに割り当てることによって、データ ソースとして設定されます。X 軸定義では、軸のラベルが、サーバーから取得したデータの DateString プロパティにマップされます。同じように、金融取引データ シリーズのデータ オプションは、WCF データ ソースの Open (寄り値)、High (高値)、Low(低値)、および Close (引け値) プロパティにマップされます。

    このサンプルでは、WCF サービスがインストール/実行されている場所のアドレスを http://www.example.com/Services/StockMarket.svc/GetStockData とします。

    JavaScript の場合:

     $(function () {
         $("#chart").igDataChart({
             dataSourceUrl: "http://www.example.com/Services/StockMarket.svc/GetStockData",
             axes: [{
                 name: "xAxis",
                 type: "categoryX",
                 label: "DateString"
             },
             {
                 name: "yAxis",
                 type: "numericY"
             }],
             series: [{
                 name: "dataSeries",
                 title: "stockPrice",
                 type: "financial",
                 xAxis: "xAxis",
                 yAxis: "yAxis",
                 openMemberPath: "Open",
                 highMemberPath: "High",
                 lowMemberPath: "Low",
                 closeMemberPath: "Close"
             }]
         });
     });
    

    ASP.NET MVC

    igDataChart のインスタンスを作成して WCF サービス アドレスを設定するために、次のコードを ASP.NET MVC ビューに追加します。このコードは HTML サンプルのコードと同じ意味を持ち、このコードで重要な箇所は、WCF サービスの URL を設定する呼び出しが定義されている部分です。この呼び出しにより、DataSourceUrl 属性が http://www.example.com/Services/StockMarket.svc/GetStockData に設定されます。

    ASPX の場合:

     <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
     <%@ Import Namespace="Infragistics.Web.Mvc" %>
     ...
     <%=
         Html.Infragistics().DataChart()
             .ID("chart")
             .Axes((axes) =>
                 {
                     axes.CategoryX("xAxis").Label("DateString");
                     axes.NumericY("yAxis");
                 })
             .Series((series) =>
                 {
                     series
                     .Financial("finSeries")
                     .XAxis("xAxis").YAxis("yAxis")
                     .OpenMemberPath("Open")
                     .CloseMemberPath("Close")
                     .LowMemberPath("Low")
                     .HighMemberPath("High")
                     .VolumeMemberPath("Volume")
                 })
             .DataSourceUrl("http://www.example.com/Services/StockMarket.svc/GetStockData")
             .DataBind()
             .Render()
     %>
    

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

サンプル

このトピックについては、以下のサンプルも参照してください。

リソース

以下の資料 (Infragistics のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。

オンラインで表示: GitHub