Hi Team,
I am working with Line chart and I got unexpected output.
<telerik:RadChart ID="radLineChart" runat="server" Width="1200" Height="800px"
Margins-Left="10px" ChartImageFormat="Jpeg" Margins-Right="10px" UseSession="false">
<Appearance BarWidthPercent="50">
<FillStyle MainColor="52, 52, 52">
</FillStyle>
</Appearance>
<ChartTitle Visible="false">
<TextBlock Text="Habit report">
</TextBlock>
</ChartTitle>
<Legend Visible="False"></Legend>
<PlotArea>
<Appearance Dimensions-Margins="20px, 10px, 90px, 150px">
<FillStyle MainColor="52, 52, 52">
</FillStyle>
</Appearance>
<XAxis Appearance-LabelAppearance-RotationAngle="45" LayoutMode="Between" AxisLabel-TextBlock-Appearance-Position-AlignedPosition="BottomLeft">
</XAxis>
</PlotArea>
</telerik:RadChart>
Cs :
radLineChart.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortTime;
//radLineChart.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 90;
ChartSeries series = new ChartSeries();
series.Type = ChartSeriesType.Line;
series.DataYColumn = "AppGroupId";
series.DataXColumn = "Time";
radLineChart.Series.Add(series);
radLineChart.PlotArea.XAxis.IsZeroBased = false;
radLineChart.PlotArea.XAxis.AutoScale = false;
//radLineChart.PlotArea.YAxis.IsZeroBased = false;
radLineChart.PlotArea.YAxis.AutoScale = false;
const double hourStep = 1 / 24.0;
double startTime = timeValue.AddHours(0).ToOADate();
double endTime = timeValue.AddHours(23).ToOADate();
radLineChart.PlotArea.XAxis.AddRange(startTime, endTime, hourStep);
ChartAxisItem cai_0 = new ChartAxisItem();
cai_0.TextBlock.Text = "Idle";
cai_0.Value = 0;
cai_0.TextBlock.Appearance.AutoTextWrap = AutoTextWrap.True;
radLineChart.PlotArea.YAxis.Items.Add(cai_0);
int i = 0;
for (i = 0; i < ds.Tables[1].Rows.Count; i++)
{
ChartAxisItem cai = new ChartAxisItem();
cai.TextBlock.Text = ds.Tables[1].Rows[i]["Name"].ToString();
cai.Value = Convert.ToInt32(ds.Tables[1].Rows[i]["AppRowId"]);
cai.TextBlock.Appearance.AutoTextWrap = AutoTextWrap.True;
radLineChart.PlotArea.YAxis.Items.Add(cai);
}
radLineChart.Series[0].Appearance.LabelAppearance.Visible = false;
//radLineChart.Series[0].Appearance.PointMark.Dimensions.Width = 5;
radLineChart.Series[0].Appearance.FillStyle.MainColor = System.Drawing.Color.FromArgb(234, 84, 134);
// visually enhance the data points
radLineChart.Series[0].Appearance.PointMark.Dimensions.Width = 5;
radLineChart.Series[0].Appearance.PointMark.Dimensions.Height = 5;
radLineChart.Series[0].Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
radLineChart.Series[0].Appearance.PointMark.Visible = true;
radLineChart.DataSource = FormattedRawData(ds.Tables[0], ds.Tables[1]);//, list);
radLineChart.DataBind();
radLineChart.Visible = true;
lblTitle.Visible = true;
lblTitle.Text = _reportTitle + " for " + txtStartDate.SelectedDate.Value.ToString("yyyy-MM-dd");
I am working with Line chart and I got unexpected output.
Please find the actual output of the chart in the image LineChartImage_Actual.jpg. In that, the "Custom" value starts at 5:00 AM and Ends at 6:00 AM. And "MyFiles" starts at 9:00 AM and ends at 9:30 AM. Again "Custom" starts at 9:30 AM and Ends at 10:00 AM.
I want to join the point mark of "MyFiles" at 9:30 AM and the point mark of "Custom" at 9:30 AM. And in the same way join the point mark of "Custom" at 10:00 AM and point mark of "Music" at 10:00 AM as these are adjacent point Marks in order to show a series of activities done as shown in the LineChartImage_Expected.jpg.
Please help to achieve my above requirement. Else advise me to use the relevant chart. Thanks in advance.
The code which i used is given below.
<telerik:RadChart ID="radLineChart" runat="server" Width="1200" Height="800px"
Margins-Left="10px" ChartImageFormat="Jpeg" Margins-Right="10px" UseSession="false">
<Appearance BarWidthPercent="50">
<FillStyle MainColor="52, 52, 52">
</FillStyle>
</Appearance>
<ChartTitle Visible="false">
<TextBlock Text="Habit report">
</TextBlock>
</ChartTitle>
<Legend Visible="False"></Legend>
<PlotArea>
<Appearance Dimensions-Margins="20px, 10px, 90px, 150px">
<FillStyle MainColor="52, 52, 52">
</FillStyle>
</Appearance>
<XAxis Appearance-LabelAppearance-RotationAngle="45" LayoutMode="Between" AxisLabel-TextBlock-Appearance-Position-AlignedPosition="BottomLeft">
</XAxis>
</PlotArea>
</telerik:RadChart>
Cs :
radLineChart.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortTime;
//radLineChart.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 90;
ChartSeries series = new ChartSeries();
series.Type = ChartSeriesType.Line;
series.DataYColumn = "AppGroupId";
series.DataXColumn = "Time";
radLineChart.Series.Add(series);
radLineChart.PlotArea.XAxis.IsZeroBased = false;
radLineChart.PlotArea.XAxis.AutoScale = false;
//radLineChart.PlotArea.YAxis.IsZeroBased = false;
radLineChart.PlotArea.YAxis.AutoScale = false;
const double hourStep = 1 / 24.0;
double startTime = timeValue.AddHours(0).ToOADate();
double endTime = timeValue.AddHours(23).ToOADate();
radLineChart.PlotArea.XAxis.AddRange(startTime, endTime, hourStep);
ChartAxisItem cai_0 = new ChartAxisItem();
cai_0.TextBlock.Text = "Idle";
cai_0.Value = 0;
cai_0.TextBlock.Appearance.AutoTextWrap = AutoTextWrap.True;
radLineChart.PlotArea.YAxis.Items.Add(cai_0);
int i = 0;
for (i = 0; i < ds.Tables[1].Rows.Count; i++)
{
ChartAxisItem cai = new ChartAxisItem();
cai.TextBlock.Text = ds.Tables[1].Rows[i]["Name"].ToString();
cai.Value = Convert.ToInt32(ds.Tables[1].Rows[i]["AppRowId"]);
cai.TextBlock.Appearance.AutoTextWrap = AutoTextWrap.True;
radLineChart.PlotArea.YAxis.Items.Add(cai);
}
radLineChart.Series[0].Appearance.LabelAppearance.Visible = false;
//radLineChart.Series[0].Appearance.PointMark.Dimensions.Width = 5;
radLineChart.Series[0].Appearance.FillStyle.MainColor = System.Drawing.Color.FromArgb(234, 84, 134);
// visually enhance the data points
radLineChart.Series[0].Appearance.PointMark.Dimensions.Width = 5;
radLineChart.Series[0].Appearance.PointMark.Dimensions.Height = 5;
radLineChart.Series[0].Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
radLineChart.Series[0].Appearance.PointMark.Visible = true;
radLineChart.DataSource = FormattedRawData(ds.Tables[0], ds.Tables[1]);//, list);
radLineChart.DataBind();
radLineChart.Visible = true;
lblTitle.Visible = true;
lblTitle.Text = _reportTitle + " for " + txtStartDate.SelectedDate.Value.ToString("yyyy-MM-dd");