Community
OpenEnergyMonitor

Community

Dashboard Monthly Bar Graph Number Values for each Bar

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

I think @TrystanLea is best placed to answer this.

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

Hello @dlmpryor, thanks @Robert.Wall you should be able to do this with the graph module, if you follow the guide here: https://guide.openenergymonitor.org/setup/daily-kwh/ but select monthly rather than daily it should give you the values you are after.

Thanks @TrystanLea, and @Robert.Wall.
Resolved the Bar Graph Numbers.
Ended up using plugin jquery.flot.barnumbers.enhanced.js located at:
https://github.com/jasonroman/flot-barnumbers-enhanced
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

1 Like