Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Pie charts (Read 2339 times)
Anna Malashkina
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 26
Joined: Sep 22nd, 2019
Pie charts
Dec 25th, 2019 at 10:58am
Print Post  
Don't you plan to implement pie charts?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3435
Joined: Oct 19th, 2005
Re: Pie charts
Reply #1 - Dec 26th, 2019 at 9:37am
Print Post  
We already have, but in a separate library -
https://mindfusion.eu/javascript-chart.html

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Anna Malashkina
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 26
Joined: Sep 22nd, 2019
Re: Pie charts
Reply #2 - Dec 27th, 2019 at 9:17am
Print Post  
I would like to have pie charts and ability to add them to nodes in diagram. It would make numeric information on the nodes more visual.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3435
Joined: Oct 19th, 2005
Re: Pie charts
Reply #3 - Dec 30th, 2019 at 8:00am
Print Post  
You could assign an image containing the pie chart to a ShapeNode, or a TableNode's cell. E.g. following code uses our charts library linked above to create the pie image -

Code
Select All
function onNodeCreated(sender, args)
{
	var node = args.getNode();

	var nBounds = node.getBounds ();
	var topLeftCoord = diagram.docToClient(nBounds.topLeft());
	var bottomRightCoord = diagram.docToClient(nBounds.bottomRight());

	var pieChartCanvas = document.createElement('canvas');
	pieChartCanvas.width = bottomRightCoord.x - topLeftCoord.x;
	pieChartCanvas.height = bottomRightCoord.y - topLeftCoord.y;

	document.body.appendChild(pieChartCanvas);
	createPie(pieChartCanvas);
	var pieImageLocation = pieChartCanvas.toDataURL();
	node.setImageLocation(pieImageLocation);
	document.body.removeChild(pieChartCanvas);
}

//draw a pie chart on the provided canvas
function createPie(pieChartCanvas)
{
	var pieChart = new Controls.PieChart(pieChartCanvas);
	pieChart.startAngle = 45;
	pieChart.showLegend = false;
	pieChart.title = "Sales";
	pieChart.titleMargin = new Charting.Margins(0, 10, 0, 0);

	pieChart.chartPadding = 3;

	// create sample data
	var values = new Collections.List([20.00, 30.00, 15.00, 40.00]);
	pieChart.series = new Charting.PieSeries(
		values,
		new Collections.List(["20", "30", "15", "40"]),
		null);

	var brushes = new Collections.List(
	[
		new Drawing.Brush("#0455BF"),
		new Drawing.Brush("#033E8C"),
		new Drawing.Brush("#F24405"),
		new Drawing.Brush("#F21905")
	]);

	var seriesBrushes = new Collections.List();
	seriesBrushes.add(brushes);

	var strokes = new Collections.List(
	[
		new Drawing.Brush("#c0c0c0")
	]);

	var seriesStrokes = new Collections.List();
	seriesStrokes.add(strokes);

	pieChart.plot.seriesStyle = new Charting.PerElementSeriesStyle(seriesBrushes, seriesStrokes);
	pieChart.theme.highlightStroke = new Drawing.Brush("#000063");
	pieChart.theme.dataLabelsFontSize = pieChartCanvas.height/20;
	pieChart.theme.dataLabelsBrush = new Drawing.Brush("#FFFFFF");

	pieChart.draw();
} 



You could replace the createPie function with one using a different library, or draw the chart yourself using Canvas' Context2D API.

You can find the full example on PM page.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint