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

Chart with multiple Line Series

7 Answers 370 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Luciano
Top achievements
Rank 1
Luciano asked on 26 Apr 2011, 08:30 AM
Hi,
how it's possible create a chart with multiple line series?

for example in my db I have:

Date                Type        Value
01/01/2011      Red            8
01/01/2011      Yellow        12
01/01/2011      Green        9
02/01/2011      Red            6
02/01/2011      Yellow        9
02/01/2011      Green        7
03/01/2011      Red           5
03/01/2011      Yellow       11
03/01/2011      Green       13

I want create more line series how many are the type ( in my example 3), where the x-axis is Date and the y-axis Value.

I create a dataSource but whit series in property of the chart I can create only one line series.

thanks

7 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 28 Apr 2011, 09:28 AM
Hi Luciano,

You can use series definitions, to map each series to the underlying data. This may look something like this:

<telerik:RadChart ID="RadChart2" runat="server" Skin="LightGreen" Width="450" Height="300" DataSourceID="AccessDataSource1" DefaultType="Bar">
<Series>
<telerik:ChartSeries Type="Line" DataYColumn="UnitPrice">
</telerik:ChartSeries>
<telerik:ChartSeries Type="Line" DataYColumn="UnitsInStock">
</telerik:ChartSeries>
<telerik:ChartSeries Type="Line" DataYColumn="UnitsOnOrder">
</telerik:ChartSeries>
</Series>
</telerik:RadChart>

Naturally, you will map your series to the particular fields pertaining to your scenario, but the logic remains the same.

Regards,
Yavor
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Rita
Top achievements
Rank 1
answered on 22 Nov 2011, 07:16 PM
I have a similar problem. Currently, I have a radchart with a line chartseries that uses a datasource. I need to:
1. show multiple line series, where each will be controlled by a separate SQL datasource.
2. each line series should be colored differently
3. each line series is to start on a datapoint where the prior line series ends (i.e. ChartSeries1 end at 5, ChartSeries2 is to start at datapoint 6).

Below is my code:
ASP.NET
<telerik:RadChart ID="trcBehaviorData" runat="server" OnItemDataBound="trcBehaviorData_ItemDataBound" DataSourceID="behaviorDataSummary"
        AutoLayout="true" DefaultType="Line" Width="810px" Height="350px">
         
    <Series>
        <cc1:ChartSeries Name="dataMeasurement" Appearance-FillStyle-MainColor="38, 137, 188" DataYColumn="result" Type="Line" DataLabelsColumn="date" >
            <Appearance BubbleSize="10">
                <PointMark Visible="True" Border-Width="1" Border-Color="221, 235, 244" Dimensions-AutoSize="false"
                        Dimensions-Height="8px" Dimensions-Width="8px">
                    <FillStyle MainColor="38, 137, 188" FillType="solid">
                    </FillStyle>
                </PointMark>
                <LineSeriesAppearance Width="1" />
            </Appearance>
        </cc1:ChartSeries>
         
    </Series>
    <PlotArea>
        <XAxis>
            <Appearance Color="226, 218, 202" MajorTick-Color="221, 235, 244">
                <MajorGridLines Color="221, 235, 244" />
                <TextAppearance TextProperties-Color="81, 99, 100">
                </TextAppearance>
            </Appearance>
            <AxisLabel>
                <TextBlock>
                    <Appearance TextProperties-Color="78, 168, 188">
                    </Appearance>
                </TextBlock>
            </AxisLabel>
        </XAxis>
        <YAxis AxisMode="Normal" Appearance-LabelAppearance-Position-AlignedPosition="Center">
            <Appearance Color="226, 218, 202" MajorTick-Color="221, 235, 244" MinorTick-Color="221, 235, 244">
                <MajorGridLines Color="247, 251, 252" />
                <MinorGridLines Color="247, 251, 252" />
                <TextAppearance TextProperties-Color="81, 99, 100">
                </TextAppearance>
            </Appearance>
            <AxisLabel>
                <TextBlock>
                    <Appearance TextProperties-Color="247, 251, 252">
                    </Appearance>
                </TextBlock>
            </AxisLabel>
        </YAxis>
        <Appearance Dimensions-Width="30" Dimensions-Margins="40px, 30px, 15%, 9%">
            <FillStyle MainColor="247, 251, 252" SecondColor="Transparent">
            </FillStyle>
            <Border Color="221, 235, 244" />
        </Appearance>
    </PlotArea>
    <Appearance BarWidthPercent="20" Corners="Round, Round, Round, Round, 5">
        <FillStyle MainColor="247, 251, 252">
        </FillStyle>
        <Border Color="188, 229, 231" Width="1" />
    </Appearance>
    <ChartTitle>
        <Appearance Dimensions-Margins="4%, 10px, 10px, 7%">
            <FillStyle MainColor="">
            </FillStyle>
        </Appearance>
        <TextBlock Text="">
            <Appearance TextProperties-Color="232, 140, 0" TextProperties-Font="Verdana, 20pt, style=Bold">
            </Appearance>
        </TextBlock>
    </ChartTitle>
    <Legend>
        <Appearance Visible="false" Position-AlignedPosition="TopLeft">
            <ItemTextAppearance TextProperties-Color="81, 99, 100">
            </ItemTextAppearance>
            <Border Color="247, 251, 252" />
        </Appearance>
        <TextBlock Visible="true">
        </TextBlock>
    </Legend>
