Google chart

Le résultat

En pratique

Import des librairies

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        

Préparation des données et création du graphe

    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        $.ajax({
            url: "https://raw.githubusercontent.com/IFB-ElixirFr/comparison_JS_graphics_libraries/main/data/compileDataGapminder.json",
            dataType: "json",
            success: function (jsonData) {
                var data = new google.visualization.DataTable();
        
                data.addColumn('string', 'Country');
                data.addColumn('number', 'Income');
                data.addColumn('number', 'Live expectancy');
                data.addColumn('string', 'Region');
                data.addColumn('number', 'Population');
                
                for (var i = 0; i < jsonData.length; i++) {
                    data.addRow([jsonData[i].country, jsonData[i].income_2021, jsonData[i].live_expectancy_2021, 
                    jsonData[i].six_regions, jsonData[i].pop_total_2021]);
                }

                var options = {
                    title: 'World health chart (2021)',
                    hAxis: {title: 'Income'},
                    vAxis: {title: 'Life Expectancy'},
                    bubble: {textStyle: {fontSize: 11}}
                };

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

Quelques liens

• Page officielle
• La doc