score:2

Accepted answer

event.preventdefault() was missing at form submit:

the reason why your chart does not appear is because the event.preventdefault() statement was missing in your form-submit. hence, your form was sending an http request (the default action) instead of executing your code.

i edited your code:

  1. added event.preventdefault() at form submit
  2. declared variables outside functions in order to avoid re-declaring repeatedly
  3. eliminated the async functionality, as fetch() is a promise (works like an async callback already, waiting for response from server)
  4. re-aranged order:
    first call datatograph() at form submit (with fetch() for getting the data)
    then, when fetch()-api returned the data (async), call graphit()
  5. re-assign the data to your chart (x- and y-axis data) and top label and then update() the chart
  6. adapted code for final version of chart.js v3.5.1 for improved performance (v3.x not compatible with v2.x):
  7. load initial data for italy with datatograph()

run code snippet and enter a country ('italy', 'germany', ....)
(case-sensitive: first letter has to be capital letter)

// define all variables here outside functions
// in order to avoid re-assigning multiple times
let xs = [];
let ys = [];
let dataset = {};

dataset.xs = xs;
dataset.ys = ys;

let country = "italy";

let today = new date();
let dd = string(today.getdate()).padstart(2, '0');
let mm = string(today.getmonth() + 1).padstart(2, '0'); //january is 0!
let yyyy = today.getfullyear();
today = yyyy + '-' + mm + '-' + dd;

const delayinmilliseconds = 100000;

const ctx = document.getelementbyid('mychart').getcontext('2d');

const mychart = new chart(ctx, {
    type: 'line',
    data: {
        labels: dataset.xs,
        datasets: [{
            label: `covid 19 confirmed cases in ${country}`,
            data: dataset.ys,
            backgroundcolor: ['rgba(255, 99, 132, 0.2)'],
            bordercolor: ['rgba(255, 99, 132, 1)'],
            borderwidth: 1,
            fill: false,
        }]
    },
    options: {
        responsive: true,
        maintainaspectratio: false,
        scales: {
            yaxes: { // <-- axis is not array '[{' anymore, now object '{'
                scalelabel: {
                    display: true,
                    labelstring: 'confirmed cases'
                }
            },
            xaxes: { // <-- axis is not array '[{' anymore, now object '{'
                scalelabel: {
                    display: true,
                    labelstring: 'date'
                }
            }
        }
    }
});

// load initial data for italy
document.getelementbyid('country').value = country;
datatograph();

// here goes your event-listener with function as argument;
document.getelementbyid('country_form').addeventlistener('submit', datatograph);

function datatograph(event) {
  if (event) event.preventdefault(); // <-- this was missing
  
  country = document.getelementbyid('country').value;
  // console.log("test 1", country);
  
  // give feedback to user that data is loading in background
  mychart.data.datasets[0].label =  `loading ... ${country}`;
  mychart.update();

  // set all variables to empty again:
  xs = [];
  ys = [];
  dataset = {};
  dataset.xs = xs;
  dataset.ys = ys;

  // fetch() is a promise, i.e. it is like an async callback already,
  // hence no need to call async again.
  fetch(`https://webhooks.mongodb-stitch.com/api/client/v2.0/app/covid-19-qppza/service/rest-api/incoming_webhook/countries_summary?country=${country}&min_date=2020-04-22&max_date=${today}`)
    .then(response => response.json())
    .then(days => {
        days.foreach(day => {
            ys.push(day.confirmed);
            xs.push(day.date);
        });
        dataset.xs = xs;
        dataset.ys = ys;
        // console.log("xs", xs);
        // console.log("ys", ys);
        // console.log(`https://webhooks.mongodb-stitch.com/api/client/v2.0/app/covid-19-qppza/service/rest-api/incoming_webhook/countries_summary?country=${country}&min_date=2020-04-22&max_date=${today}`);
        // console.log(dataset);
        
        // now you can graph it
        graphit();
    })
    //return { xs, ys };
};


function graphit() {
    document.getelementbyid('mychart').style.display = "block";
    // const dataset = datatograph();

    // console.log("dataset.xs", dataset.xs);
    // console.log("dataset.ys", dataset.ys);

    // re-assign the datasets again (x- and y-axis)
    mychart.data.labels = dataset.xs;
    mychart.data.datasets[0].data = dataset.ys;
    mychart.data.datasets[0].label =  `covid 19 confirmed cases in ${country}`;
    // now update your chart
    mychart.update();
};
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.3.0/chart.min.js"></script> -->

  <!-- get the latest version of chart.js, now at v3.5.1 -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <div id="banner">
    <div id="banner_details">
      <h2>codata</h2>
    </div>
  </div>

 <div id="one_line">
   <div id="main_title">
     <h1>covid-19 data</h1>
   </div>

   <div id="user_query_data">
     <form id="country_form">
       <input type="text" placeholder="country" id="country">
       <input type="submit" value="search">
     </form>
   </div>
 </div>

 <div id="confirmed_graph">
   <canvas id="mychart" height="500" width="300"></canvas>
 </div>

final note:
you might consider to add the x: { type: 'time' ... functionality to your chart, which would present the x-asis labels (dates) better. see my answer chart.js time series for more details.

by the way: nice api - i like it 👍

and welcome to stackoverflow


Related Query

More Query from same tag