This is a migrated thread and some comments may be shown as answers.

Bind multiple series using dataset

6 Answers 622 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 19 Jul 2012, 09:26 AM
Hi , 
i want to use HTML Chart to display a graph like this in the attached pic   ( untitled1.png).
With the data from database that have records like in the attached  pic  ( untitled2.png). 

How do i achieve two series of lines in the HTML chart,
currently it binds to only one series.



Thanks in advance,
Ricky

6 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 23 Jul 2012, 12:52 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Madhav Joshi
Top achievements
Rank 2
answered on 14 Nov 2012, 10:15 AM
Hi Slav,

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

<XAxis DataLabelsField = "Activity" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside"
   Reversed="false" >
<LabelsAppearance  RotationAngle="0"></LabelsAppearance>
<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
<TitleAppearance Position="Center" RotationAngle="0" Text="Months"></TitleAppearance>
</XAxis>
<YAxis AxisCrossingValue="0"  Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside"
MinorTickType="Outside"  Reversed="false"  Step="20">
<LabelsAppearance  RotationAngle="0"></LabelsAppearance>
<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
<TitleAppearance Position="Center" RotationAngle="0" Text="Quality OF Fixes"></TitleAppearance>
  </YAxis>
 <Series>
<telerik:ScatterLineSeries Name="STRunFailures" MissingValues="Gap" DataFieldY = "STRunFailures">
 <Appearance>
<FillStyle BackgroundColor="#B5E98D"></FillStyle>
 </Appearance>
<LabelsAppearance  Position="Above">
</LabelsAppearance>
<MarkersAppearance MarkersType="Circle" BackgroundColor="White"></MarkersAppearance>
  <TooltipsAppearance BackgroundColor="#B5E98D" DataFormatString="{0}% on Month {1}">
</TooltipsAppearance>
</telerik:ScatterLineSeries>
</Series>


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

Thanks,
Madhav

0
Marin Bratanov
Telerik team
answered on 15 Nov 2012, 02:44 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Madhav Joshi
Top achievements
Rank 2
answered on 16 Nov 2012, 06:29 AM
Hi,
I Just went for alternative and replaced with Line Series. It has same looks.

Thanks.
0
Aravind
Top achievements
Rank 2
Iron
Iron
Iron
answered on 25 Jun 2013, 04:00 PM
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
0
Danail Vasilev
Telerik team
answered on 28 Jun 2013, 09:45 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Chart (HTML5)
Asked by
Andy
Top achievements
Rank 1
Answers by
Slav
Telerik team
Madhav Joshi
Top achievements
Rank 2
Marin Bratanov
Telerik team
Aravind
Top achievements
Rank 2
Iron
Iron
Iron
Danail Vasilev
Telerik team
Share this question
or