CanvasJS

Le résultat

En pratique

Import des librairies

    <script src="https://canvasjs.com/assets/script/canvasjs.min.js">    
        

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

    $.ajax({
        url: "https://raw.githubusercontent.com/IFB-ElixirFr/comparison_JS_graphics_libraries/main/data/compileDataGapminder.json",
        dataType: "json",
        success: function (jsonData) {
            const regions = ["East asia pacific", "Europe central asia", 
                "America", "Middle east north africa", "South asia", "Sub saharan africa"];
                
            var series = [];
            var renameObject = [];
            var temp, color;
            for (const element of regions) {
                temp = jsonData.filter(function(s) {
                    return s.six_regions === element
                });

                renameObject = [];
                for (var i = 0; i < temp.length; i++) {
                    renameObject.push({
                        x:   temp[i].income_2021,
                        y: temp[i].live_expectancy_2021,
                        z: temp[i].pop_total_2021,
                        name: temp[i].country,
                        region: element
                    });
                }

                series.push({
                    type: "bubble",
                    showInLegend: true,
                    legendText: element,
                    legendMarkerType: "circle",
                    toolTipContent: "{name}
Life Exp: {y} yrs
 Income: {x}
 Population: {z}
Region: {region}",
                    dataPoints: renameObject
                });
            }

            var chart = new CanvasJS.Chart("chart_div", {
                animationEnabled: true,
                title:{
                    text: "World health chart (2021)"
                },
                axisX: {
                    title:"Income"
                },
                axisY: {
                    title:"Life Expectancy (in Years)"
                },
                legend:{
                    horizontalAlign: "left"
                },
                data: series
            });
            chart.render();
        }
    })           
        

Quelques liens

• Page officielle
• La doc