Bubble chart change X label values from a value in JSON response dynamically

Question

I have a bubble chart using Chart.JS and getting my values dynamically from the database. The plotting of the data works absolutely fine, however I am trying to make a few formatting tweaks to the chart.

I want to change the X values to show the category (it is in my JSON output) on the horizontal axis rather than the i value. The JSON output contains category which is a string but I cant seem to do x: bubbleDatas[i].category?

The output currently shows on my x axis: 0,1,2,3,4,5 but i want it so show the value category from my JSON response which is in bubbleDatas?

data e.g.: { x: 0, y: 60, r: 10 }, { x: 1, y: 20, r: 10 }, { x: 2, y: 40, r: 10 }...

In my JSON response ajax request my X values i want it to be text: e.g. 01_First, 02_Second

   $(function () {

    var bubbleData = [];
    var xAxisLabels;
    $.ajax({
        type: "POST",
        async: false,
        url: "ExecView.aspx/ReturnData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var bubbleDatas = data.d;
           bubbleData = new Array(bubbleDatas.length);
            console.log(bubbleDatas);

            for (i = 0; i < bubbleDatas.length; i++) {

                if (bubbleDatas[i].score >= 60) {
                    rgbcolour = "#008000";
                }
                else if (bubbleDatas[i].score >= 50 && bubbleDatas[i].score < 60) {
                    rgbcolour = "#FFA500";
                }
                else {
                    rgbcolour = "#FF6347";
                }

                bubbleData[i] = { **x: i,** y: bubbleDatas[i].score, r: bubbleDatas[i].radius, backgroundcolor: rgbcolour };

                console.log(bubbleData[i]);

            }



        }
    });



    var popData = {
        datasets: [{
            label: "Test",
            data: bubbleData
        }]
    };

    var bubbleOptions = {
        responsive: true,
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function (t, d) {
                        return d.datasets[t.datasetIndex].label +
                            ': (Category:' + t.xLabel + ', Score:' + t.yLabel + ')';
                    }
                }
        },
        scales: {
            yAxes: [{
                ticks: {
                    // Include a % sign in the ticks
                    callback: function (value, index, values) {
                        return value + '%';
                    }
                }
            }]
        }




    };

    var ctx5 = document.getElementById("bubble_chart").getContext("2d");
    new Chart(ctx5, { type: 'bubble', data: popData, options: bubbleOptions });
});

Bubble chart change X label values from a value in JSON response dynamically

Answers (1)

Related Questions