How to display charts in different modal windows after multiple ajax calls?

Question

I do multiple ajax calls and I want to show a chart inside the modal window after clicking on symbol name. Right now I can see the chart only for the last symbol. For the first symbol the modal window is empty. I understand that with each ajax call the new chart function overrides the previous result and display new chart in last modal window. But how can I still show all previous charts and display new one in the lsat window?

var stocks = [];
window.onload = function() {
var symbols = ['AAPL', 'MSFT', 'FB'];

symbols.forEach( symbol => makeAjaxCall(symbol));
}

function makeAjaxCall(param){
$.ajax({
    type: "GET",
    url: "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=" + param + "&interval=1min&apikey=T6UEJETEQRVGDJS9",
    success: function(result){
        stocks = result;
        getPrices();
    }
});
}

function getPrices() {
var metaData = stocks["Meta Data"],
    timeSeries = stocks["Time Series (1min)"],
    sym = metaData["2. Symbol"];
var mdl1 =  '<div id="chartModal" class="modal fade" role="dialog">' + 
                '<div class="modal-dialog modal-lg" role="content">' + 
                    '<div class="modal-content">' + 
                        '<div class="modal-header">' + 
                            '<h4>',
mdl2 =                      '</h4>' + 
                            '<button type="button1" class="close" data-dismiss="modal">&times;</button>' + 
                        '</div>' + 
                        '<div class="modal-body" id="modalBody">' +  
                            '<div class = "container-canvas">' + 
                                '<canvas class = "line-chart" width = "400" height = "250"></canvas>' + 
                            '</div>' + 
                        '</div>' + 
                    '</div>' + 
                '</div>' +  
            '</div>',

mdl3 = mdl1 + sym + mdl2;
document.getElementById("loadedStocks").innerHTML += '<div class="eachStock"><span><a onclick="showChart()">' + sym + '</a></span></div><div></div>' + mdl3;
var datasetsValues = Object.values(timeSeries),
    datasetsValuesReverse = datasetsValues.reverse();
    highPrice = Object.values(datasetsValuesReverse).map(o => o["4. close"]),
dateKeys = Object.keys(timeSeries),
    datesReverse = dateKeys.reverse();

var ctx = document.getElementById('loadedStocks').querySelectorAll('.line-chart');
var last = ctx[ctx.length - 1];



new Chart(last, {
    type: 'line',
    data: {
        labels: datesReverse,
        datasets: [{
            data: highPrice,
            borderColor: "#FF4500",
            label: "Close",
            fillset: "#FFDAB9"
        }],
        pointStyle: "cross",
    },
    options: {
        title: {
            display: true,
            text: "Stock's close price changes"
        }
    }
});
}
function showChart() {
    $('#chartModal').modal();
 }

My html:

<div id='loadedStocks'></div>

Thanks!

Mikey · Accepted Answer · 2017-12-21T20:14:53.713

The main issue is that you gave the same ID to all your modals.

Below is a revision.

// better to use document.ready() than window.load()
// good idea to wrap jQuery-related code within document.ready()
$(function() {
  // good idea to cache elements that you will re-use
  var loadedStocks = $("#loadedStocks");
  var API = 'https://www.alphavantage.co/query';

  function makeAjaxCall(param) {
    // simplified
    $.getJSON(API, {
      'function': 'TIME_SERIES_INTRADAY',
      'symbol': param,
      'interval': '1min',
      'apikey': 'T6UEJETEQRVGDJS9',
    }, getPrices);
  }

  function getPrices(stocks) {
    var metaData = stocks["Meta Data"],
      timeSeries = stocks["Time Series (1min)"],
      symbol = metaData["2. Symbol"];

    // give a unique id to each modal e.g. chartModal-AAPL
    // in rare cases, use inline style to hide your HTML
    var modal =
      '<div id="chartModal-' + symbol + '" class="modal fade" role="dialog" style="display:none">' +
      '<div class="modal-dialog modal-lg" role="content">' +
      '<div class="modal-content">' +
      '<div class="modal-header">' +
      '<h4>' + symbol + '</h4>' +
      '<button type="button1" class="close" data-dismiss="modal">&times;</button>' +
      '</div>' +
      '<div class="modal-body" id="modalBody">' +
      '<div class="container-canvas">' +
      '<canvas class="line-chart" width="400" height="250"></canvas>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>';

    // use HTML5-data attribute to store the stock value (*)
    loadedStocks.append('<div class="eachStock"><a href="#" data-stock="' + symbol + '">' + symbol + '</a></div>' + modal);

    var datasetsValues = Object.values(timeSeries),
      datasetsValuesReverse = datasetsValues.reverse(),
      highPrice = Object.values(datasetsValuesReverse).map(o => o["4. close"]),
      dateKeys = Object.keys(timeSeries),
      datesReverse = dateKeys.reverse();

    var last = loadedStocks.find('.line-chart').last()[0]; // simplified

    new Chart(last, {
      type: 'line',
      data: {
        labels: datesReverse,
        datasets: [{
          data: highPrice,
          borderColor: "#FF4500",
          label: "Close",
          fillset: "#FFDAB9"
        }],
        pointStyle: "cross",
      },
      options: {
        title: {
          display: true,
          text: "Stock's close price changes"
        }
      }
    });
  }

  // attach a click handler on the dynamically-created link
  $(document).on('click', '.eachStock a[data-stock]', function showChart(e) {
    e.preventDefault();
    // find modal based on this link's stock value (*)
    $('#chartModal-' + this.dataset.stock).modal('show');
  });

  // start!
  ['AAPL', 'MSFT', 'FB'].forEach(symbol => makeAjaxCall(symbol));
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>

<div id="loadedStocks"></div>

(Give the demo a few seconds to load everything. You should probably change your API key afterwards.)

Hi Mikey! THANK YOU so much!!! I've been trying to do it for the last few days and was not able to display all charts. But now it works just the way I wanted. — Olga, Dec 22 '17 at 10:49

How to display charts in different modal windows after multiple ajax calls?

1 Answers1