PHP string data passed to Chart.js not rendering well

Question

I'm trying to work with Chart.js for the first time. I already understand how it works, but I now want to pass my data from php to javascript.

This is what I have:

PHP

//send the string values to javascript
$grade_range_string = mb_substr($grade_range_string, 0, -2);
$percentage_count_string = implode(", ", $percentage_count_array);
//chart colors
$grade_chart_colors_string = "";
$grade_chart_colors_array = grade_chart_colors();
foreach ($grade_chart_colors_array as $color) {
    $grade_chart_colors_string .= "'".$color."'" . ", ";
}
$grade_chart_colors_string = mb_substr($grade_chart_colors_string, 0, -2);

HTML

<span id="grade_range_string" data-value="<?php echo $grade_range_string; ?>"></span>
<span id="percentage_count_string" data-value="<?php echo $percentage_count_string; ?>"></span>
<span id="grade_chart_colors_string" data-value="<?php echo $grade_chart_colors_string; ?>"></span>

<canvas id="broadsheet_piechart"></canvas>

Javascript:

// Pie chart
if ( $('#broadsheet_piechart').length ) {
    var grade_range_string = $('#grade_range_string').attr('data-value');
    var percentage_count_string = $('#percentage_count_string').attr('data-value');
    var grade_chart_colors_string = $('#grade_chart_colors_string').attr('data-value');
    //debug
    console.log(grade_range_string); 
    console.log(percentage_count_string); 
    console.log(grade_chart_colors_string); 

    var ctx = document.getElementById("broadsheet_piechart");
    var data = {
        datasets: [{
            data: [percentage_count_string],
            backgroundColor: [grade_chart_colors_string],
            label: 'My dataset' // for legend
        }],
        labels: [grade_range_string]
    };
    var broadsheet_piechart = new Chart(ctx, {
        data: data,
        type: 'pie',
        options: {
            animation: {
                duration: 0
            }
        }
    });  
}
//debug
console.log(data);

In the console window, the 3 variables grade_range_string, percentage_count_string, grade_chart_colors_string return the data as formatted, but the datasets data variable encloses the data in double quotes like this:

data: ["'Item 1', 'Item 2', 'Item 3', 'Item etc'"]

Same for backgroundColor and labels. This ruins my pie...

Why is that happening, and how do I get rid of the quotes? Is there a better way of achieving this? Thanks.

From memory (haven't done charts.js in a while) you should be able to do: data: <?php echo json_encode($percentage_count_string); ?>, — Second2None
– Second2None, Commented Dec 15, 2018 at 6:42

Kumar · Accepted Answer · 2018-12-15 06:47:02Z

1

In php you can do this

//send the string values to javascript
$grade_range_string = mb_substr($grade_range_string, 0, -2);
$percentage_count_string = implode(", ", $percentage_count_array);
//chart colors
$grade_chart_colors_string = "";
$grade_chart_colors_array = grade_chart_colors();

// New Code
$grade_chart_colors_string = join(",", $grade_chard_colors_array); // will join all the colors with ','
//for eg. $grade_chart_colors_string = "red,blue,yellow" 


$grade_chart_colors_string = mb_substr($grade_chart_colors_string, 0, -2);

In javascript make the string back to an array

var grade_chart_colors_string = $('#grade_chart_colors_string').attr('data-value');
var grade_chart_colors_array = grade_chart_colors_string.split(',');

That should pass it as an array in data. You can do the rest like this

answered Dec 15, 2018 at 6:47

Kumar

3,1262 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Valkay Over a year ago

Will try this now

bachlee89 · Accepted Answer · 2018-12-15 06:50:41Z

0

You should change this:

<?php echo $percentage_count_string; ?>

to:

<?php echo json_encode($percentage_count_string); ?>

It may solve your problem

Cheers

answered Dec 15, 2018 at 6:50

bachlee89

7574 silver badges8 bronze badges

1 Comment

Valkay Over a year ago

returned nothing

Collectives™ on Stack Overflow

PHP string data passed to Chart.js not rendering well

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related