Onclick refresh bar chart with new data javascript

问题:

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() {

        if( typeof (Morris) === 'undefined'){ return; }
        console.log('init_morris_charts');

        if ($('#graph_bar').length){ 
            morbar = Morris.Bar({
              element: 'graph_bar',
              data: [
                <?php echo $tocke; ?>
              ],
              xkey: 'date',
              ykeys: ['marketcap'],
              labels: ['Market cap value USD'],
              barRatio: 0.4,
              barColors: ['#aa8400'],
              xLabelAngle: 0,
              hideHover: 'auto',
              resize: true
            });
        }
    }

Now I would like to set up functionality that every time user click on certain link, new api call is made and with response data I set up new chart. Basically chart needs to refresh and show new data.

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

        // example: http://www.coincap.io/history/365day/BTC
        url = 'http://www.coincap.io/history/365day/'+valuta_short;
        var novetocke = "";
        var novetocke_edit = "";

        $.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] + " }, ";
          }

          novetocke_edit = novetocke.substring(0, novetocke.length-2);

        });
        morbar.setData(novetocke_edit);
    });

Function is called when I press certain link. URL for API si put together correctly. I also create string in format that I think "data" in chart needs it..

Like this:

{ date: '12-08-2016 03:08:56', marketcap: 0 }, { date: '13-08-2016 03:08:20', marketcap: 1029733 }, { date: '14-08-2016 05:08:30', marketcap: 1584452 }, { date: '15-08-2016 05:08:30', marketcap: 2460141 }, { date: '16-08-2016 05:08:31', marketcap: 2393176 }, { date: '17-08-2016 05:08:31', marketcap: 2752283 }, { date: '18-08-2016 05:08:31', marketcap: 2676743 }, { date: '19-08-2016 05:08:31', marketcap: 2268252 }, { date: '20-08-2016 05:08:31', marketcap: 2040360 }, { date: '21-08-2016 05:08:30', marketcap: 1999935 }, { date: '22-08-2016 05:08:31', marketcap: 2082395 }, .. etc

But something doesn't work. In console I see this:

TypeError: d is undefined morris.min.js

Can somebody tell me, where my code isn't correct. Tnx!

回答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);
    });

});

回答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.