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

Multiple line series radhtmlchart

1 Answer 323 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Константин
Top achievements
Rank 1
Константин asked on 13 Mar 2019, 07:59 AM

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.

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 15 Mar 2019, 02:46 PM
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.
Tags
Chart (HTML5)
Asked by
Константин
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or