This topic explains how to bind the igFunnelChart™ control to different data sources.
The following table lists the concepts and topics required as a prerequisite to understanding this topic.
igDataSource™ component and explains how to add it to an HTML page.igFunnelChart control including its main features, minimum requirements, and user functionality.igFunnelChart control to an HTML page and bind it to data.This topic contains the following sections:
Bind data to igFunnelChart in the same way you would bind any other control to the Ignite UI for jQuery® library. Data is bound either by assigning a data source to the dataSource option or by providing a URL in the dataSourceUrl if data is provided by a web or Windows Communication Foundation (WCF) service. The igFunnelChart control creates and uses an igDataSource object to handle data.
The igFunnelChart control supports the following data sources:
Each data source has different requirements for data binding to the igFunnelChart control. The following table lists each requirement category.
| Requirement category | Requirement listing |
|---|---|
| Data structures |
|
| Data types |
|
The following table lists the code examples included in this topic.
| Example | Description |
|---|---|
| Binding to a JavaScript Array | This example demonstrates how to bind the igFunnelChart control to a JavaScript array. |
| Binding igFunnelChart to XML Data | This example demonstrates how to bind the igFunnelChart control to an XML structure. |
| Binding igFunnelChart in a Strongly Typed MVC View | This example demonstrates how to bind the igFunnelChart control to a model object in a strongly-typed ASP.NET MVC View. |
| Binding igFunnelChart to a JSON Response from a Remote Service | This example demonstrates how to configure an igFunnelChart control to request remote data and bind it to a JSON response. |
One of the most common data binding scenarios is to visualize data from a JavaScript array of data objects on your web page. This example defines a sample array of objects with two data fields and configures a funnel chart using the array as the data source.
The following snippet defines a JavaScript array. Put the snippet into a script block in your page.
In JavaScript:
var data = [
{ Budget: 30, Department: "Administration" },
{ Budget: 50, Department: "Sales" },
{ Budget: 60, Department: "IT" },
{ Budget: 50, Department: "Marketing" },
{ Budget: 100, Department: "Development" },
{ Budget: 20, Department: "Support" }
];
The following snippet instantiates a funnel chart and binds the chart to the array defined above. This example only shows the essential data binding code omitting all other instantiation details.
In JavaScript:
$("#funnel").igFunnelChart({
. . .
dataSource: data,
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
outerLabelMemberPath: "Department"
});
The igFunnelChart control supports XML structures as a data source with the help of the igDataSource component. This code example shows how to pass an XML structure to an igDataSource object and how to bind the data source object to the funnel chart control.
The following code snippet defines an XML structure with a JavaScript string. The structure contains nodes with two data attributes: Department and Budget.
In JavaScript:
var xmlDoc =
'<CompanyBudget>' +
'<BudgetEntry Department="Development" Budget="100" />' +
'<BudgetEntry Department="IT" Budget="60" />' +
'<BudgetEntry Department="Sales" Budget="60" />' +
'<BudgetEntry Department="Marketing" Budget="50" />' +
'<BudgetEntry Department="Administration" Budget="30" />' +
'<BudgetEntry Department="Support" Budget="20" />' +
'</CompanyBudget>';
The following code snippet shows how to declare the structure of the XML data into an igDataSchema object recognizable by the igDataSource.
In JavaScript:
var xmlSchema = new $.ig.DataSchema("xml",
{
searchField: "//BudgetEntry",
fields: [
{ name: "Department", xpath: "./@Department" },
{ name: "Budget", xpath: "./@Budget", type: "number" }
]
}
);
The following code snippet shows how to instantiate an igDataSource using the XML data and the schema object.
In JavaScript:
var ds = new $.ig.DataSource({
type: "xml",
dataSource: xmlDoc,
schema: xmlSchema
});
The following code snippet shows instantiation code for the igFunnelChart control that binds to the data source created above. The data source object handles the data from the XML structure and provides it in a suitable form to the funnel chart control.
In JavaScript:
$("#chartNormal").igFunnelChart({
. . .
dataSource: ds,
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
outerLabelMemberPath: "Department"
});
This sample shows how to bind an igFunnelChart to data available in XML structure. For that purpose the XML data is passed to an igDataSource which provides the data to the funnel chart.
In an MVC application you will usually want to have a strongly-typed View and pass it data objects from the business logic layer of your application. This example provides the essential code which defines a sample data class and passes a model object to the Ignite UI for MVC FunnelChart which instantiates a funnel chart. The data model object is required to be an IQueryable of the data class.
The next code snippet declares a sample class consisting of two data fields.
In C#:
public class BudgetData
{
public decimal Budget { get; set; }
public string Department { get; set; }
}
The following code snippet specifies a strongly-typed MVC View at the beginning. Then it shows how to use the Ignite UI for MVC FunnelChart in order to bind to the Model object of the View.
In ASPX:
@model IQueryable<MvcApp.Models.BudgetData>
. . .
@(Html.Infragistics().FunnelChart(Model)
.ID("funnel")
. . .
.ValueMemberPath("Budget")
.InnerLabelMemberPath("Budget")
.OuterLabelMemberPath("Department")
.DataBind()
.Render()
)
This code example shows how to bind JSON data from a request to a remote service (MVC controller action in this case) to the igFunnelChart control.
The next code snippet declares a sample class consisting of two data fields.
In C#:
public class BudgetData
{
public decimal Budget { get; set; }
public string Department { get; set; }
}
The following code snippet defines a controller action method that services a remote request. The method uses getData() method to implement the actual data retrieval logic and is not shown here.
In C#:
[ActionName("getBudget")]
public JsonResult GetBudget()
{
var data = getData();
return new JsonResult
{
Data = data,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
The following code snippet contains instantiation code for the igFunnelChart control that configures a URL for a remote data service. The code snippet contains only the essential data binding code omitting all other instantiation options.
In JavaScript:
$("#chartRemote").igFunnelChart({
. . .
dataSourceUrl: "/businessLogic/getBudget",
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
outerLabelMemberPath: "Department"
});
The following topics provide additional information related to this topic.
Configuring igFunnelChart: This topic explains how to configure different visual features and behavior of the igFunnelChart control.
Styling igFunnelChart: This topic explains how to customize the look-and-feel of the igFunnelChart control.
Accessibility Compliance (igFunnelChart): This topic explains the igFunnelChart control’s accessibility features and provides advice on how to achieve accessibility compliance for pages containing charts.
Known Issues and Limitations (igFunnelChart): This topic lists the known issues related to the igFunnelChart control.
jQuery and MVC API Links (igFunnelChart): This topic lists the links to the API reference documentation for the igFunnelChart control.
The following samples provide additional information related to this topic.
View on GitHub