Chartjs-Chart.js, PHP and radar chart labels

by

0👍

✅

Here’s how you could accomplish that …

let json = [{ "iri_code": "352380801", "iri_pop_txevol": "3.1", "iri_txact": "69.5", "iri_txchom": "9.8" }, { "iri_code": "352380703", "iri_pop_txevol": "23.0", "iri_txact": "15.3", "iri_txchom": "29.8" }];
let label = [];
let data = [];

// generate label and data dynamically
json.forEach(e => {
    label.push(e.iri_code);
    data.push([+e.iri_pop_txevol, +e.iri_txact, +e.iri_txchom]);
});

let ctx = document.querySelector('#canvas').getContext('2d');
let chart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['txevol', 'txact', 'txchom'],
        datasets: [{
            label: label[0],
            data: data[0],
            backgroundColor: 'rgba(0,119,204,0.2)',
            borderColor: 'rgba(0,119,204, 0.5)',
            borderWidth: 1,
            pointBackgroundColor: 'rgba(0, 0, 0, 0.5)'
        }, {
            label: label[1],
            data: data[1],
            backgroundColor: 'rgba(255, 0, 0 ,0.15)',
            borderColor: 'rgba(255, 0, 0 ,0.45)',
            borderWidth: 1,
            pointBackgroundColor: 'rgba(0, 0, 0, 0.5)'
        }]
    },
    options: {
        title: {
            display: true,
            position: "top",
            text: "Radar test",
            fontSize: 14,
            fontColor: "#111"
        },
        legend: {
            display: true,
            position: "bottom"
        },
        scale: {
            pointLabels: {
                fontSize: 11
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Leave a comment