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
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
0
Hi Luciano,
You can use series definitions, to map each series to the underlying data. This may look something like this:
Regards,
Yavor
the Telerik team
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>
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
Code-behind:
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
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
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:
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
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
Rita
0
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
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
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
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.