Chartmaker As a Widget

Launch the ChartMaker from your own website

HTML below will put the chartmaker on your page so that a user can customize the pie chart on your site. Then when the user clicks make chart, Math Warehouse's ChartMaker will take care of the rest.

<form name="chart" method="post" action="http://chartmaker.mathwarehouse.com/create-pie-chart/the-chart.php?guest=1" >
	<b>Step 1) </b>How Many Sections do you want to make in your Pie Chart?
	<br /> <input type="radio" name="leg" value="side" checked /> Legend on Side <br />
	<input  type="radio" name="leg" value="slice"/> Legend Next to Pie Slice<br />
	<select style="width:250px; color:#330066; border-color:#330066; border-width:1px; border-style:outset; font-weight:bold; margin-top:8px; " onChange="makeBoxes()" name="number" id="number" >
				  <option value="-1"> How Many Sections</option>
				<script type="text/javascript">
						output='';
						for(i=0;i<14;i++)
						{
						output+= "<option value='"+i +  "'>" + i + '</option>';
						}
						document.write(output);
				</script>
	</select> <br />
<span id="boxes"> </span>
<br /> <span style="visibility:hidden;" id="a">
<input type="submit" value="Make Chart" /> </span>
<script type="text/javascript">
	function makeBoxes(){
	htmlVar = '';
	document.getElementById('a').style.visibility='visible';
	add= document.forms.chart.number.value;
	if(add == -1)
		{
		alert('Step 1: Plase Select How  Many Sections You Want in your Pie Chart');
		document.getElementById('number').style.color='#990000';
		document.getElementById('number').style.fontWeight='bold';
		document.getElementById('number').style.borderWidth='3';
		document.getElementById('number').style.borderColor='990000';
		return;
		}
	else
		{
	temp= add;
	htmlVar +="<input type='hidden' name='makeChart' value='makeChart' />";
			for(i = 0; i< temp;i++)
			{
	
			htmlVar += 'Name of Section <input style="padding:2px; margin:2px; color:#330066; border-color:#330066; border-width:1px; border-style:outset; font-weight:bold;" type="text" name="n'+i +'"  /> <br /> Amount<input style="padding:2px; margin:2px; color:#330066; border-color:#330066; border-width:1px; border-style:outset; font-weight:bold;" type="text" name="data'+i +'" onKeyPress="return onlyNumbersAllowed(event, \'chart\', \'data'+i +'\')" /><br />';
			}
		document.getElementById('boxes').innerHTML = htmlVar;	
		}
}

</form>

Widget in an Iframe

Cut and Paste the html in the text area below , The html in the text box below places the ChartMaker in an Iframe

Pie Chart Maker Widget