Asp NET system.web.helpers PIE CHART

Question

0.00/5 (No votes)

See more:

I'm trying to replace MSCHART from my projects with Chart helpers (System.Web.Helpers) but I'm having a lot of difficulties:

1) How can I insert percentage values into a PIE chart?
2) Can I move the chart Value outside pie?

What I have tried:

C#

Chart myChart = new Chart(width: 800, height: 400, themePath: "~/xml/hst_pie_tech.xml",  theme: ChartTheme.Vanilla3D)
           .AddTitle("Volume ")
           .AddSeries("Volume",
                   chartType: "Pie",
                   xValue: dataView, xField: "Technology",
                   yValues: dataView, yFields: "Qty",
                   markerStep: 1

                   );

XML

<?xml version="1.0" encoding="utf-8" ?>
<Chart>
	
	<ChartAreas>

		<ChartArea Name="Default" _Template_="All">
			<AxisY
				LineColor="0, 0, 0"
				TitleFont="{0}, 14pt, style=Bold"
				TitleForeColor="0, 0, 0"
				
				>
				<LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="0, 0, 0" />
			</AxisY>
			
			<AxisX 
				Interval="1"
				TitleFont="{0}, 18pt, GdiCharSet=0"	>
				
				<LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="0, 0, 0" />
			</AxisX>
			
		</ChartArea>

	</ChartAreas>
	
	<Titles>
		<Title _Template_="All" Font="{0}, 14pt, style=Bold" ForeColor="0, 0, 0"></Title>
	</Titles>
		
	<Series>
		<Series 
			Name="Volume" 
			BorderWidth="2" 
			Color="153, 204, 255" 
			BorderColor="164, 164, 164" 
			BorderDashStyle="Solid" 
			ShadowColor="128, 128, 128, 128" 
			ShadowOffset="1" 
			IsValueShownAsLabel="true" 
			Font="{0}, 8pt" 
			BackGradientStyle="TopBottom" 
			BackSecondaryColor="0, 102, 153" 
			LabelForeColor="0, 0, 0"
			
			>
			<SmartLabelStyle Enabled="True" />
		</Series>
	</Series>
	
	<Legends>
		<Legend Alignment="Center" Docking="Left" Name="Technology" Font="{0}, 10pt, style=Italic, GdiCharSet=0">
	</Legend>
	</Legends>

	<BorderSkin PageColor="Control" BackColor="CornflowerBlue" BackSecondaryColor="CornflowerBlue" />
</Chart>

Posted 4-Mar-24 22:26pm

HEARTREAD

Updated 5-Mar-24 0:32am

Pete O'Hanlon

v2

Add a Solution

Comments

Richard Deeming 5-Mar-24 4:33am

Does this SO answer[^] help? It's for a doughnut chart, but based on the property name, it looks like that uses the same properties as the pie chart.

<Series Name="Default" CustomProperties="PieLabelStyle = Outside" Label="Very very long label (#VAL)"></Series>

2 solutions

Solution 1

If you want to use percentages as the numbers, just assign the values to the series. They are just numbers after all. If what you are asking is how do you show the %age as a label, simply use this markup against your ChartArea.

HTML

<AxisY >
  <LabelStyle Format="{0:p}" />
</AxisY>

Posted 5-Mar-24 0:39am

Pete O'Hanlon

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

HEARTREAD · Accepted Answer · 2024-03-06T01:50:00

Solution 2

I tried to apply a mix of the two solutions
It seems to work. Thanks for the quick support

XML

<Series
    ...
    CustomProperties="PieLabelStyle = Outside"
    Label="Qty:#VAL / (#PERCENT)"
    >
    <SmartLabelStyle Enabled="True" />
</Series>

Posted 6-Mar-24 1:50am

HEARTREAD