</telerik:RadChart>

Code-behind:
protected void behaviorDataSummary_Selecting(object sender, LinqDataSourceSelectEventArgs e)
{
    RethinkAutismDataContext ctx = new RethinkAutismDataContext();
    var behavior = (from bt in ctx.BehaviorTrackings
                    where bt.id == behaviorId
                    select bt).SingleOrDefault();
    if (behavior != null)
    {
        e.Result = ctx.dataReportForBehaviorPlan(ChildProfileId, behaviorId, Plan);
         
    }
}
 
protected void trcBehaviorData_ItemDataBound(object sender, Telerik.Charting.ChartItemDataBoundEventArgs e)
{
    RethinkAutismDataContext ctx = new RethinkAutismDataContext();
 
    NameValueCollection nvcNotes = (NameValueCollection)Session["nvcNotes"];
 
    int index = e.SeriesItem.Index;
    var key = nvcNotes[(index + 1).ToString()];
 
    var r = ctx.viewBehaviorPlanDataInfos.Where(rr => rr.dataSetId == Convert.ToInt32(key)).FirstOrDefault();
    if (r != null)
    {
        String bNotes = "";
        if (!String.IsNullOrEmpty(r.notes))
            bNotes = ":<br /> " + r.notes;
        e.SeriesItem.ActiveRegion.Tooltip = "<b>" + r.dateCreated.ToString("MM/dd/yyyy") + " " + r.uName + "</b>" + bNotes;
        e.SeriesItem.YValue = (double)r.result;
 
    }
}
 
protected void buildChartXAxis()
{
 
    int idx = 0;
    int planCount = 1;
 
    RethinkAutismDataContext ctx = new RethinkAutismDataContext();
    var behavior = (from b in ctx.BehaviorTrackings
                    where b.id == behaviorId
                    select b).SingleOrDefault();
    trackingMethod = behavior.MethodTypeLU.Name;
    int resultCount = 0;
 
    List<dataReportForBehaviorPlanResult> result = ctx.dataReportForBehaviorPlan(ChildProfileId, behaviorId, Plan).ToList();
    intervalMinutes = (int)behavior.intervalsOfMinutes;
    resultCount = result.Count();
    if (resultCount > 0)
    {
        if (resultCount < 21)
        {
            IEnumerator ieResult = result.GetEnumerator();
            ieResult.MoveNext();
            dataReportForBehaviorPlanResult resultSummary = (dataReportForBehaviorPlanResult)ieResult.Current;
 
            trcBehaviorData.PlotArea.XAxis.AutoScale = false;
            trcBehaviorData.PlotArea.XAxis.AddRange(1, 21, 1);
            for (int i = 0; i < 21; i++)
            {
                trcBehaviorData.PlotArea.XAxis[i].TextBlock.Text = (i + 1).ToString();
            }
        }
 
        if (resultCount > 20)
        {
            trcBehaviorData.PlotArea.XAxis.AutoScale = false;
            trcBehaviorData.PlotArea.XAxis.AddRange(1, resultCount + 1, 1);
 
            IEnumerator ieResult = result.GetEnumerator();
            while (ieResult.MoveNext())
            {
                dataReportForBehaviorPlanResult resultSummary = (dataReportForBehaviorPlanResult)ieResult.Current;
 
                trcBehaviorData.PlotArea.XAxis[idx].TextBlock.Text = planCount.ToString();
                idx++;
                planCount++;
            }
        }
    }
 
}
 
