Bind multiple series using dataset

7 posts, 0 answers
  1. Andy
    Andy avatar
    1 posts
    Member since:
    Apr 2012

    Posted 19 Jul 2012 Link to this post

    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

  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 23 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Madhav Joshi
    Madhav Joshi avatar
    19 posts
    Member since:
    Oct 2012

    Posted 14 Nov 2012 Link to this post

    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

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 Nov 2012 Link to this post

    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.
  6. Madhav Joshi
    Madhav Joshi avatar
    19 posts
    Member since:
    Oct 2012

    Posted 16 Nov 2012 Link to this post

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

    Thanks.
  7. Aravind
    Aravind avatar
    41 posts
    Member since:
    Jun 2013

    Posted 25 Jun 2013 Link to this post

    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
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 28 Jun 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017