Mike Treat
Top achievements
Rank 1
Mike Treat
asked on 30 Jun 2010, 05:22 PM
Hi,
Barchart is taking time to load in webpage. I have a data table of 100 records and i am binding that to barchart. Rendering is taking so long from bar chart.
Is there any method that i can fasten the barchart loading
Barchart is taking time to load in webpage. I have a data table of 100 records and i am binding that to barchart. Rendering is taking so long from bar chart.
Is there any method that i can fasten the barchart loading
5 Answers, 1 is accepted
0
Mike Treat
Top achievements
Rank 1
answered on 02 Jul 2010, 09:41 PM
Hi,
Can anybody help to improve the loading time for Radbarchart
Can anybody help to improve the loading time for Radbarchart
0
Hello Mike,
Have you enabled the RadChart.IntelligentLabelsEnabled property? If yes, we would suggest you to try to disable it (unfortunately currently there is no other workaround) as in scenarios when the control is populated with large amount of data, enabling the "intelligent labels" feature might cause noticeable performance degradation as it takes long time to execute the label positioning calculations.
If the problem persists, we would ask you to send us your control declaration so we can advise you properly how to proceed.
Regards,
Freddie
the Telerik team
Have you enabled the RadChart.IntelligentLabelsEnabled property? If yes, we would suggest you to try to disable it (unfortunately currently there is no other workaround) as in scenarios when the control is populated with large amount of data, enabling the "intelligent labels" feature might cause noticeable performance degradation as it takes long time to execute the label positioning calculations.
If the problem persists, we would ask you to send us your control declaration so we can advise you properly how to proceed.
Regards,
Freddie
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
Mike Treat
Top achievements
Rank 1
answered on 05 Jul 2010, 12:29 PM
Thanks for your reply. RadChart.IntelligentLabelsEnabled was enabled. we disabled it. it has improved the performance. Now able to load 50% faster. I have pasted the code below.
See the code details
<telerik:RadChart ID="rdChart" runat="server" Width="1132px"
Skin="Vista" OnDataBound="rdChart_DataBound" Height="1000px" OnItemDataBound="rdChart_ItemDataBound"
SeriesOrientation="Horizontal"
HttpHandlerUrl="ChartImage.axd" >
<PlotArea>
<XAxis>
<Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">
<MajorGridLines Width="0" Color="196, 196, 196"></MajorGridLines>
<TextAppearance TextProperties-Color="89, 89, 89">
</TextAppearance>
</Appearance>
<AxisLabel>
<Appearance Dimensions-Paddings="1px, 1px, 10%, 1px" RotationAngle="270">
</Appearance>
<TextBlock>
<Appearance TextProperties-Color="51, 51, 51">
</Appearance>
</TextBlock>
</AxisLabel>
</XAxis>
<YAxis MaxValue="60" MinValue="-100" Step="20">
<Appearance Color="134, 134, 134" MinorTick-Color="196, 196, 196" MajorTick-Color="196, 196, 196">
<MajorGridLines Color="196, 196, 196"></MajorGridLines>
<MinorGridLines Color="196, 196, 196" Width="0"></MinorGridLines>
<TextAppearance TextProperties-Color="89, 89, 89">
</TextAppearance>
</Appearance>
<AxisLabel>
<Appearance RotationAngle="0">
</Appearance>
<TextBlock>
<Appearance TextProperties-Color="220, 158, 119">
</Appearance>
</TextBlock>
</AxisLabel>
</YAxis>
<YAxis2>
<AxisLabel>
<Appearance RotationAngle="0">
</Appearance>
</AxisLabel>
</YAxis2>
<Appearance Dimensions-Margins="70px, 20px, 30px, 70px" Dimensions-AutoSize="False"
Dimensions-Height="900px" Dimensions-Width="1000px" Position-AlignedPosition="Center">
<FillStyle MainColor="Transparent" SecondColor="Transparent">
</FillStyle>
<Border Color="WhiteSmoke" />
<Shadow Blur="5" />
</Appearance>
</PlotArea>
<Appearance Corners="Rectangle, Rectangle, Rectangle, Rectangle, 7"
ImageQuality="Default">
<FillStyle FillType="ComplexGradient">
<FillSettings>
<ComplexGradient>
<cc2:GradientElement Color="243, 253, 255" />
<cc2:GradientElement Color="White" Position="0.5" />
<cc2:GradientElement Color="243, 253, 255" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<Border Color="212, 221, 222" Width="0" />
<Shadow Blur="5" />
</Appearance>
<ClientSettings EnableZoom="False" />
<ChartTitle Visible="False">
<Appearance Dimensions-Margins="3%, 1px, 1px, 6%" Visible="False">
<FillStyle MainColor="">
</FillStyle>
<Shadow Blur="5" />
</Appearance>
<TextBlock Text="Units Projection Program By Program">
<Appearance TextProperties-Color="86, 88, 89" TextProperties-Font="Verdana, 22px">
</Appearance>
</TextBlock>
</ChartTitle>
<Legend>
<Appearance GroupNameFormat="#VALUE" Dimensions-Margins="15px, 1%, 10%, 1px" Overflow="Row"
Position-AlignedPosition="Top">
<ItemTextAppearance TextProperties-Color="86, 88, 89">
</ItemTextAppearance>
<ItemMarkerAppearance Figure="Rectangle">
</ItemMarkerAppearance>
<FillStyle MainColor="">
</FillStyle>
<Border Color="" />
<Shadow Blur="5" />
</Appearance>
<TextBlock>
<Appearance Position-AlignedPosition="Top" TextProperties-Color="86, 88, 89">
</Appearance>
</TextBlock>
</Legend>
<Series>
<cc2:ChartSeries Name="UnitsProjected">
<Appearance Border-Color="223, 170, 43" Shadow-Blur="5" Shadow-Distance="3">
<FillStyle MainColor="#A5A2FF" SecondColor="#8C86CE">
<FillSettings GradientMode="Vertical">
<ComplexGradient>
<cc2:GradientElement Color="213, 247, 255" />
<cc2:GradientElement Color="193, 239, 252" Position="0.5" />
<cc2:GradientElement Color="157, 217, 238" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<LabelAppearance Dimensions-Margins="0px, 0px, 0px, 0px" Dimensions-Paddings="0px, 0px, 0px, 0px"
Position-AlignedPosition="Center" CompositionType="RowImageText">
<Shadow Blur="5" />
</LabelAppearance>
<PointMark>
<Shadow Blur="5" />
</PointMark>
<TextAppearance TextProperties-Color="Black" TextProperties-Font="Verdana, 7pt"
Position-AlignedPosition="None" Dimensions-Margins="0px, 0px, 0px, 0px"
Dimensions-Paddings="0px, 0px, 0px, 0px">
<FillStyle>
<FillSettings ImageFlip="FlipX">
</FillSettings>
</FillStyle>
</TextAppearance>
<Border Color=""></Border>
<Shadow Blur="5" />
</Appearance>
</cc2:ChartSeries>
<cc2:ChartSeries Name="UnitScheduled">
<Appearance Border-Color="223, 170, 43" Shadow-Blur="5" Shadow-Distance="3">
<FillStyle MainColor="#A54D73" SecondColor="#8C4563">
<FillSettings GradientMode="Vertical">
<ComplexGradient>
<cc2:GradientElement Color="218, 254, 122" />
<cc2:GradientElement Color="198, 244, 80" Position="0.5" />
<cc2:GradientElement Color="153, 205, 46" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<LabelAppearance Dimensions-Margins="0px, 0px, 0px, 0px" Dimensions-Paddings="0px, 0px, 0px, 0px">
<Shadow Blur="5" />
</LabelAppearance>
<PointMark>
<Shadow Blur="5" />
</PointMark>
<TextAppearance TextProperties-Color="Black" TextProperties-Font="Verdana, 7pt">
</TextAppearance>
<Border Color=""></Border>
<Shadow Blur="5" />
</Appearance>
</cc2:ChartSeries>
<cc2:ChartSeries Name="UnitsActual">
<Appearance Border-Color="223, 170, 43" Shadow-Blur="5" Shadow-Distance="3">
<FillStyle MainColor="#297929" SecondColor="#297929">
<FillSettings GradientMode="Vertical">
<ComplexGradient>
<cc2:GradientElement Color="136, 221, 246" />
<cc2:GradientElement Color="97, 203, 234" Position="0.5" />
<cc2:GradientElement Color="59, 161, 197" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<LabelAppearance Dimensions-Margins="0px, 0px, 0px, 0px" Dimensions-Paddings="0px, 0px, 0px, 0px">
<Shadow Blur="5" />
</LabelAppearance>
<PointMark>
<Shadow Blur="5" />
</PointMark>
<TextAppearance TextProperties-Color="Black" TextProperties-Font="Verdana, 7pt">
</TextAppearance>
<Border Color=""></Border>
<Shadow Blur="5" />
</Appearance>
</cc2:ChartSeries>
</Series>
</telerik:RadChart>
Server Side Code
rdChart.DataSource = dtLoad;
rdChart.PlotArea.Appearance.Dimensions.Margins.Left = Telerik.Charting.Styles.Unit.Percentage(10);
rdChart.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(40);
rdChart.PlotArea.Appearance.Dimensions.Margins.Right = Telerik.Charting.Styles.Unit.Percentage(2);
rdChart.PlotArea.XAxis.Appearance.MajorGridLines.Visible = false;
rdChart.PlotArea.YAxis.Appearance.MajorGridLines.Visible = true;
rdChart.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.None;
rdChart.PlotArea.XAxis.Appearance.CustomFormat = "F";
rdChart.PlotArea.YAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.General;
rdChart.PlotArea.YAxis.AxisMode = ChartYAxisMode.Extended;
rdChart.PlotArea.YAxis.AxisLabel.Visible = true;
rdChart.PlotArea.XAxis.AxisLabel.Visible = true;
rdChart.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Green;
rdChart.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Green;
rdChart.PlotArea.YAxis.AxisLabel.TextBlock.Text = "Units";
rdChart.PlotArea.XAxis.AxisLabel.TextBlock.Text = "Utility Programs";
rdChart.Series[0].Clear();
rdChart.Series[0].DataYColumn = "UnitsProjected";
rdChart.Series[0].PlotArea.XAxis.DataLabelsColumn = "ProgCode";
ChartSeriesCollection chartSeriesCollection = rdChart.Series;
rdChart.Series[1].Clear();
rdChart.Series[1].DataYColumn = "UnitsScheduled";
rdChart.Series[1].PlotArea.XAxis.DataLabelsColumn = "ProgCode";
rdChart.Series[2].Clear();
rdChart.Series[2].DataYColumn = "UnitsActual";
rdChart.Series[2].PlotArea.XAxis.DataLabelsColumn = "ProgCode";
rdChart.DataBind();
Please suggest me how i can improve the performance of rad chart. I have attached the final chart sample image.
See the code details
<telerik:RadChart ID="rdChart" runat="server" Width="1132px"
Skin="Vista" OnDataBound="rdChart_DataBound" Height="1000px" OnItemDataBound="rdChart_ItemDataBound"
SeriesOrientation="Horizontal"
HttpHandlerUrl="ChartImage.axd" >
<PlotArea>
<XAxis>
<Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">
<MajorGridLines Width="0" Color="196, 196, 196"></MajorGridLines>
<TextAppearance TextProperties-Color="89, 89, 89">
</TextAppearance>
</Appearance>
<AxisLabel>
<Appearance Dimensions-Paddings="1px, 1px, 10%, 1px" RotationAngle="270">
</Appearance>
<TextBlock>
<Appearance TextProperties-Color="51, 51, 51">
</Appearance>
</TextBlock>
</AxisLabel>
</XAxis>
<YAxis MaxValue="60" MinValue="-100" Step="20">
<Appearance Color="134, 134, 134" MinorTick-Color="196, 196, 196" MajorTick-Color="196, 196, 196">
<MajorGridLines Color="196, 196, 196"></MajorGridLines>
<MinorGridLines Color="196, 196, 196" Width="0"></MinorGridLines>
<TextAppearance TextProperties-Color="89, 89, 89">
</TextAppearance>
</Appearance>
<AxisLabel>
<Appearance RotationAngle="0">
</Appearance>
<TextBlock>
<Appearance TextProperties-Color="220, 158, 119">
</Appearance>
</TextBlock>
</AxisLabel>
</YAxis>
<YAxis2>
<AxisLabel>
<Appearance RotationAngle="0">
</Appearance>
</AxisLabel>
</YAxis2>
<Appearance Dimensions-Margins="70px, 20px, 30px, 70px" Dimensions-AutoSize="False"
Dimensions-Height="900px" Dimensions-Width="1000px" Position-AlignedPosition="Center">
<FillStyle MainColor="Transparent" SecondColor="Transparent">
</FillStyle>
<Border Color="WhiteSmoke" />
<Shadow Blur="5" />
</Appearance>
</PlotArea>
<Appearance Corners="Rectangle, Rectangle, Rectangle, Rectangle, 7"
ImageQuality="Default">
<FillStyle FillType="ComplexGradient">
<FillSettings>
<ComplexGradient>
<cc2:GradientElement Color="243, 253, 255" />
<cc2:GradientElement Color="White" Position="0.5" />
<cc2:GradientElement Color="243, 253, 255" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<Border Color="212, 221, 222" Width="0" />
<Shadow Blur="5" />
</Appearance>
<ClientSettings EnableZoom="False" />
<ChartTitle Visible="False">
<Appearance Dimensions-Margins="3%, 1px, 1px, 6%" Visible="False">
<FillStyle MainColor="">
</FillStyle>
<Shadow Blur="5" />
</Appearance>
<TextBlock Text="Units Projection Program By Program">
<Appearance TextProperties-Color="86, 88, 89" TextProperties-Font="Verdana, 22px">
</Appearance>
</TextBlock>
</ChartTitle>
<Legend>
<Appearance GroupNameFormat="#VALUE" Dimensions-Margins="15px, 1%, 10%, 1px" Overflow="Row"
Position-AlignedPosition="Top">
<ItemTextAppearance TextProperties-Color="86, 88, 89">
</ItemTextAppearance>
<ItemMarkerAppearance Figure="Rectangle">
</ItemMarkerAppearance>
<FillStyle MainColor="">
</FillStyle>
<Border Color="" />
<Shadow Blur="5" />
</Appearance>
<TextBlock>
<Appearance Position-AlignedPosition="Top" TextProperties-Color="86, 88, 89">
</Appearance>
</TextBlock>
</Legend>
<Series>
<cc2:ChartSeries Name="UnitsProjected">
<Appearance Border-Color="223, 170, 43" Shadow-Blur="5" Shadow-Distance="3">
<FillStyle MainColor="#A5A2FF" SecondColor="#8C86CE">
<FillSettings GradientMode="Vertical">
<ComplexGradient>
<cc2:GradientElement Color="213, 247, 255" />
<cc2:GradientElement Color="193, 239, 252" Position="0.5" />
<cc2:GradientElement Color="157, 217, 238" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<LabelAppearance Dimensions-Margins="0px, 0px, 0px, 0px" Dimensions-Paddings="0px, 0px, 0px, 0px"
Position-AlignedPosition="Center" CompositionType="RowImageText">
<Shadow Blur="5" />
</LabelAppearance>
<PointMark>
<Shadow Blur="5" />
</PointMark>
<TextAppearance TextProperties-Color="Black" TextProperties-Font="Verdana, 7pt"
Position-AlignedPosition="None" Dimensions-Margins="0px, 0px, 0px, 0px"
Dimensions-Paddings="0px, 0px, 0px, 0px">
<FillStyle>
<FillSettings ImageFlip="FlipX">
</FillSettings>
</FillStyle>
</TextAppearance>
<Border Color=""></Border>
<Shadow Blur="5" />
</Appearance>
</cc2:ChartSeries>
<cc2:ChartSeries Name="UnitScheduled">
<Appearance Border-Color="223, 170, 43" Shadow-Blur="5" Shadow-Distance="3">
<FillStyle MainColor="#A54D73" SecondColor="#8C4563">
<FillSettings GradientMode="Vertical">
<ComplexGradient>
<cc2:GradientElement Color="218, 254, 122" />
<cc2:GradientElement Color="198, 244, 80" Position="0.5" />
<cc2:GradientElement Color="153, 205, 46" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<LabelAppearance Dimensions-Margins="0px, 0px, 0px, 0px" Dimensions-Paddings="0px, 0px, 0px, 0px">
<Shadow Blur="5" />
</LabelAppearance>
<PointMark>
<Shadow Blur="5" />
</PointMark>
<TextAppearance TextProperties-Color="Black" TextProperties-Font="Verdana, 7pt">
</TextAppearance>
<Border Color=""></Border>
<Shadow Blur="5" />
</Appearance>
</cc2:ChartSeries>
<cc2:ChartSeries Name="UnitsActual">
<Appearance Border-Color="223, 170, 43" Shadow-Blur="5" Shadow-Distance="3">
<FillStyle MainColor="#297929" SecondColor="#297929">
<FillSettings GradientMode="Vertical">
<ComplexGradient>
<cc2:GradientElement Color="136, 221, 246" />
<cc2:GradientElement Color="97, 203, 234" Position="0.5" />
<cc2:GradientElement Color="59, 161, 197" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<LabelAppearance Dimensions-Margins="0px, 0px, 0px, 0px" Dimensions-Paddings="0px, 0px, 0px, 0px">
<Shadow Blur="5" />
</LabelAppearance>
<PointMark>
<Shadow Blur="5" />
</PointMark>
<TextAppearance TextProperties-Color="Black" TextProperties-Font="Verdana, 7pt">
</TextAppearance>
<Border Color=""></Border>
<Shadow Blur="5" />
</Appearance>
</cc2:ChartSeries>
</Series>
</telerik:RadChart>
Server Side Code
rdChart.DataSource = dtLoad;
rdChart.PlotArea.Appearance.Dimensions.Margins.Left = Telerik.Charting.Styles.Unit.Percentage(10);
rdChart.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(40);
rdChart.PlotArea.Appearance.Dimensions.Margins.Right = Telerik.Charting.Styles.Unit.Percentage(2);
rdChart.PlotArea.XAxis.Appearance.MajorGridLines.Visible = false;
rdChart.PlotArea.YAxis.Appearance.MajorGridLines.Visible = true;
rdChart.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.None;
rdChart.PlotArea.XAxis.Appearance.CustomFormat = "F";
rdChart.PlotArea.YAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.General;
rdChart.PlotArea.YAxis.AxisMode = ChartYAxisMode.Extended;
rdChart.PlotArea.YAxis.AxisLabel.Visible = true;
rdChart.PlotArea.XAxis.AxisLabel.Visible = true;
rdChart.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Green;
rdChart.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Green;
rdChart.PlotArea.YAxis.AxisLabel.TextBlock.Text = "Units";
rdChart.PlotArea.XAxis.AxisLabel.TextBlock.Text = "Utility Programs";
rdChart.Series[0].Clear();
rdChart.Series[0].DataYColumn = "UnitsProjected";
rdChart.Series[0].PlotArea.XAxis.DataLabelsColumn = "ProgCode";
ChartSeriesCollection chartSeriesCollection = rdChart.Series;
rdChart.Series[1].Clear();
rdChart.Series[1].DataYColumn = "UnitsScheduled";
rdChart.Series[1].PlotArea.XAxis.DataLabelsColumn = "ProgCode";
rdChart.Series[2].Clear();
rdChart.Series[2].DataYColumn = "UnitsActual";
rdChart.Series[2].PlotArea.XAxis.DataLabelsColumn = "ProgCode";
rdChart.DataBind();
Please suggest me how i can improve the performance of rad chart. I have attached the final chart sample image.
0
Accepted
Hi Mike,
Thank you for elaborating on this.
We reviewed the attached source code and we would suggest you to try to reduce the Shadow.Blur values (currently set to 5 on multiple elements in your code) or remove the Shadow settings altogether in order to improve the rendering speed of your application.
Hope this helps.
All the best,
Freddie
the Telerik team
Thank you for elaborating on this.
We reviewed the attached source code and we would suggest you to try to reduce the Shadow.Blur values (currently set to 5 on multiple elements in your code) or remove the Shadow settings altogether in order to improve the rendering speed of your application.
Hope this helps.
All the best,
Freddie
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
Mike Treat
Top achievements
Rank 1
answered on 08 Jul 2010, 09:57 AM
Hey..
Its worked. Now page is loading in 15s. Thanks.
Its worked. Now page is loading in 15s. Thanks.