Create a bar chart in dojo with the series values to be taken from the users via the textboxes
I wish to develope an application which allows the user to set the values for the series and also the labels for the axes via input like textboxes below is the code i tried,
<html>
<head>
<title>Chart Demo</title>
<style type="text/css">
@import "../dijit/themes/tundra/tundra.css";
@import "../dojo/resources/dojo.css"
</style>
<SCRIPT type=text/javascript src="dojo/dojo.js" djConfig="isDebug: true"></SCRIPT>
<script type="text/javascript">
//dojo.require("dojo.event.*");
dojo.require("dojo.parser");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dojox.charting.Chart2D");
//dojo.require("dojo.widget.*");
//dojo.require("dojo.widget.Button");
makeCharts = function() {
var val1=dijit.byid('val1').get('value');
var val2=dijit.byid('val2').get('value');
var val3=dijit.byid('val3').get('value');
var val4=dijit.byid('val4').get('value');
var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {type: "Columns", gap: 5});
chart1.addAxis("x",{
labels: [
{value: 0, text: "one"},
{value: 1, text: "two"},
{value: 2, text: "three"},
{value: 3, text: "four"}]}
);
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [val1, val2, val3, val4]);
chart1.render();
};
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.SplitContainer" orientation="horizontal"
sizerWidth="10" activeSizing="true"
style="border: 1px solid #FF00FF; width: 600px; height: 205px;">
<div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="10">
<p><b>Enter the required details for chart</b></p>
<form method="post" id="dataForm" name="dataForm>
<table>
<tr>
<td><label>X-axis</label></td>
<td><input type="text" trim="true" dojoType="dijit.form.TextBox"
value="" name="x" id="tx"/></td>
</tr>
<tr>
<td><label>y-axis</label></td>
<td><input type="text" trim="true" dojoType="dijit.form.TextBox"
value="" name="y" id="ty"/></td>
</tr>
<tr>
<td><label>value1</label></td>
<td><input dojoType="dijit.form.NumberSpinner"
value="0"
smallDelta="1"
constraints="{min:0,max:1000,places:0}"
maxlength="20"
id="val1"></td>
</tr>
<tr>
<td><label>value2</label></td>
<td><input dojoType="dijit.form.NumberSpinner"
value="0"
smallDelta="1"
constraints="{min:0,max:1000,places:0}"
maxlength="20"
id="val2"></td>
</tr>
<tr>
<td><label>value3</label></td>
<td><input dojoType="dijit.form.NumberSpinner"
value="0"
smallDelta="1"
constraints="{min:0,max:1000,places:0}"
maxlength="20"
id="val3"></td>
</tr>
<tr>
<td><label>value4</label></td>
<td><input dojoType="dijit.form.NumberSpinner"
value="0"
smallDelta="1"
constraints="{min:0,max:1000,places:0}"
maxlength="20"
id="val4"></td>
</tr>
<tr>
<td colspan="2">
<input name="Submit" type="button" id="Submit" onclick="ma开发者_如何学JAVAkeCharts();" value="Submit" />
</td>
</tr>
</table>
</form>
</div>
<div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="10" id=simplechart>
</div>
</div>
</body>
</html>
but this code is generating some errors, which i am unable to debug.... Please help
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; MS-RTC LM 8) Timestamp: Thu, 14 Apr 2011 05:51:38 UTC
Message: Object doesn't support this property or method Line: 25 Char: 2 Code: 0 URI: file:///D:/dojo%20new/dojo-release-1.6.0-src/trial1.html
Since you've not formatted your question properly and have left out pretty much all the relevant parts of your HTML, it's difficult to tell, but there are a few things I notice right off the bat:
Here you are missing a quotation mark at the end:
<form method="post" id="dataForm" name="dataForm>
Dijit's byId method uses capital i (dijit.byId(...)), so you need to change these four lines.
var val1=dijit.byid('val1').get('value');
var val2=dijit.byid('val2').get('value');
var val3=dijit.byid('val3').get('value');
var val4=dijit.byid('val4').get('value');
Fix this and see if it works.
加载中,请稍侯......
精彩评论