How to pass data from php to chart.js

Question

I have a PHP array with this content:

[{"label":"Baden-Wuerttemberg","year":"1998","ins":"243812"}...] (34 entries).

Now I want to plot a chart with Chart.js in JS, but I don't know how to get the values for Labels and dataset.

This is what I have tried:

var jsArray = <?php echo json_encode($jsonArray); ?>;

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "My First Chart in CanvasJS"
        },
        type: 'line',
        data: {
            datasets: jsArray
        },

    });
    chart.render();
}

I want to plot on the x axis the year Jahr and on the y axis the total number ins.

Have you tried : JSON.parse('<?=$jsonArray;?>? - The example you provided, is already json encoded, just pass it to js. When you ask a question about an error ALWAYS include the error log. Add error_reporting(E_ALL); ini_set('display_errors', 1); at the top of your php script, what does it return? — Pedro Lobito
– Pedro Lobito, Commented May 29, 2017 at 21:04
nothing mate, still an empty screen. I tried it with JSON.parse('<?=$jsonArray;?> and the error reporting. — Eronimo44
– Eronimo44, Commented May 29, 2017 at 21:11

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

json_encode function returns json encoded string but in the chart.js you would need json object. You just need to parse the string to object in javascript part like this:

var jsArray = JSON.parse('<?php echo json_encode($jsonArray); ?>');

That should work!

Update

According to Chart.js documentation, each single object in dataPoints can have following properties:

{
    "label": "string, will appear if hovered the bar",
    "x": 10, // must be a number
    "y": 20 // must be a number
}

So you need to convert your data to have above format, something like this:

$formattedData = [];
foreach( $jsonArray as $data ) {
    $formattedData[] = [
        "label" => $data->Bundesland,
        "x"     => (int) $data->label,
        "y"     => (int) $data->sum
    ];
}

Then finally use the $formattedData like this:

var jsArray = JSON.parse('<?php echo json_encode($formattedData); ?>');

There is no other problem in js part, only problem was the format of data.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 29, 2017 at 20:52

leninhasda

1,76012 silver badges21 bronze badges

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

7 Comments

Eronimo44 Over a year ago

Dont work, i get an empty screen. Here ist my code: (paste.ofcode.org/P2GULiw4WGAQHt2D8fkmx6)

leninhasda Over a year ago

You have a typo type: type, value should be a string. Here is a working example: jsfiddle.net/7vgLmkoc/3

Eronimo44 Over a year ago

i changed it to line but still empty screen. I have in my array 3 values as u can see in my post.

leninhasda Over a year ago

What is the type of your $jsonArray variable?

Eronimo44 Over a year ago

its an json object or not?

|

Collectives™ on Stack Overflow

How to pass data from php to chart.js

1 Answer 1

Update

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related