This tutorial will help you get started using Bootstrap Charts in your web applications. You will learn how to add a chart to a page and perform all configurations required for it to work properly. Note that while this tutorial uses the Chart control as an example, you can use the same steps to configure the Polar Chart or Pie Chart
To start with this tutorial, create a new web application or web site and drop the BootstrapChart control on its page.
Assuming that you are not using one of the DevExpress project templates, the Chart control should appear on the design view as shown on the following image:
As you can see, the control displays hints informing you about configurations that you need to perform before the chart can be displayed on a page. Follow the steps described below to configure your chart.
If you created your project using one of the DevExpress project templates, you can skip the steps described in this section, as the project is already configured to automatically attach all required client libraries.
The Bootstrap Charts depend on the functionality of the following client libraries.
DevExtreme (17.1) dx.all.js
For a chart control to work properly, you either need to manually provide these libraries, or enable the control to load them automatically by specifying the following settings in the /devExpress/resources section in the Web.config file as shown below.
To learn more on how to manage static resources required by DevExpress controls using the /devExpress/resources section of the Web.config file, refer to the Embedding Third-Party Libraries document.
Bind to Data
This section describes binding a chart to data provided by a data source control. To learn about other available data binding options, refer to the Binding to Data document.
Use the following steps to bind your chart to data.
Add one of ASP.NET data source controls (such as SqlDataSource) to the page and connect it to a data base.
Click the Chart control's smart tag. In the invoked actions list, expand the Choose Data Source drop-down list and select your data source.
Create a Chart Series
Now that your chart is bound to a data source, you need to create and configure a chart series to tell the Chart control how you want it to visualize data items. The steps below describe how to create a chart series using the BootstrapChart Designer shipped with the Bootstrap Charts suite.
Click the Chart control's smart tag and select the Designer
Go to the Series Collection page of the invoked BootstrapChart Designer. Expand the drop-down menu for the Add button and select the Bar series type.
You can fine-tune the chart presentation and behavior in numerous ways using properties exposed by the chart control and its functional elements. For example, in this tutorial, labels displayed by the chart's argument axis take too much horizontal space so they may overlap when the chart is viewed with a small screen resolution. You can resolve this issue by specifying a suitable overlap resolving algorithm using the BootstrapChartAxisLabelSettings.OverlappingBehavior option available through the BootstrapChart.ArgumentAxis.Label.OverlappingBehavior property.
Get the Result
After the essential settings are specified, the Chart control will appear on the design view as shown below.