This is a migrated thread and some comments may be shown as answers.

Use RADChart for static disk space usage graphic?

5 Answers 59 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Andy Byrne
Top achievements
Rank 1
Andy Byrne asked on 13 Apr 2011, 10:27 PM
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

5 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 18 Apr 2011, 01:13 PM
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.

0
Andy Byrne
Top achievements
Rank 1
answered on 20 Apr 2011, 02:34 PM
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
0
Andy Byrne
Top achievements
Rank 1
answered on 20 Apr 2011, 07:19 PM
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">
0
Accepted
Ves
Telerik team
answered on 26 Apr 2011, 08:13 AM
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.

0
Andy Byrne
Top achievements
Rank 1
answered on 26 Apr 2011, 02:33 PM
Thank you kindly for the help and the detailed response.  This is working nicely now.
Tags
Chart (Obsolete)
Asked by
Andy Byrne
Top achievements
Rank 1
Answers by
Ves
Telerik team
Andy Byrne
Top achievements
Rank 1
Share this question
or