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

Pie Chart with Single Value - Percentage

3 Answers 30 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Veteran
Jonathan asked on 31 Mar 2020, 01:55 AM

Hi

How do I create a chart. I want bind a single value / a percentage - like 66%  (.66).

For example disk space remaining. I have Drive object with PercentFree.

When this renders I get a full blue pie chart.  Enclosed is 8 percent

 

 

 <TelerikChart Width="100%" Height="100%" Transitions="false" RenderAs="@RenderingMode.SVG">
            <ChartSeriesItems>
                <ChartSeries Type="ChartSeriesType.Pie"
                             Data="@DriveData"
                             Field="@nameof(Drive.PercentFree)"
                             CategoryField="@nameof(Drive.Name)"
                             ExplodeField="@nameof(Drive.Explode)">
                    <ChartSeriesLabels Visible="true"></ChartSeriesLabels>
                </ChartSeries>
            </ChartSeriesItems>

        <ChartLegend Position="ChartLegendPosition.Right">
        </ChartLegend>
    </TelerikChart>

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 31 Mar 2020, 08:01 AM

Hi Jonathan,

Generally, showing a single value is a job for a gauge not for a chart. The pie chart shows the values as their percentage of 100, so if you want to show one value as percentage of 100 you need to pad the data with another item that tops up the value to 100.

Here follows an example of how something like that can be done with a pie chart. The key points of interest:

  • The data is padded with a second item so you can achieve a pie chart.
  • I show the drive name in the chart title because the categories from the data are shown in the legend, so they would probably both be the same letter.
  • So I hide the legend

<TelerikChart Width="100%" Height="100%" Transitions="false" RenderAs="@RenderingMode.SVG">
    <ChartTitle Text="@TheDriveName"></ChartTitle>
    <ChartLegend Visible="false"></ChartLegend>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Pie"
                     Data="@DriveData"
                     Field="@nameof(Drive.PercentFree)"
                     CategoryField="@nameof(Drive.Name)"
                     ExplodeField="@nameof(Drive.Explode)">
            <ChartSeriesLabels Visible="true" Format="{0}%"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>
</TelerikChart>

@code{
    List<Drive> DriveData { get; set; } = new List<Drive>();
    string TheDriveName { get; set; }
    protected override async Task OnInitializedAsync()
    {
        DriveData.Clear();
        var drive = await GetDriveFreeSpace();
        DriveData.Add(drive);
        var padding = new Drive { Name = DriveData[0].Name, PercentFree = 100 - DriveData[0].PercentFree };
        DriveData.Add(padding);
        TheDriveName = DriveData[0].Name;
    }

    async Task<Drive> GetDriveFreeSpace()
    {
        Drive data = new Drive
        {
            PercentFree = 53,
            Name = "C:"
        };
        return await Task.FromResult(data);
    }

    public class Drive
    {
        public double PercentFree { get; set; }
        public string Name { get; set; }
        public bool Explode { get; set; }
    }
}

Or, you could keep the legend and show Free/Used in the categories, something like this:

<TelerikChart Width="100%" Height="100%" Transitions="false" RenderAs="@RenderingMode.SVG">
    <ChartTitle Text="@TheDriveName"></ChartTitle>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Pie"
                     Data="@DriveData"
                     Field="@nameof(Drive.PercentFree)"
                     CategoryField="@nameof(Drive.Category)"
                     ExplodeField="@nameof(Drive.Explode)">
            <ChartSeriesLabels Visible="true" Format="{0}%"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>
</TelerikChart>

@code{
    List<Drive> DriveData { get; set; } = new List<Drive>();
    string TheDriveName { get; set; }
    protected override async Task OnInitializedAsync()
    {
        DriveData.Clear();
        var drive = await GetDriveFreeSpace();
        DriveData.Add(drive);
        var padding = new Drive { Name = DriveData[0].Name, PercentFree = 100 - DriveData[0].PercentFree, Category = "Used" };
        DriveData.Add(padding);
        TheDriveName = DriveData[0].Name;
    }

    async Task<Drive> GetDriveFreeSpace()
    {
        Drive data = new Drive
        {
            PercentFree = 53,
            Name = "C:",
            Category = "Free"
        };
        return await Task.FromResult(data);
    }

    public class Drive
    {
        public double PercentFree { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public bool Explode { get; set; }
    }
}

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Jonathan
Top achievements
Rank 1
Veteran
answered on 31 Mar 2020, 12:22 PM

thx again!   Awesome

How do I vote for a future Gauge Control?

 

0
Marin Bratanov
Telerik team
answered on 31 Mar 2020, 06:51 PM

Hi Jonathan,

There isn't a request for this yet, so I would encourage you to post a new one for such a component in our Feedback portal through the "Request a Feature" button. Just make sure to select the "make public" checkbox at the final step. This will let you explain your goals, requirements, even perhaps add a sample of what API and functionality you would expect it exposes. You can then Vote for it and Follow it to get updates on status changes. If it gets good traction with the community, we will consider its implementation.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Charts
Asked by
Jonathan
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Jonathan
Top achievements
Rank 1
Veteran
Share this question
or