Opened 7 years ago

Closed 7 years ago

#15005 closed defect (invalid)

[patch][cla] dojox.charting inside layout widgets

Reported by: Martin Repta Owned by: cjolif
Priority: high Milestone: tbd
Component: Charting Version: 1.7.2
Keywords: Cc:
Blocked By: Blocking:

Description

charting api does not work inside layout widgets such as BorderContainer?, TitlePane? etc.

It throws an error into browser console: Error: Invalid negative value for <rect> attribute width="-1"

Here is snippet of html code 

<div style="border: solid black 1px;">
	<div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Pane #1'">I'm pane #1</div>
	<div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Pane #2'">I'm pane #2</div>
	<div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Pane #3', open: false">
		I'm pane #3
		<div id="pieChartThird"></div>
	</div>
</div>

and here snippet of js code: 

require([
	"dojo/ready",
	"gjax/charting/Pie",
	"dojox/charting/Chart2D",
	"dojox/charting/themes/Claro",
	"dijit/TitlePane"
], function(ready, PieChart, Chart2D, theme){
	ready(function(){
		
		var makeDojoChart = function(node){
			(new Chart2D(node)).
			setTheme(theme).
			addPlot("default", {
				type : "Pie",
				radius : 50,
				fontColor : "black",
				labelOffset : "-20"
			}).
			addSeries("January",  [9420, 10126, 9803, 15965, 17290, 13165]).
			resize(200,200);
		};
		makeDojoChart("pieChartThird");
	});
});

This problem is caused by setting width and height of rendered svg node to zero values inside Chart.js/resize method

Patch file is attached.

Attachments (1)

charts.patch​ (680 bytes) - added by Martin Repta 7 years ago.

Download all attachments as: .zip

Change History (4)

Changed 7 years ago by Martin Repta

Attachment: charts.patch​ added

comment:1 Changed 7 years ago by dylan

Component: General → Charting
Owner: set to Eugene Lazutkin
Priority: undecided → high
Summary: dojox.charting inside layout widgets → [patch][cla] dojox.charting inside layout widgets

comment:2 Changed 7 years ago by cjolif

Owner: changed from Eugene Lazutkin to cjolif
Status: new → assigned

comment:3 Changed 7 years ago by cjolif

Resolution: → invalid
Status: assigned → closed

If you want to use charting in widget, please use chart widget. It should work without any need for a fix. See: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>

	<script>
		require([
	"dojo/ready",
	"dojox/charting/plot2d/Pie",
	"dojox/charting/widget/Chart",
	"dojox/charting/themes/Claro",
	"dijit/TitlePane",
	"dijit/registry",
	"dijit/layout/ContentPane"
], function(ready, Pie, Chart2D, theme, TitlePane, registry){
	ready(function(){

		var makeDojoChart = function(){
			registry.byId("pieChartThird").chart.addSeries("January",  [9420, 10126, 9803, 15965, 17290, 13165]);
		};
		makeDojoChart();
	});
});
	</script>
</head>
<body>

<div style="border: solid black 1px;">
	<div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Pane #1'">I'm pane #1</div>
	<div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Pane #2'">I'm pane #2</div>
	<div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Pane #3', open: false">
		I'm in pane #3
		<div id="pieChartThird" data-dojo-type="dojox.charting.widget.Chart" style="width:200px; height:200px"
					theme="dojox.charting.themes.Claro">
		<div class="plot" name="default" type="Pie" radius="60" fontColor="white"></div>
		<div class="series" name="January" array="[]"></div>
		</div>
	</div>
</div>
</body>
</html>
Note: See TracTickets for help on using tickets.