creating dojo charts dynamically

Question

Hi I need to create dojo charts in such a manner that they take their series values from certain input boxes and the chart changes automatically.So with this concept I went ahead doing this:-

  var showChart= function(){
   var thevalue=dijit.byId('myvalue').get('value');//gets thevalue from the dijit numbertextbox
   var chart1 = new dojox.charting.Chart2D("showgoals");
   chart1.addPlot("default", {type: "Lines"});
   chart1.addAxis("x");
   chart1.addAxis("y", {vertical: true});
   chart1.addSeries("Series 1", [thevalue, 2, 2, 3, 4, 5, 5, 7]);
   chart1.render();};

Then I call this function whenever the value changes:-

      dojo.connect(dojo.byId('myvalue'), "onchange",showChart);//whenever value changes the showChart function

is called

The html looks like this:-

<div dojoType="dijit.layout.ContentPane" region="center">
           <div id="showgoals" style="width: 250px; height:150px;" class="graph1"></div>

The below is the text box which changes value:-

<input id="myvalue" type="text" dojoType="dijit.form.NumberTextBox" name="myvalue"value="1000000"  required="true"
                           invalidMessage="Only Numbers allowed"/><br/><br/>

What I wanted was that whenever the value in this input box changes, the function showchart gets called and the present plot is automatically changed to show the new values, but what is happening is that I get a new chart totally, which seems quite natural.. Will I have to destroy the old chart and then recreate the new chart , if so please tell me how.

Answer 1

In the showChart function, a new chart is created every time the function is called using new dojox.charting.Chart2D("showgoals"). If you want to update the chart, you can call updateSeries to update data of the series and call render() again to update the chart.

The code may look like below:

var chart1 = null;
var showChart = function() {
  var thevalue=dijit.byId('myvalue').get('value');
  if (!chart1) {
     var chart1 = new dojox.charting.Chart2D("showgoals");
     chart1.addPlot("default", {type: "Lines"});
     chart1.addAxis("x");
     chart1.addAxis("y", {vertical: true});
     chart1.addSeries("Series 1", [thevalue, 2, 2, 3, 4, 5, 5, 7]);
  } 
  else {
     chart1.updateSeries("Series 1", [thevalue, 2, 2, 3, 4, 5, 5, 7]);
  }
  chart1.render();
}