CORONAVIRUS API

Google Charts Example

The simplest way to build a coronavirus chart

Simply copy-paste a sample of the code below, replace your API key, and you're ready to show impressive charts to your users with powerful coronavirus data behind the scenes.

Don't forget to add your own API key in the code (you will receive it once you sign up for a plan).


Timeline of coronavirus CASES chart for a country

See demo

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        google.charts.load('current', {'packages': ['corechart']});
        //google.charts.setOnLoadCallback(drawChart);
        $(document).ready(function () {
            // Replace the "gb" to a different country in the API url below, such as it, es, de, us, etc.
            // don't forget to add your own API key instead of API_KEY (get it here: https://coronavirusapi.dev/#pricing)
            $.get("https://api.coronavirusapi.dev/countries/gb/30/?key=API_KEY").done(function (chart_data_raw) {

                var chart_data = [['Day', 'Cases']];

                $.each(chart_data_raw, function () {

                        chart_data.push([this.datetime_added, this.cases * 1]);

                    }
                );

                var data = google.visualization.arrayToDataTable(chart_data);

                var options = {
                    title: '',
                    lineWidth: 1,
                    legend: 'none',
                    hAxis: {
                        title: '',
                        showTextEvery: 3,
                        textStyle: {color: 'rgb(135, 160, 177)', fontSize: '10'}
                    },
                    vAxis: {
                        title: 'Coronavirus cases',
                        format: '',
                        textStyle: {color: 'rgb(89, 115, 132)', fontSize: '10'}

                    },
                    series: {
                        0: {
                            areaOpacity: 0.7,
                            color: 'rgb(200, 60, 87)'

                        }
                    },
                    chartArea: {

                        width: '100%',
                        height: '80%',
                        left: 50,
                        top: 15
                    }
                };

                var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                chart.draw(data, options);


            });

        });

    </script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 300px; max-width: 100%;"></div>

</body>
</html>
            


Timeline of coronavirus DEATHS chart for a country

See demo

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        google.charts.load('current', {'packages': ['corechart']});
        //google.charts.setOnLoadCallback(drawChart);
        $(document).ready(function () {
            // Replace the "gb" to a different country in the API url below, such as it, es, de, us, etc.
            // don't forget to add your own API key instead of API_KEY (get it here: https://coronavirusapi.dev/#pricing)
            $.get("https://api.coronavirusapi.dev/countries/gb/30/?key=API_KEY").done(function (chart_data_raw) {

                var chart_data = [['Day', 'Deaths']];

                $.each(chart_data_raw, function () {

                        chart_data.push([this.datetime_added, this.deaths * 1]);

                    }
                );

                var data = google.visualization.arrayToDataTable(chart_data);

                var options = {
                    title: '',
                    lineWidth: 1,
                    legend: 'none',
                    hAxis: {
                        title: '',
                        showTextEvery: 3,
                        textStyle: {color: 'rgb(135, 160, 177)', fontSize: '10'}
                    },
                    vAxis: {
                        title: 'Coronavirus deaths',
                        format: '',
                        textStyle: {color: 'rgb(89, 115, 132)', fontSize: '10'}

                    },
                    series: {
                        0: {
                            areaOpacity: 0.7,
                            color: 'rgb(200, 60, 87)'

                        }
                    },
                    chartArea: {

                        width: '100%',
                        height: '80%',
                        left: 50,
                        top: 15
                    }
                };

                var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                chart.draw(data, options);


            });

        });

    </script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 300px; max-width: 100%;"></div>

</body>
</html>
            


By choosing a plan below, you confirm that you have read, understood and accepted our terms and conditions.