javascript - ユーザーが指定した日付範囲の後に JSON オブジェクトを更新する

Question

ユーザーが選択した日付範囲に基づいて、一連のグラフを動的に更新しようとしています。私は morris.js を使用して、JSON ファイルを介してデータを提供するチャートを作成しています。私がやりたいことは、最初に過去 7 日間分のデータをグラフに表示し、ユーザーが日付範囲を変更した場合、ユーザーの要求ごとにグラフを更新することです。

これが私のチャート要素です:

<div id="morrisline" style="height: 250px;"></div>

私のチャートはすべて、別の charts.js ファイルに含まれています。

Morris.Bar({
                element: 'barchart',
                axes: true,
                data: Object.keys(json.bar).map(function(key) {return json.bar[key]}),
                xkey: 'x',
                ykeys: ['a', 'b']
            });

JSON の "bar" 要素のサンプルを次に示します。現在の日付の書式設定が理想的だとは思いません。私はフォーマットを変更するためのコントロールを持っているので、私は提案を受け入れています.:

{
    "bar1": {
        "x": "1/1/2014",
        "a": "9",
        "b": "6"
    },
    "bar2": {
        "x": "1/2/2014",
        "a": "5",
        "b": "7"
    },
    "bar3": {
        "x": "1/3/2014",
        "a": "8",
        "b": "9"
    },
    "bar4": {
        "x": "1/4/2014",
        "a": "7",
        "b": "9"
    }
}

daterange コールバックは次のとおりです。コールバックが発生した後、チャートのデータ要素を正確に更新する方法がわかりません。

$(document).ready(function() {var cb = function(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

編集: JSON データを取得するための呼び出しは次のとおりです。

(function ($, window, undefined) {
    "use strict";
    $(document).ready(function ($) {
        $.getJSON( "js/data.json", function( json ) {
        //console.log(Object.keys(json.line).map(function(key) {return json.line[key]}));

        if (typeof Morris != 'undefined') {

            //Bar chart
           Morris.Bar({
                element: 'barchart',
                axes: true,
                data: Object.keys(json.bar).map(function(key) {return json.bar[key]}),
                resize: true,
                xkey: 'x',
                ykeys: ['a', 'b']
            });
        }      
    });
    });
})(jQuery, window);