Morris.js and datepicker dynamic charts

Question

I hope you'll be able to help me a little since I'm no jquerymaster. I'm trying to display a chart which updates based on the values passed on by datepicker.

My datepicker function looks like this:

var now3 = new Date();
now3.addDays(-4);
var now4 = new Date()
$('#widgetCalendar').DatePicker({
    flat: true,
    format: 'd-m-Y',
    date: [new Date(now3), new Date(now4)],
    calendars: 3,
    mode: 'range',
    starts: 1,
    onChange: function(formated) {
        $('#widgetField span').get(0).innerHTML = formated.join(' ÷ ');
        $('#test').get(0).innerHTML = 'http://localhost:8888/indkrydsning/app/house/stats_json/' + formated.join('/');
    }
});
var state = false;
$('#widgetField>a').bind('click', function(){
    $('#widgetCalendar').stop().animate({height: state ? 0 : $('#widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
    state = !state;
    return false;
});
$('#widgetCalendar div.datepicker').css(); 

And my chart looks like this:

var json = (function () {
            var json = null;
            $.ajax({
                'async': false,
                'global': false,
                'url': 'http://localhost:8888/indkrydsning/app/house/stats_json/',
                'dataType': "json",
                'success': function (data) {
                    json = data;
                }
            });
            return json;
        })();

        new Morris.Line({
            // ID of the element in which to draw the chart.
            element: 'myfirstchart',


            // Chart data records -- each entry in this array corresponds to a point on
            // the chart.
            data: json,
            // The name of the data record attribute that contains x-values.
            xkey: 'date',
            // A list of names of data record attributes that contain y-values.
            ykeys: ['value'],
            // Labels for the ykeys -- will be displayed when you hover over the
            // chart.
            labels: ['Antal']
        });

I know i can load a new json file based on the onChange function in the datepicker function but want to instead replace the old chart so the new one doesn't can appended.

I hope my question is clear and understandable.

Answer 1

as version i have done with morris chart, the function

var _chart = new Morris.Line({
    element: 'myfirstchart',
    data: json,
    xkey: 'date',
    ykeys: ['value'],
    labels: ['Antal']
});

and _chart.setData(_data); still make appended chart tested in Chrome. I suggest your HTML markup is cleared using html('') function. Example:

<div id="morris-chart-area" style="width: 300px"></div>

cleared with this function

$('#morris-chart-area').html('');

on the onChange function. Example

$('dropdownid').on('change',function(){
$('#morris-chart-area').html('');
     //TO DO YOUR MORRIS GENERATED FUNCTION ...
});

hope this helps.