geochart.js

/**
 * Fonction pour transformer le nom d'une region
 * dans un objet JavaScript que Google Charts comprend.
 */
function formatter_region(region) {
    const codes = {
        "Ile-de-France": 'FR-IDF',
        "Auvergne-Rhône-Alpes": 'FR-ARA',
        "Grand Est": 'FR-GES',
        "Occitanie": 'FR-OCC',
        "Nouvelle-Aquitaine": 'FR-NAQ',
        "Hauts-de-France": 'FR-HDF',
        "Normandie": 'FR-NOR',
        "Provence Alpes Côte d'Azur": 'FR-PAC',
        "Bretagne": 'FR-BRE',
        "Bourgogne-Franche-Comté": 'FR-BFC',
        "Pays de la Loire": 'FR-PDL',
        "Centre-Val de Loire": 'FR-CVL',
        "La Réunion": 'FR-974',
        "Corse": 'FR-20R',
        "Guadeloupe": 'FR-971',
        "Guyane": 'FR-973',
        "Polynésie française": 'FR-PF',
        "Martinique": 'FR-972',
    }
    return {v: codes[region], f: region}
}


const httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = () => {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
            const response = JSON.parse(httpRequest.responseText)
            google.charts.load("current", { "packages": ["geochart"], "language": "fr" })
            google.charts.setOnLoadCallback(function() {
                drawChart(response)
            })
        } else {
            console.log("Erreur de connexion au serveur !")
        }
    }
}
httpRequest.open('POST', 'include/php/data.php', true)
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
const query = 'SELECT region_etab_aff, count(*) AS count FROM parcoursup WHERE fili = "BUT" GROUP BY region_etab_aff ORDER BY count DESC'
httpRequest.send(`query=${encodeURIComponent(query)}`) // 4. Envoi de la requête


/**
 * Fonction qui fait un geochart avec les régions de la France
 */
function drawChart(result) {
    let data = new google.visualization.DataTable()
    data.addColumn("string", "Région")
    data.addColumn("number", "Nombre des BUT")
    let dataArray = []
    for (const item of result) {
        dataArray.push([formatter_region(item.region_etab_aff), item.count])
    }
    data.addRows(dataArray)

    let options = {
        width: 600,
        height: 500,
        displayMode: 'regions',
        region: 'FR',
        resolution: 'provinces',
        geochartVersion: 11,
    }

    let chart = new google.visualization.GeoChart(document.getElementById("geochart_div"))
    chart.draw(data, options)
}