Use RADChart for static disk space usage graphic?

Thread is closed for posting
6 posts, 1 answers
  1. Andy Byrne
    Andy Byrne avatar
    19 posts
    Member since:
    Sep 2009

    Posted 13 Apr 2011 Link to this post

    Hi,

    Is it possible to use the RADChart control to display a graphical representation of disk space used:

    "20.0 MB out of 100.00 MB being used."

    I just want to display a simple static horizontal bar that illustrates the percentage of disk space used without any grid lines or anything.

    Thanks,
    Andy
  2. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 18 Apr 2011 Link to this post

    Hi Andy,

    You can use StackedBar chart for this purpose. Add two ChartSeries with one ChartSeriesItem in each of them.

    Best regards,
    Ves
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Andy Byrne
    Andy Byrne avatar
    19 posts
    Member since:
    Sep 2009

    Posted 20 Apr 2011 Link to this post

    Thanks, this has me moving in the right direction but I have a few issues:

    1) When I attempt to shrink the BackgroundArea and PlotArea to fit the bar being displayed it shrinks the size of the image down to the point that the image is invisible.  I've noticed if I increase the height that the image appears again, but I really just want to display a 300x20 image with 0 padding for the BackgroundArea and PlotArea (I only want to see the bar).

    2) How do I remove the numbers that display on top of the stacked bars?  Sorry if this is an obvious question.  I reviewed some of the documentation and thumbed through the properties but there are so many that I am not seeing how to hide this.

    3) To set these values programatically, will I have to render the chart in the .cs file or is there a simple way to access the ChartSeriesItem from the code behind to adjust the values?

    <telerik:RadChart ID="rcDiskUsage" runat="server" SkinsOverrideStyles="true" Width="300px" Height="20px"
        ChartTitle-Visible="false" Legend-Appearance-Visible="false" PlotArea-Appearance-Dimensions-AutoSize="false"
        PlotArea-Appearance-Dimensions-Margins="0px" PlotArea-Appearance-Dimensions-Height="20px"
        PlotArea-Appearance-Dimensions-Width="300px"
        SeriesOrientation="Horizontal" PlotArea-XAxis-Visible="false" PlotArea-YAxis-Visible="false"
        PlotArea-YAxis2-Visible="false">
        <PlotArea>
            <XAxis MaxValue="100" MinValue="1" Step="1" AutoShrink="false" />
            <YAxis MaxValue="100" MinValue="1" Step="1"  />
        </PlotArea>
        <Series>
            <telerik:ChartSeries Name="Series 1" Type="StackedBar">
                <Appearance>
                    <FillStyle MainColor="Blue" SecondColor="Blue">
                    </FillStyle>
                </Appearance>
                <Items>
                    <telerik:ChartSeriesItem XValue="1" YValue="20" Name="Used Space" />
                </Items>
            </telerik:ChartSeries>
        </Series>
        <Series>
            <telerik:ChartSeries Name="Series 1" Type="StackedBar">
                <Appearance>
                    <FillStyle MainColor="White" SecondColor="White">
                    </FillStyle>
                </Appearance>
                <Items>
                    <telerik:ChartSeriesItem XValue="1" YValue="100" Name="Available Space" />
                </Items>
            </telerik:ChartSeries>
        </Series>
    </telerik:RadChart>

    Thanks,
    Andy
  4. Andy Byrne
    Andy Byrne avatar
    19 posts
    Member since:
    Sep 2009

    Posted 20 Apr 2011 Link to this post

    I figured out the answer to #2 above (still need help on the other questions though).  For anyone else looking at this the labels can be hid as follows:

         <telerik:ChartSeries Name="Series 1" Type="StackedBar" Appearance-LabelAppearance-Visible="false">
  5. Answer
    Ves
    Admin
    Ves avatar
    2926 posts

    Posted 26 Apr 2011 Link to this post

    Hi Andy,

    By default the bar will take 80% of the space available for them, this is why you still do not get "bars only" image. This is controlled by the BarWidthPercent appearance property of the ChartSeries. You can set it to 100 in order to get the bar stretched to occupy the entire available space. You have already set the PlotArea margins to zero, so this should be the last step.

    Onto #3:  You can leave the entire markup and only change the values of the ChartSeriesItem.YValue in code-behind like this:

    rcDiskUsage.Series[0][0].YValue = 20;

    In addition, I would like to note, that the MinValue, MaxValue and Step properties of the chart axes will take effect only if AutoScale is set to false. However, you will not show any axes, so you can rely on the chart's automatic calculation, so you can remove the axes form the PlotArea tag, and subsequently the entire PlotArea. I would also like to mention, that with stacked bars the values are summed, so if you need the second bar to go up to 100, you will have to calculate its value, so that the sum of the two bars is 100:

    rcDiskUsage.Series[1][0].YValue = 100 - rcDiskUsage.Series[0][0].YValue;

    Please, find below an updated version of your markup

    <telerik:RadChart ID="rcDiskUsage" runat="server" SkinsOverrideStyles="true" Width="300px"
               BorderWidth="0" Height="20px" ChartTitle-Visible="false" Legend-Appearance-Visible="false"
               PlotArea-Appearance-Border-Width="0" PlotArea-Appearance-Dimensions-Margins="0px"
               SeriesOrientation="Horizontal" PlotArea-XAxis-Visible="false" PlotArea-YAxis-Visible="false"
               PlotArea-YAxis2-Visible="false">
               <Series>
                   <telerik:ChartSeries Name="Series 1" Type="StackedBar">
                       <Appearance BarWidthPercent="100" Border-Width="0">
                           <LabelAppearance Visible="false">
                           </LabelAppearance>
                           <FillStyle MainColor="Blue" SecondColor="Blue">
                           </FillStyle>
                       </Appearance>
                       <Items>
                           <telerik:ChartSeriesItem YValue="20" Name="Used Space" />
                       </Items>
                   </telerik:ChartSeries>
               </Series>
               <Series>
                   <telerik:ChartSeries Name="Series 1" Type="StackedBar">
                       <Appearance BarWidthPercent="100" Border-Width="0">
                           <LabelAppearance Visible="false">
                           </LabelAppearance>
                           <FillStyle MainColor="White" SecondColor="White">
                           </FillStyle>
                       </Appearance>
                       <Items>
                           <telerik:ChartSeriesItem YValue="80" Name="Available Space" />
                       </Items>
                   </telerik:ChartSeries>
               </Series>
           </telerik:RadChart>


    Best regards,
    Ves
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Andy Byrne
    Andy Byrne avatar
    19 posts
    Member since:
    Sep 2009

    Posted 26 Apr 2011 Link to this post

    Thank you kindly for the help and the detailed response.  This is working nicely now.
Back to Top