Chart to code html

Hello, i need insert data into a chart with php. When i pass the chart to html this is empty. How i should did it?

thanks

You need to be hosting your site on a php enabled server before you will see anything.

Also you will either need to rename your files to .php rather than .html or set your server up to run php on html pages

Hello Richards, thanks for you response. I thinks i haven´t explained well (i don´t speak english, sorry). I make every thing you say, the problem is in Bootstrap Studio. When I pass a chart to HTML code, I lose all the information it contained so I can’t fill it later with php since I don’t have the structure. I paste below an example of graph transformed into code.

<div class="chart-area"><canvas height="320" style="display: block; width: 572px; height: 320px;" width="572"></canvas></div>

In this code I don’t have x,y values. But in the original chart it did have values inserted. I would like to be able to change those static values to dynamic values with php, but the code comes up empty.

Thank you very much for your time

Here you go:
https://dsc.cloud/Michalbialkowski/chart.zip

JSON in this case requires double quotes. If you format it with single quotes - it won’t work

PHP

<?php
    $data = [
        'January' => 4500,
        'February' => 5300,
        'March' => 6250,
        'April' => 7800,
        'May' => 9800,
        'June' => 15000
    ];
    
    $jsonLabels = [];
    $jsonData = [];
    
    foreach ($data as $key => $item):
        $json_key = '"'.$key.'"';
        $json_item = '"'.$item.'"';
        
        $jsonLabels[] = $json_key;
        $jsonData[] = $json_item;
        
        unset($json_key);
        unset($json_item);
    endforeach;
    
    unset($key);
    unset($item);
    
    $jsonLabels = implode(',', $jsonLabels);
    $jsonData = implode(',', $jsonData);
?>

Canvas

<canvas 
    data-bss-chart='
        {
            "type": "bar",
            "data":{
                "labels":[<?= $jsonLabels ?>],
                "datasets":[
                    {
                        "label":"Revenue",
                        "backgroundColor":"#4e73df",
                        "borderColor":"#4e73df",
                        "data":[<?= $jsonData ?>]
                    }
                ]
            },
            "options":{
                "maintainAspectRatio":true,
                "legend":{
                    "display":false,
                    "labels":{
                        "fontStyle":"normal"
                    }
                },
                "title":{"fontStyle":"bold"},
                "scales":{
                    "xAxes":[
                        {
                            "ticks":{"fontStyle":"normal"}
                        }
                    ],
                    "yAxes":[
                        {
                            "ticks":{"fontStyle":"normal"}
                        }
                    ]
                }
            }
        }
    '
></canvas>

It works as you can see

thanks a lot, I understand you couldn’t do it directly using Bootstrap Studio charts.

Thanks again.

In what sense “directly”?

I design the chart in Bootstrap Studio (colors, sizes, intervals,…). I convert the chart to html and add PHP code to make it dynamic.

When I do “convert to html” it shows blank.

The code you’ve given me works, but Bootstrap Studio isn’t used for its layout.

The code I sent you is the code that Bootstrap Studio exported. I just changed the ‘quot’ entities to double quotes ( " ) and added PHP on top and inside JSON (so, of course, I used Bootstrap Studio for the layout).

The chart starts with javascript and is initialized with the ‘data-bss-chart’ attribute. This is how it works.

Converting chart to HTML inside Bootstrap Studio probably clears all the mechanics or leaves ‘canvas’ blank, because - let me repeat - chart is a javascript module, not an HTML layout module.

Just export the entire project to HTML and change the appropriate things.

There is no guarantee of success if you do it in any other way.

In particular: you can’t use PHP inside Bootstrap Studio, but you probably know that…

Perfect, I did it directly from Bootstrap Studio, that’s why all that code didn’t appear.

Thank you very much.