Gauge meter

[jo-ka]

Hello.

I was trying to use google-o-meter-element, as per described here, http://fabrikar.com/forums/index.php?wiki/google-o-meter-element/

I would like to have something like a level of progress report on a list, for example, to have a bar or a guauge, which will display accordingly, between 0 and 100%, the other filed value, for example 70%.

Is there a way to accomplish this?

Thanks in advance.

 

[lousyfool]

If the Google-O-Meter element is what you want to use, you may need a (hidden) calc element to determine the progress value, then point the Google-O-Meter element to it.

While you're at it, and instead of the Google-O-Meter element, you could of course use the calc element to do both, calculating the progress value and returning/displaying it in some graphical way. Most Joomla templates come built on a framework including a progress bar or so (e.g. like Bootstrap) or, if you want something fancier, you could use SVG and CSS (see examples).

 

[jo-ka]

@lousyfool ,

I have a dropdown element where I set the values from 0 to 100%, like this:



So, the list already has an element where the value is stored. And is displayed like this:



So, on this list, there are values as 100, some others as 0, and others that are still null.

But when I set the Google-o-meter, I get this results... I was expecting that 70% was not full and that 50% was on the middle.

I might be doing something wrong!

 

[lousyfool]

From the Wiki at http://fabrikar.com/forums/index.php?wiki/google-o-meter-element/

It works out the minim and maximum values stored for that element, and shows the value of the current record within this range

Since your range is 0% to 70%, for this element your value of 70% is the max = 100% on the gauge. Accordingly, your value of 30% (almost the half of the max 70%) shows in the gauge just below half. And so on.
So, the gauge displays correctly -- as per Wiki. If your records would contain at least one 0% value (which you currently have) and one 100% value (which you don't have), the gauges would/should display as you expect.

 

[troester]

I would use a calc element and return (like the google-o-meter)
<img alt="Google-o-meter" src="https://chart.apis.google.com/chart?chs=200x125&amp;cht=gom&amp;chd=t:{your-watched-element_raw}&amp;chl=some-label&amp;chds=0,100">

or add an override for plugins\fabrik_element\googleometer\layouts\fabrik-element-googleometer-chart.php
and do some string handling to change min/max values of the last
chds=your-data-min,your-data-max
to
chds=0,100

 

[jo-ka]

From the Wiki at http://fabrikar.com/forums/index.php?wiki/google-o-meter-element/


Since your range is 0% to 70%, for this element your value of 70% is the max = 100% on the gauge. Accordingly, your value of 30% (almost the half of the max 70%) shows in the gauge just below half. And so on.
So, the gauge displays correctly -- as per Wiki. If your records would contain at least one 0% value (which you currently have) and one 100% value (which you don't have), the gauges would/should display as you expect.

@lousyfool , at first I've also thought that could be the problem but no. I've tested it before. As I wrote previously, there are values from 0 to 100 on the field, although it wasan't visible on the image. But I've changed the values just to try again, and here's the result...

I have to test @troester suggestion...

 

[troester]

If you inspect the google-o-meters in your browser, what does it show as &ch=t:X (ie, 70 or 100 for the "wrong" ones)?
Does it change if you reload the list (so maybe some caching? Ajafied list?...)

 

[jo-ka]

I would use a calc element and return (like the google-o-meter)
<img alt="Google-o-meter" src="https://chart.apis.google.com/chart?chs=200x125&amp;cht=gom&amp;chd=t:{your-watched-element_raw}&amp;chl=some-label&amp;chds=0,100">

@troester , using this method, it worked like a charm. Thanks. Now I'll check this method to see if I can improve this.

Thanks.

 

[jo-ka]

If you inspect the google-o-meters in your browser, what does it show as &ch=t:X (ie, 70 or 100 for the "wrong" ones)?
Does it change if you reload the list (so maybe some caching? Ajafied list?...)

Althoug it worked as per your suggestion, let me check with the Google-o-meter plugin...

 

[jo-ka]

@troester , here's what happens when inspecting the element, after clear cache and/or even use another browser...

When the field value is 100:

When the field value is 70:


And when it's 0:

It looks like the plugin is not able to find the average value correctly, because is allways dividing by 0,70.

But I can also be doing something wrong...

 

[jo-ka]

While you're at it, and instead of the Google-O-Meter element, you could of course use the calc element to do both, calculating the progress value and returning/displaying it in some graphical way. Most Joomla templates come built on a framework including a progress bar or so (e.g. like Bootstrap) or...

@lousyfool , I've became curious about this suggestion and went to investigate this. So, I've came across this:

https://getbootstrap.com/docs/5.0/components/progress/



So, your suggestion is to create a new class on the custom_css file for this list, or is there a way to use it directly on the element itself, on list view settings?


If so, How would the Cell CSS field be filled in order to a graph bar on the field?

@troester , any suggestion also?

Thanks both. This is becoming very interesting.

 

[lousyfool]

@lousyfool , I've became curious about this suggestion and went to investigate this. So, I've came across this:

https://getbootstrap.com/docs/5.0/components/progress/

So, your suggestion is to create a new class on the custom_css file for this list, or is there a way to use it directly on the element itself, on list view settings?

Nothing to do with the element's CSS cell class as that would only apply to the <td> in the list.

You'd want to return this whole code in the calc element, except you'll have to replace the "25" in this example with a placeholder of the raw value of your progress dropdown:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

However, the code you posted is from Bootstrap 5 (and 4, and maybe 3), so you'd need to have such Bootstrap loaded e.g. with your Joomla template, or you'd need to use other code matching whatever might be included with your template. Or write your own CSS.

 

[jo-ka]

Nothing to do with the element's CSS cell class as that would only apply to the <td> in the list.

You'd want to return this whole code in the calc element, except you'll have to replace the "25" in this example with a placeholder of the raw value of your progress dropdown:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

However, the code you posted is from Bootstrap 5 (and 4, and maybe 3), so you'd need to have such Bootstrap loaded e.g. with your Joomla template, or you'd need to use other code matching whatever might be included with your template. Or write your own CSS.

Perfect @lousyfool .

I'll try this suggestion.

 

[jo-ka]

@troester , your suggestion lead me to this solution. I didn't knew this Google library, so I've investigated a little bit and, I choose not to use the Google-o-meter, but some bar chart...

My calc element is like this:

return '<img alt="Google-o-meter" src="https://chart.apis.google.com/chart?chs=150x60&amp;cht=bhs&amp;chd=t:{your-watched-element_raw}|100&amp;chco=468C00,CFFFBF&amp;chm=N**%,FFFFFF,0,,12,,r:-10:&amp;chxt=x&amp;chds=0,100">';

and here's the result.


Next, I'll try @lousyfool suggestion.

Thanks guys.