Create a bar chart in dojo with the series values to be taken from the users via the textboxes

Question

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="makeCharts();" 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

score 1 · Answer 1 · answered Apr 14 '11 at 08:48

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.

Create a bar chart in dojo with the series values to be taken from the users via the textboxes

1 Answers1