Bind multiple series using dataset

Hi Andy,

The RadHtmlChart from you screenshot uses LineSeries in order to present the loaded data. When data-binding this type of RadHtmlChart to a datasource, you need to associate every value table column to a LineSeries via the DataField property. However, in your case you have one column in the table that contains all the series items' data and another column that determines the series, to which the value in that row belongs. There are two approaches that I can suggest, depending on your data:

• If all categories (Companies) have a matching value in the Period column, you can use this column to determine the categories, displayed in the X-Axis of the RadHtmlChart, and to present the data in LineSeries. You can find attached a sample page that demonstrates this approach. In it I have utilized SqlDataSource control with SQL Query that selects the values for each series as a separate table and matches the results form the two tables by the category column (Year in my example, Period in you case). The example uses the Data table from the Telerik database, which can be found in your local installation of the RadControls for ASP.NET AJAX (Live Demos\App_Data).
• In case the values of the Period column will not match for the different Companies in the CompanyName column, you will have you use a ScatterLineSeries. This type of series need a value from both the X and Y Axis of the chart control, which are specified via the XValue and YValue property of every SeriesItem. In order to data-bind this type of RadHtmlChart you will have to get the data from your table, to populate it in a different business object for every Company and to use these objects for dynamically creating SeriesItems for the chart control, similarly to the approach for inserting the data in the online demo HtmlChart / Programmatic Creation.

I hope this helps. Feel free to contact us again if you run into more difficulties.

All the best,
Slav
the Telerik team

Hi Slav,

My implementation has some issues when i Use  ScatterLineSeries . Code goes below .



DataLabelsField (Activity) Is of String format and i Dont get it mapped on Xaxis . Please help me on this.

Thanks,
Madhav

Hello Madhav,

The ScatterLine series do not use a categorical x-axis, but a numerical one. This means that you have numbers based on the x-values of the series items (usually taken from the DataFieldX property). Only a categorical x-axis can create items for each row and can thus take the column name as a parameter for the DatalabelsField property. The LineSeries has a categorical x-axis. You can see it in this online demo: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/databinding/database/defaultcs.aspx. It is a BarSeries but just changing the BarSeries to LineSeries should give you a chart with categories on the x-axis based on the datasource.


Greetings,
Marin Bratanov
the Telerik team

Hi,
I Just went for alternative and replaced with Line Series. It has same looks.

Thanks.

Hi
  Hello i am searching for radhtml bar chart codings,i have datatable and plot in bar chart like this "http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/barchart/defaultvb.aspx"
how to plot datas in bar chart in server side .

And i need dountchart plot datas in server side chart type like this "http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/donutchart/defaultvb.aspx"

and my question why all chart examples are plotted in code-behind (in html source),why no one code is server side ?


Regards
  Aravind

Hi Aravind,

You can find an example on how to create RadHtmlChart in the code behind in HtmlChart - Programmatic Chart Creation online demo. You can modify that example for the desired Series type.

The reason why most of the examples of the RadHtmlChart are created in the markup is because the configuration of the declaratively created charts is more intuitive to be understand due to its visual appearance (there is a hierarchy of the chart's elements). Note, however, that all the properties and elements of the chart set in the markup can also be declared in the code behind with the same names.

You can also find useful the server-side API of the chart.


Regards,
Danail Vasilev
Telerik