Barchart taking time to load

Thread is closed for posting
6 posts, 1 answers
  1. Mike Treat
    Mike Treat avatar
    19 posts
    Member since:
    Jul 2009

    Posted 30 Jun 2010 Link to this post

    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


  2. Mike Treat
    Mike Treat avatar
    19 posts
    Member since:
    Jul 2009

    Posted 02 Jul 2010 Link to this post

    Hi,

     Can anybody help to improve the loading time for  Radbarchart
  3. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 05 Jul 2010 Link to this post

    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
    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
  4. Mike Treat
    Mike Treat avatar
    19 posts
    Member since:
    Jul 2009

    Posted 05 Jul 2010 Link to this post

    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.






  5. Answer
    Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 07 Jul 2010 Link to this post

    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
    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
  6. Mike Treat
    Mike Treat avatar
    19 posts
    Member since:
    Jul 2009

    Posted 08 Jul 2010 Link to this post

    Hey..

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

Back to Top