Amazing Gauge height

John commented on Oct 8, 2023

I can't find how to configure canvas height in gauge.. I made this

	"cssStyle"=>array(
		"card"=>"height:100px;",

but i get what the image below shows...

Also:

A. How does threshold (on indicator) work? With the way you describe:

"indicator"=>array( "threshold"=>50,)

i can not show the little indicator

B. How can i add a label with the value above the arrow (below the title or instead of title) ?

C. cssStyle for Title does not work based on this article > https://www.koolreport.com/docs/amazing/gaugecard/

John commented on Oct 9, 2023

I think that the ratio of the widget has to do with the canvas problem.. if the widget become square looks better... but not fine... it still has problems.

Sebastian Morales commented on Oct 9, 2023

To answer your multiple questions:

1 . Css style's height changes Amazing card's wrapper div height but doesns't change its drawing height. If you want to change the real drawing height, just limit its parent div's column width like this, the real height will be changed accordingly:

    <div class="row">
        <div class="col-md-3"> <!-- change this div's class to col-md-2, col-md-4, col-md-6, etc to see card's height changed -->
        <?php
        \koolreport\amazing\GaugeCard::create(array(

2 . There's no indicator mark in the card, indicator threshold is a value that changes the card from negative color to positive one.

3 . You can set the title's text to be the card's value. I think there's no option to show card's value just above the card's hand.

4 . Yes, GaugeCard's title css style doesn't work, I can confirm now it's a bug. We will fix this in the next version of Amazing package. For the time being you can set the title's style directly like this:

            <style>
                krwidget[widget-name="MyGaugeCard"] .card-title {
                    color: green;
                }
            </style>
            <?php
            \koolreport\amazing\GaugeCard::create(array(
                "name" => "MyGaugeCard",
                ...
            ));

John commented on Oct 9, 2023

Thanks. When i put the <style> paragraph (and whenever i put an empty line above the <?php ) it throws an error 500. Console also says: Uncaught ReferenceError KoolReport is not defined at ...

Sebastian Morales commented on Oct 10, 2023

I'm not sure about the server's 500 general error, but you can put the style tag below the card php code as well:

<?php
    GaugeCard::create(...);
?>
<style>
    ...
</style>

John commented on Oct 10, 2023

Thanks. I think that what i mentioned above, occurs only for Dashboard. I made a test yesterday and it didn't happen on simple pages (i added a line above php's open and/or put the style there). I'll test this new that you propose today and update you.

John commented on Oct 10, 2023

It worked ok! I made changes on gaugejs-wrap element, thanks!

John commented on Oct 10, 2023

Unfortunately style code creates a problem to another widget on this dashboard.. I have an actionRowSelect function, just like your Product By Line example on KPI Dashboard/Products demo. Error is shown when i click on the chart. I'll quit the gauge and i'll use simple card instead... I'll wait for ApexCharts that i saw that it includes a gauge.

KoolReport's Forum

Amazing Gauge height #3167

Build Your Excellent Data Report