Multiple line series radhtmlchart

2 posts, 0 answers
  1. Константин
    Константин avatar
    8 posts
    Member since:
    Jul 2017

    Posted 13 Mar Link to this post

    hi, I have a radchart and want to show multiple lines using sql data source. User selects date range from calendar (raddatepicker) after that select points from radcombobox and I query the database for those range with three parameters (first date, second date and name point), naturally this is all handled by RadAjaxManager.I'm aware that in radhtmlchart not supported datagroupcolumn. How to do it radhtmlchart with multiple line series.

    This is my code ASPX with radchart setting and RadAjaxManager:

    <telerik:RadDatePicker runat="server" Visible="true" ID="dpIN"></telerik:RadDatePicker> &nbsp;&nbsp; <telerik:RadDatePicker runat="server" Visible="true" ID="dpOUT"></telerik:RadDatePicker>
        <telerik:RadComboBox ID="rcb_point" runat="server" AutoPostBack="True" DataSourceID="dsPoints" Width="300px"
                DataTextField="name_point" DataValueField="id" 
                AppendDataBoundItems="true">
                <Items>
                    <telerik:RadComboBoxItem Text="Все точки" Value="0" Selected="true"></telerik:RadComboBoxItem>
                </Items>
            </telerik:RadComboBox>

    <telerik:RadChart ID="RadChart2" DataSourceID="SqlDataSource1" runat="server"
                            Width="1500px" Height="800px" DefaultType="Line" OnItemDataBound="RadChart1_ItemDataBound" 
                            AutoLayout="true" AutoTextWrap="true" CreateImageMap="false">
            <ChartTitle>
                
            </ChartTitle>
            <Series>
                <telerik:ChartSeries DataYColumn="param_d" Name="передача данных" Type="StackedLine">
                    <Appearance LegendDisplayMode="ItemLabels">
                        
                    </Appearance>

                </telerik:ChartSeries>

            </Series>
        </telerik:RadChart>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionInfo %>" SelectCommand="RetrieveChart" SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:ControlParameter ControlID="rcb_point"  Name="point_id" PropertyName="SelectedValue" Type="Int32" />
            <asp:ControlParameter ControlID="dpIN" Name="date_in" PropertyName="SelectedDate" Type="DateTime" />
            <asp:ControlParameter ControlID="dpOUT" Name="date_out" PropertyName="SelectedDate" Type="DateTime" />
        </SelectParameters>
    </asp:SqlDataSource>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
          <AjaxSettings>
              <telerik:AjaxSetting AjaxControlID="rcb_point">
                  <UpdatedControls>
                      <telerik:AjaxUpdatedControl ControlID="RadChart2" LoadingPanelID="RadAjaxLoadingPanel1" />
                      <telerik:AjaxUpdatedControl ControlID="rcb_point" />
                      <telerik:AjaxUpdatedControl ControlID="dpIN" />
                      <telerik:AjaxUpdatedControl ControlID="dpOUT" />

                  </UpdatedControls>
              </telerik:AjaxSetting>
          </AjaxSettings>
      </telerik:RadAjaxManager>
     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
     </telerik:RadAjaxLoadingPanel>

     

    And this is my C# code:

           protected void Page_Load(object sender, EventArgs e)
            {
                RadChart2.DataGroupColumn = "sensor_type";
                RadChart2.PlotArea.XAxis.DataLabelsColumn = "date_in";
                RadChart2.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 300;
                RadChart2.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(30);
            }

     

    Bellow i will attach two picture: my structure data table, i need to form multiple line series a column "sensor_type", and this is what i have right now.

     

    Thank you for your attention, i hope upi will help me.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4931 posts

    Posted 15 Mar Link to this post

    Hi Константин,

    The RadChart control has not been supported for 4.5 years and I can provide an answer below that pertains to the currently supported RadHtmlChart control.

    I advise that you start by examining the following article to see the data format that the chart needs, so you can see how you need to prepare the data for it (basically, each series needs its own column, and one column is needed for the x-axis): https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/data-binding/overview.

    The following project shows one way you can manipulate the data in to what the chart needs: https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/conditional-item-colorization.


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top