Barchart taking time to load

[Mike Treat]

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

[Mike Treat]

Hi,

 Can anybody help to improve the loading time for  Radbarchart

[Giuseppe]

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

[Mike Treat]

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.

[Giuseppe]

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

[Mike Treat]

Hey..

  Its worked. Now page is loading in 15s. Thanks.