protected void buildChartYAxis()
{
    RethinkAutismDataContext ctx = new RethinkAutismDataContext();
    var behavior = (from b in ctx.BehaviorTrackings
                    where b.id == behaviorId
                    select b).SingleOrDefault();
    trackingMethod = behavior.MethodTypeLU.Name;
    double yAxisLabel = 0;
 
    switch (trackingMethod)
    {
        case "Intervals":
            trcBehaviorData.PlotArea.YAxis.AutoScale = false;
            trcBehaviorData.PlotArea.YAxis.AddRange(0, 120, 10);
 
            for (int i = 0; i < 11; i++)
            {
                trcBehaviorData.PlotArea.YAxis[i].TextBlock.Text = yAxisLabel.ToString() + "%";
                yAxisLabel += 10;
            }
            trcBehaviorData.PlotArea.YAxis[11].TextBlock.Text = "Intervals";
            trcBehaviorData.PlotArea.YAxis[12].TextBlock.Text = "% of";
            break;
        case "Rate":
 
            trcBehaviorData.PlotArea.YAxis.AutoScale = false;
            var planValues = (from pl in ctx.viewBehaviorPlanDataInfos
                                  where pl.planId == Convert.ToInt32(hfCurrentPlan.Value)
                                  select pl.result).ToList();
            double maxValue = Math.Ceiling(Convert.ToDouble(planValues.Max()));
            if (maxValue < 5)
                maxValue = 5;
            trcBehaviorData.PlotArea.YAxis.AddRange(0, (maxValue + 3), 1);
            for (int i = 0; i < (maxValue+1); i++)
            {
                trcBehaviorData.PlotArea.YAxis[i].TextBlock.Text = yAxisLabel.ToString();
                yAxisLabel += 1;
            }
            trcBehaviorData.PlotArea.YAxis[Convert.ToInt32(maxValue+2)].TextBlock.Text = "/ hour";
            trcBehaviorData.PlotArea.YAxis[Convert.ToInt32(maxValue+3)].TextBlock.Text = "times";
            break;
        case "Duration":
            trcBehaviorData.PlotArea.YAxis.AutoScale = false;
            trcBehaviorData.PlotArea.YAxis.AddRange(0, 65, 5);
            for (int i = 0; i < 13; i++)
            {
                trcBehaviorData.PlotArea.YAxis[i].TextBlock.Text = yAxisLabel.ToString();
                yAxisLabel += 5;
            }
            trcBehaviorData.PlotArea.YAxis[13].TextBlock.Text = "Min";
            break;
    }
 
}

The DataSource right now is set on a telerik:RadChart as behaviorDataSummary, with only 1 chartSeriesItem defined. I would need to know how to change that to use a separate datasource for each chartSeriesItem. Code is greatly appreciated and I need this ASAP.

Thanks,
Rita
0
Evgenia
Telerik team
answered on 27 Nov 2011, 03:28 PM
Hello Rita,

