title: Morris chart appends new data from ajax
body: <p>I have been working on a project and i have to show some order details in a morris chart. The data of chart is in JSON format and is taken as a response from a servlet.</p>
  
  <p>There is an apply button and a to from datepicker, when i press the apply button, JavaScript function parse the data from servlet. It is working correctly. I have placed the chart div in my webpage and i am only loading my JSON data in it.</p>
  
  <p>When I press apply for the first time, the data is loaded and shown in the chart using <b>setData()</b> function provided by morris. As below:</p>
  
  <p><a href="https://i.stack.imgur.com/bitYR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bitYR.png" alt="JSON data from external API"></a></p>
  
  <p>But when I press the apply button for the second time, it appends data to the current chart as below:
  <a href="https://i.stack.imgur.com/sN4d7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sN4d7.png" alt="Appended data"></a></p>
  
  <p>The javascript function for making this possible is as follows:</p>
  
  <pre><code>function parselineData(method,url,id,no,keyx,keyy)
  {   var datefrom=document.getElementById("from"+no).value;
      var dateto=document.getElementById("to"+no).value;
      if(datefrom=="")
      {   document.getElementById("lfrom"+no).style.color="red";
          document.getElementById("lfrom"+no).innerHTML="*From:";
      }
      else
      {   document.getElementById("lfrom"+no).style.color="black";
          document.getElementById("lfrom"+no).innerHTML="From:";
      }
      if(dateto=="")
      {   document.getElementById("lto"+no).style.color="red";
          document.getElementById("lto"+no).innerHTML="*To:";
      }
      else
      {   document.getElementById("lto"+no).style.color="black";
          document.getElementById("lto"+no).innerHTML="To:";
      }
      if(datefrom==""||dateto=="")
      {
      }
      else
      {   var xmlhttp=new XMLHttpRequest();
          var chart=Morris.Line
          ({  element: id,
              data:[{date:"0",orders:"0"}],
              xkey: keyx,
              ykeys: [keyy],
              labels: [keyy],
              smooth: true,
              resize: false
          });
          var data;
          xmlhttp.onreadystatechange=function()
          {   if (xmlhttp.readyState==4&amp;&amp;xmlhttp.status==200)
              {   data=JSON.parse(xmlhttp.responseText);
                  //alert("My Data is" + data.toSource());
                  chart.setData(data);
              }
          }
          xmlhttp.open(method,url+"?from"+no+"="+datefrom+"&amp;to"+no+"="+dateto, true);
          xmlhttp.send();
      }
  }
  </code></pre>
  
  <p>Please help so that I could show data without appending it.</p>