Skip to content Skip to sidebar Skip to footer

Onclick Refresh Bar Chart With New Data Javascript (morris Chart)

I've set up bar chart. Data for default/when page loads I get via php. This part it is ok and works (I've followed some example that was on the web.) function init_morris_charts()

Solution 1:

This my version..

$('.show_movement_icon').click(function() {
    valuta_short = $(this).attr('id');
    $('#barchart_valuta').text(valuta_short);

    // URL setup
    url = 'http://www.coincap.io/history/365day/'+valuta_short;

    var arr = [];

    $.getJSON(url, function(data) {
        //To get only market cap values.
        var market_cap = data.market_cap;

        for (var i = 0; i < market_cap.length; i++) {
            datum = new Date(market_cap[i][0]).format('d-m-Y h:m:s');

            // Fill array with data
            arr.push({
                date: datum,
                marketcap: market_cap[i][1]
            });
        }

        // Send array to chart for data update
        morbar.setData(arr);
    });

});

Solution 2:

You need to call setData method inside the getJSON function. Your code will be rewritten so:

$('.show_movement_icon').click(function() {
  // ... copy lines from your code ...
  $.getJSON(url, function(data) {
    //To get only market cap values.
    var market_cap = data.market_cap;

    for(var i=0; i < market_cap.length; i++)
    {
        //example: 06-06-2017 07:04:13
        datum = new Date(market_cap[i][0]).format('d-m-Y h:m:s');

        novetocke += "{ date: '" + datum + "', marketcap: " + market_cap[i][1] + " }, ";
    }

    // I changed the following 3 lines
    novetocke_edit = novetocke.substring(0, novetocke.length-2);
    var chartData = JSON.parse(novetocke_edit);
    morbar.setData(chartData);
  });
});

I also replaced your string variable by a JS array (JSON.parse(novetocke_edit)) because I think setData can't use strings and need an object.


Post a Comment for "Onclick Refresh Bar Chart With New Data Javascript (morris Chart)"