Size of div/chart in pdf export

Thomas commented on Oct 19, 2020

I would like to have a fullpage chart in the pdf export. I would like to use cm, so I am flexibel with the dpi.

Unfortunately the size of the div or in the chart as a height property I have to type in more as the actual size of the pdf. How do I size the elements in the pdf export correctly?

KoolReport commented on Oct 19, 2020

For the width of chart, you can use "width"=>"100%", however the height could be hard to use 100%. Luckily the width and height of pdf is fixed ( for example A4 size) so you can make some incremental change to the width and height of the chart until you satisfy with the width and height of the chart on pdf.

Thomas commented on Oct 20, 2020

I've tried that already but the percent value doesn't work at all in the export.

<?php
        \koolreport\chartjs\ColumnChart::create(array(
            "title"=>"Vergleich",
            "dataSource"=>$count_no_answers_object->sort(array("title"=>"asc"))->toArray(),
            "columns"=>array(
                'title',
                "no_answers" => array(
                    "label" =>  'Keine Antwort',
                    "decimals" => '0',
                    "type"=>"number",
                    "config"=>array(
                        )
                ),      
            ),
            "width"=>"100%",
        ));
        ?>

Thomas commented on Oct 20, 2020

The format is set to A4 and 72 dpi. So the total width is 842px but I have to set the width to 1300px to scale it full page. Something is not right there. Is there an error in my code or what can I do?

David Winterburn commented on Oct 21, 2020

Hi Thomas,

Would you please post the full html and php code of your pdf view? Thanks!

Thomas commented on Oct 21, 2020

Hi David, here is the code on which I am trying to produce a basic styling for my reports.

<?php

    use \koolreport\chartjs\ColumnChart;

    $category_amount = array(
        array("category"=>"Books","sale"=>32000,"cost"=>20000,"profit"=>12000),
        array("category"=>"Accessories","sale"=>43000,"cost"=>36000,"profit"=>7000),
        array("category"=>"Phones","sale"=>54000,"cost"=>39000,"profit"=>15000),
        array("category"=>"Movies","sale"=>23000,"cost"=>18000,"profit"=>5000),
        array("category"=>"Others","sale"=>12000,"cost"=>6000,"profit"=>6000),
    );
?>
<html>
<body>
    <h1>ColumnChart</h1>
    <?php
    ColumnChart::create(array(
        "title"=>"Sale Report",
        "dataSource"=>$category_amount,
        "columns"=>array(
            "category",
            "sale"=>array("label"=>"Sale","type"=>"number","prefix"=>"$"),
            "cost"=>array("label"=>"Cost","type"=>"number","prefix"=>"$"),
            "profit"=>array("label"=>"Profit","type"=>"number","prefix"=>"$"),
        ),
        "width"=>"100%",
    ));
    ?>

</body>
</html>

David Winterburn commented on Oct 21, 2020

Please try this css in your pdf view

<body style="width: 21cm">

Let us know the result. Thanks!

Thomas commented on Oct 23, 2020

Thank you David. That worked.

Just a small addition in case somebody uses it - To use the height property, you have to set the aspect ratio to false in options:

"options"=>array(
                "maintainAspectRatio"=> false,
)

KoolReport commented on Oct 24, 2020

Awesome addition, Thomas!

KoolReport's Forum

Size of div/chart in pdf export #1671

Build Your Excellent Data Report