Dashboard Monthly Bar Graph Number Values for each Bar

Emoncms
1

Using EmonCMS low-write 10.0.2, emonSD-30Oct18.
Trying to get the monthly Totals number values without having to hover-over the individual bar.

In fact, I don’t need the bar graph, numbers alone would be okay. I do need the Month interval, Scale and Delta features, which are all included in the Bar Graph.

If I was to try to modify the bargraph dashboard what file would I be looking for a js, php.cs???

I think the files are located here? var/www/emoncms/Modules/Dashboards

Anyone had experience with this?

Thanks in Advance
image
image

2

I think @TrystanLea is best placed to answer this.

3

Yes, I noticed that TrystanLea wrote the Jquery Javascript.

So far I added a flot plugin called jquery.flot.barlabels.js and I am able to get a number on the bar graphs. Although the number needs formatting, such as rounding and font size.

I am not familiar with javascript so it has been a challenge. Any help is appreciated.
image

4

Hello @dlmpryor, thanks @Robert.Wall you should be able to do this with the graph module, if you follow the guide here: Calculating Daily kWh - Guide | OpenEnergyMonitor but select monthly rather than daily it should give you the values you are after.

5

Thanks @TrystanLea, and @Robert.Wall.
Resolved the Bar Graph Numbers.
Ended up using plugin jquery.flot.barnumbers.enhanced.js located at:
“GitHub - jasonroman/flot-barnumbers-enhanced: Enhanced version of flot-barnumbers plugin with additional options”
Placed the plugin at var/www/emoncms/Lib/flot/
Modified bargraph.php located at var/www/emoncms/Modules/vis/visualiztions with the following code changes
‘’’
// bargraph.php

 function plot()
    {

        if (intervalcode=='y')
            intervalrange=interval*365;
        else if (intervalcode=='m')
            intervalrange=interval*30;
        else
            intervalrange=interval;
   
    var barnumberFormatter = function(value) {
		return '$ ' + Math.round(value);
		
	}
     var barnumberFormatter1 = function(value) {
	return Math.round(value);
		}


        var options = {
            canvas: true,
            bars: { show: true, align: "center", barWidth: 0.75*intervalrange*1000, fill: true},
            xaxis: { mode: "time", timezone: "browser",
            min: view.start, max: view.end, minTickSize: [intervalrange, "second"] },
            //yaxis: { min: 0 },
            grid: {hoverable: true, clickable: true},		
            selection: { mode: "x" },
            touch: { pan: "x", scale: "x" }

        }   
	if (intervalcode=='m' && units=='$')
		$.plot(placeholder, [{data:data,color: plotColour,bars: {numbers: { show: true,font:'11pt Arial', fontColor: '#FF0000', threshold: 0.25, yOffset: 5, xOffset: -32, formatter: barnumberFormatter} }}], options);
	else if (intervalcode=='m')		 
		$.plot(placeholder, [{data:data,color: plotColour,bars: {numbers: { show: true,font:'11pt Arial', fontColor: '#FF0000', threshold: 0.25, yOffset: 5, xOffset: -32, formatter: barnumberFormatter1} }}], options);
	else
		$.plot(placeholder, [{data:data,color: plotColour,bars: {numbers: { show: true,xOffset: -10, formatter: barnumberFormatter1} }}], options);

    }

‘’’
image

image
image624×502 31.7 KB

image

1 Like
6

I used your tutorial and the bargraph value display works fine.
But I ran into a problem that it cut me off the yaxis value.

obr1
obr1624×502 52.7 KB

Can you please advise me how to offset or move the axis?

7

I see now, but never noticed it before because I just looked at the numbers. I will not be able to advise on how to offset, due to other obligations. My apologizes. Hopefully you will be able to figure it out or someone else on the forum can advise.

8

It might be a browser-specific problem. I noticed a similar thing with the Brave browser, but Chromium and Firefox both showed the (not the same as yours) graph as expected.

I noticed in September and reported it in a PM to @TrystanLea

1192×557 114 KB

It doesn’t do it now, so it appears to have been fixed. Who by or when, I didn’t notice.