1. I am afraid the ChartSeries objects in RadChart for ASP.NET AJAX do not support separate datasource. You can either try to compose a list of custom objects, which contain all the necessary information or you may have a DataSet of DataTables where each DataTable is used as source for your series.
For the first approach please take a look at our demo with source code provided.
For the second one you may use source code similar to this:
protected void Page_Load(object sender, EventArgs e)
  
   {
  
       DataTable tbl = new DataTable();
  
       DataColumn col = new DataColumn("Value");
  
       col.DataType = typeof(double);
  
       tbl.Columns.Add(col);
  
       col = new DataColumn("XValue");
  
       col.DataType = typeof(double);
  
       tbl.Columns.Add(col);
  
  
  
       DataTable tbl1 = new DataTable();
 
       DataColumn col1 = new DataColumn("Value1");
  
       col1.DataType = typeof(double);
  
       tbl1.Columns.Add(col1);
  
       col1 = new DataColumn("XValue1");
  
       col1.DataType = typeof(double);
  
       tbl1.Columns.Add(col1);
  
  
  
       int size = 15;
  
       int maxLen = size.ToString().Length;
  
       for (int i = 1; i <= size; i++)
  
       {
  
           tbl.Rows.Add(new object[] { i * 2, i });
  
           tbl1.Rows.Add(new object[] { i * 3, i });
  
       }
  
  
  
       DataSet dsNew = new DataSet();
  
       dsNew.Tables.Add(tbl);
  
       dsNew.Tables.Add(tbl1);
  
  
  
       ChartSeries series1 = new ChartSeries("Series 1");
  
  
  
       series1.Type = ChartSeriesType.Line;
  
  
  
       foreach (DataRow dr in dsNew.Tables[0].Rows)
  
       {
  
  
  
           ChartSeriesItem item = new ChartSeriesItem();
  
  
  
           item.XValue = Convert.ToDouble(dr["XValue"].ToString());
  
  
  
           item.YValue = Convert.ToDouble(dr["Value"].ToString());
  
  
  
           series1.Items.Add(item);
  
  
  
       }
  
       RadChart1.Series.Add(series1);
  
  
  
       ChartSeries series2 = new ChartSeries("Series 2");
  
  
  
       series2.Type = ChartSeriesType.Line;
  
       foreach (DataRow dr in dsNew.Tables[1].Rows)
  
       {
  
  
  
           ChartSeriesItem item = new ChartSeriesItem();
  
  
  
           item.XValue = Convert.ToDouble(dr["XValue1"].ToString());
  
  
  
           item.YValue = Convert.ToDouble(dr["Value1"].ToString());
  
  
  
           series2.Items.Add(item);
  
  
  
       }
  
       RadChart1.Series.Add(series2);
  
  
  
       RadChart1.PlotArea.XAxis.DataLabelsColumn = "Day";
  
   }

2. You can set custom color for your series by the Series[SerieIndex].Appearance.FillStyle.MainColor property.

3. Just set the first item.XValue of the second Serie to be equal to the last item.XValue of the first Serie by following the approach with DataTables shown in 1.

Kind regards,
Evgenia
the Telerik team

Q3’11 of Telerik Reporting is available for download. Register for the What's New in Data Tools webinar to see what's new and get a chance to WIN A FREE LICENSE!

0
Rita
Top achievements
Rank 1
answered on 28 Nov 2011, 04:22 PM
Thank you, Evgenia. I will definitely try out your approach. I can also potentially change the current datasource so that it would contain the necessary information for the 2 line series. My question, in that case is: if I want to use a column "planId" to group the resultset for each line series, how would I do that? I know there's something called DataGroupColumn, but I don't know if that's appropriate in this situation. If you can point me in the right direction, I'd appreciate it.

Rita
0
Evgenia
Telerik team
answered on 01 Dec 2011, 02:54 PM
Hi Rita,

You may use a DataGroupColumn property as shown in our help topic. Please note that the property should be set to the Chart itself so there should be no problem with using it in your scenario.

Kind regards,
Evgenia
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
Chandrak
Top achievements
Rank 1
answered on 30 Mar 2017, 02:46 PM
Hi.. I know it is too old post.. but having same requirement. Using C#..is this possible through wizard? if not can you give me step by step code behind?
0
Vessy
Telerik team
answered on 04 Apr 2017, 11:02 AM
Hi Chandrak,

Can you elaborate on whether you are using RadChart or RadHtmlChart? I am asking you that as RadChart has been deprecated for a while and it is now replaced by RadHtmlChart.

If you are using RadHtmlChart Line series, you can see how to manage the Series collection of the control through the Configuration Wizzard in the following help article:
http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/design-time/configuration-wizard#series

Regards,
Vessy
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Luciano
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Rita
Top achievements
Rank 1
Evgenia
Telerik team
Chandrak
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or