Question

I’m using jQuery’s ajax calls to create a chart, from the Dojo toolkit, based on their choice of a drop-down menu. The problem is that instead of replacing the chart, it just pushes it down and shows the next chart above it. If I switch the chart with text, it will replace the text correctly.

$('#listID').on('change',function()
{
    var input = $(this).attr("value");
    $.post("helper.php", { input: input, username: username }, function(data){
        $('#chart').html(data.chart);
    }, "json");
});
<div id="chart"></div>
<div id="chartOne" style="width: 400px; height: 240px; "></div>

Chart being inserted:

<script>
require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/StackedAreas", "dojox/charting/themes/Wetland" , "dojo/ready"],
  function(Chart, Default, StackedAreas, Wetland, ready){
    ready(function(){
      var c = new Chart("chartOne");
  c.addPlot("default", {type: StackedAreas, tension:3})
    .addAxis("x", {fixLower: "major", fixUpper: "major"})
    .addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0})
    .setTheme(Wetland)
    .addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4])
    .addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2])
    .addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2])
    .render();
    });
});
</script>

Answer 1

This is happening because you are rendering the script tag (to #chart) and the script tag is rendering to a second location (#chartOne), the second location is never being cleared.