I've made some changes to the Gauge chart

Share RGraph:  

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Graeme Elsworthy on 14th August 2017
Hi Richard,

I've made a few changes to your Gauge chart to separate the valueText font details from the labels font details, and to "fix" a problem I had getting an italic font working again after I switched to 4.62 from 4.55.

The separation of font details was done by creating valueTextFont and valueTextSize options and amending the code that prints this value. I did this to make the value more prominent. The labels font, for me, needed to be rather small and I did not want the value to be in the same small font size. And I wanted the value to be italic, and not the labels - see my next point.

As for my "fix" to get italic working again, I must admit I didn't spend much time researching the solution - I went straight to the code. What I did was mimic the various chart.title.*.bold properties and created chart.title.*.italic, and chart.value.text.italic too.

Below is a diff between your 4.62 code and my code. Hope you can make sense of it.

I have a screenshot of this gauge which I can send to you, and I can also point you to a URL where you can see this gauge and other RGraph charts in use, complete with realtime updates. This is a project I've been working on for a while now, and RGraph has had a big impact on its presentation. Really appreciate the effort you've put into RGraph.

Your documentation doesn't mention the valueTextDecimals option. This is really useful and I would not have found it if I hadn't been poking around in the code.

Cheers,
Graeme.





graeme@pi:/var/www/html/javascript/rgraph/libraries $ diff RGraph.gauge.js RGraph.ArcGauge.js
2c2
< RGraph=window.RGraph||{isRGraph:true};RGraph.Gauge=function(conf)
---
> RGraph=window.RGraph||{isRGraph:true};RGraph.ArcGauge=function(conf)
6c6,24
< this.properties={'chart.angles.start':null,'chart.angles.end':null,'chart.centerx':null,'chart.centery':null,'chart.radius':null,'chart.gutter.left':15,'chart.gutter.right':15,'chart.gutter.top':15,'chart.gutter.bottom':15,'chart.border.width':10,'chart.title.top':'','chart.title.top.font':'Segoe UI, Arial, Verdana, sans-serif','chart.title.top.size':14,'chart.title.top.color':'#333','chart.title.top.bold':false,'chart.title.top.pos':null,'chart.title.bottom':'','chart.title.bottom.font':'Segoe UI, Arial, Verdana, sans-serif','chart.title.bottom.size':14,'chart.title.bottom.color':'#333','chart.title.bottom.bold':false,'chart.title.bottom.pos':null,'chart.text.font':'Segoe UI, Arial, Verdana, sans-serif','chart.text.color':'#666','chart.text.size':12,'chart.text.accessible':true,'chart.text.accessible.overflow':'visible','chart.text.accessible.pointerevents':true,'chart.background.color':'white','chart.background.gradient':false,'chart.scale.decimals':0,'chart.scale.point':'.','chart.scale.thousand':',','chart.units.pre':'','chart.units.post':'','chart.value.text':false,'chart.value.text.y.pos':0.5,'chart.value.text.units.pre':null,'chart.value.text.units.post':null,'chart.value.text.color':'black','chart.value.text.bounding':true,'chart.value.text.bounding.fill':'white','chart.value.text.bounding.stroke':'black','chart.red.start':0.9*this.max,'chart.red.color':'#DC3912','chart.red.width':10,'chart.yellow.color':'#FF9900','chart.yellow.width':10,'chart.green.end':0.7*this.max,'chart.green.color':'rgba(0,0,0,0)','chart.green.width':10,'chart.colors.ranges':null,'chart.needle.size':null,'chart.needle.tail':false,'chart.needle.colors':['#D5604D','red','green','yellow'],'chart.needle.type':'triangle','chart.needle.width':7,'chart.border.outer':'#ccc','chart.border.inner':'#f1f1f1','chart.border.outline':'black','chart.centerpin.color':'blue','chart.centerpin.radius':null,'chart.zoom.background':true,'chart.zoom.action':'zoom','chart.tickmarks.small':25,'chart.tickmarks.small.color':'black','chart.tickmarks.medium':0,'chart.tickmarks.medium.color':'black','chart.tickmarks.big':5,'chart.tickmarks.big.color':'black','chart.labels.count':5,'chart.labels.centered':false,'chart.labels.offset.radius':0,'chart.labels.offset.angle':0,'chart.labels.specific':null,'chart.labels.offsetx':0,'chart.labels.offsety':0,'chart.border.gradient':false,'chart.adjustable':false,'chart.shadow':true,'chart.shadow.color':'gray','chart.shadow.offsetx':0,'chart.shadow.offsety':0,'chart.shadow.blur':15,'chart.clearto':'rgba(0,0,0,0)'}
---
>
> // add chart.title.top.italic, chart.title.bottom.italic, chart.value.text.font, chart.value.text.size, chart.value.text.italic, chart.value.text.bold
> this.properties={'chart.angles.start':null,'chart.angles.end':null,'chart.centerx':null,'chart.centery':null,'chart.radius':null,'chart.gutter.left':15,'chart.gutter.right':15,'chart.gutter.top':15,'chart.gutter.bottom':15,'chart.border.width':10,'chart.title.top':'','chart.title.top.font':'Segoe UI, Arial, Verdana, sans-serif','chart.title.top.size':14,'chart.title.top.color':'#333','chart.title.top.bold':false,'chart.title.top.pos':null,
>
> 'chart.title.top.italic': false,
>
> 'chart.title.bottom':'','chart.title.bottom.font':'Segoe UI, Arial, Verdana, sans-serif','chart.title.bottom.size':14,'chart.title.bottom.color':'#333','chart.title.bottom.bold':false,'chart.title.bottom.pos':null,
>
> 'chart.title.bottom.italic': false,
>
> 'chart.text.font':'Segoe UI, Arial, Verdana, sans-serif','chart.text.color':'#666','chart.text.size':12,'chart.text.accessible':true,'chart.text.accessible.overflow':'visible','chart.text.accessible.pointerevents':true,'chart.background.color':'white','chart.background.gradient':false,'chart.scale.decimals':0,'chart.scale.point':'.','chart.scale.thousand':',','chart.units.pre':'','chart.units.post':'','chart.value.text':false,'chart.value.text.y.pos':0.5,'chart.value.text.units.pre':null,'chart.value.text.units.post':null,'chart.value.text.color':'black','chart.value.text.bounding':true,'chart.value.text.bounding.fill':'white','chart.value.text.bounding.stroke':'black',
>
> 'chart.value.text.font': 'Segoe UI, Arial, Verdana, sans-serif',
> 'chart.value.text.size': 12,
> 'chart.value.text.italic': false,
> 'chart.value.text.bold': false,
>
> 'chart.red.start':0.9*this.max,'chart.red.color':'#DC3912','chart.red.width':10,'chart.yellow.color':'#FF9900','chart.yellow.width':10,'chart.green.end':0.7*this.max,'chart.green.color':'rgba(0,0,0,0)','chart.green.width':10,'chart.colors.ranges':null,'chart.needle.size':null,'chart.needle.tail':false,'chart.needle.colors':['#D5604D','red','green','yellow'],'chart.needle.type':'triangle','chart.needle.width':7,'chart.border.outer':'#ccc','chart.border.inner':'#f1f1f1','chart.border.outline':'black','chart.centerpin.color':'blue','chart.centerpin.radius':null,'chart.zoom.background':true,'chart.zoom.action':'zoom','chart.tickmarks.small':25,'chart.tickmarks.small.color':'black','chart.tickmarks.medium':0,'chart.tickmarks.medium.color':'black','chart.tickmarks.big':5,'chart.tickmarks.big.color':'black','chart.labels.count':5,'chart.labels.centered':false,'chart.labels.offset.radius':0,'chart.labels.offset.angle':0,'chart.labels.specific':null,'chart.labels.offsetx':0,'chart.labels.offsety':0,'chart.border.gradient':false,'chart.adjustable':false,'chart.shadow':true,'chart.shadow.color':'gray','chart.shadow.offsetx':0,'chart.shadow.offsety':0,'chart.shadow.blur':15,'chart.clearto':'rgba(0,0,0,0)'}
>
36a55,56
>
> // Use chart.value.text.font et al
43,47c63,136
< co.fill();if(prop['chart.value.text']){var x=this.centerx;var y=this.centery+(prop['chart.value.text.y.pos']*this.radius);var units_pre=typeof(prop['chart.value.text.units.pre'])=='string'?prop['chart.value.text.units.pre']:prop['chart.units.pre'];var units_post=typeof(prop['chart.value.text.units.post'])=='string'?prop['chart.value.text.units.post']:prop['chart.units.post'];var color=prop['chart.value.text.color'];var bounding=prop['chart.value.text.bounding'];var boundingFill=prop['chart.value.text.bounding.fill'];var boundingStroke=prop['chart.value.text.bounding.stroke'];co.fillStyle=color;RG.text2(this,{'font':font,'size':size+2,'x':x,'y':y,'text':RG.numberFormat(this,this.value.toFixed(prop['chart.value.text.decimals']),units_pre,units_post),'halign':'center','valign':'center','bounding':bounding,'bounding.fill':boundingFill,'bounding.stroke':boundingStroke,'tag':'value.text'});}};this.drawTopTitle=this.DrawTopTitle=function()
< {var x=this.centerx;var y=this.centery-25;if(typeof(prop['chart.title.top.pos'])=='number'){y=this.centery-(this.radius*prop['chart.title.top.pos']);}
< if(prop['chart.title.top']){co.fillStyle=prop['chart.title.top.color'];RG.Text2(this,{'font':prop['chart.title.top.font'],'size':prop['chart.title.top.size'],'x':x,'y':y,'text':String(prop['chart.title.top']),'halign':'center','valign':'bottom','bold':prop['chart.title.top.bold'],'tag':'title.top'});}};this.drawBottomTitle=this.DrawBottomTitle=function()
< {var x=this.centerx;var y=this.centery+this.centerpinRadius+10;if(typeof(prop['chart.title.bottom.pos'])=='number'){y=this.centery+(this.radius*prop['chart.title.bottom.pos']);}
< if(prop['chart.title.bottom']){co.fillStyle=prop['chart.title.bottom.color'];RG.Text2(this,{'font':prop['chart.title.bottom.font'],'size':prop['chart.title.bottom.size'],'x':x,'y':y,'text':String(prop['chart.title.bottom']),'halign':'center','valign':'top','bold':prop['chart.title.bottom.bold'],'tag':'title.bottom'});}};this.drawNeedle=this.DrawNeedle=function(value,color,index)
---
> co.fill();if(prop['chart.value.text']){var x=this.centerx;var y=this.centery+(prop['chart.value.text.y.pos']*this.radius);var units_pre=typeof(prop['chart.value.text.units.pre'])=='string'?prop['chart.value.text.units.pre']:prop['chart.units.pre'];var units_post=typeof(prop['chart.value.text.units.post'])=='string'?prop['chart.value.text.units.post']:prop['chart.units.post'];var color=prop['chart.value.text.color'];var bounding=prop['chart.value.text.bounding'];var boundingFill=prop['chart.value.text.bounding.fill'];var boundingStroke=prop['chart.value.text.bounding.stroke'];
>
> var valueFont = prop['chart.value.text.font'];
> var valueSize = prop['chart.value.text.size'];
> var valueItalic = prop['chart.value.text.italic'];
> var valueBold = prop['chart.value.text.bold'];
>
> co.fillStyle=color;
>
> RG.text2(this, {
> 'font': valueFont,
> 'size': valueSize,
> 'x': x,
> 'y': y,
> 'text': RG.numberFormat(this, this.value.toFixed(prop['chart.value.text.decimals']), units_pre, units_post),
> 'halign': 'center',
> 'valign': 'center',
> 'bounding': bounding,
> 'bounding.fill': boundingFill,
> 'bounding.stroke': boundingStroke,
> 'italic': valueItalic,
> 'bold': valueBold,
> 'tag': 'value.text'
> });
> }};
>
>
> this.drawTopTitle = this.DrawTopTitle = function() {
> var x = this.centerx;
> var y = this.centery - 25;
> if (typeof(prop['chart.title.top.pos']) == 'number') {
> y = this.centery - (this.radius * prop['chart.title.top.pos']);
> }
> if (prop['chart.title.top']) {
> co.fillStyle = prop['chart.title.top.color'];
> RG.Text2(this, {
> 'font': prop['chart.title.top.font'],
> 'size': prop['chart.title.top.size'],
> 'x': x,
> 'y': y,
> 'text': String(prop['chart.title.top']),
> 'halign': 'center',
> 'valign': 'bottom',
> 'italic': prop['chart.title.top.italic'],
> 'bold': prop['chart.title.top.bold'],
> 'tag': 'title.top'
> });
> }
> };
>
> this.drawBottomTitle = this.DrawBottomTitle = function() {
> var x = this.centerx;
> var y = this.centery + this.centerpinRadius + 10;
> if (typeof(prop['chart.title.bottom.pos']) == 'number') {
> y = this.centery + (this.radius * prop['chart.title.bottom.pos']);
> }
> if (prop['chart.title.bottom']) {
> co.fillStyle = prop['chart.title.bottom.color'];
> RG.Text2(this, {
> 'font': prop['chart.title.bottom.font'],
> 'size': prop['chart.title.bottom.size'],
> 'x': x,
> 'y': y,
> 'text': String(prop['chart.title.bottom']),
> 'halign': 'center',
> 'valign': 'top',
> 'italic': prop['chart.title.bottom.italic'],
> 'bold': prop['chart.title.bottom.bold'],
> 'tag': 'title.bottom'
> });
> }
> };
>
> this.drawNeedle=this.DrawNeedle=function(value,color,index)
88c177
< return this;};RG.att(ca);RG.Register(this);if(parseConfObjectForOptions){RG.parseObjectStyleConfig(this,conf.options);}};
\ No newline at end of file
---
> return this;};RG.att(ca);RG.Register(this);if(parseConfObjectForOptions){RG.parseObjectStyleConfig(this,conf.options);}};
graeme@pi:/var/www/html/javascript/rgraph/libraries $
Posted by Richard on 14th August 2017
Hi there,

Thanks, I'll those properties in. So I'm clear - you added these:

valueTextFont
valueTextSize

And documented this:

valueTextDecimals

Did I miss anything else?



Richard
Posted by Graeme Elsworthy on 14th August 2017
Hi Richard,

I added these properties:

valueTextFont
valueTextSize
valueTextItalic
valueTextBold
titleTopItalic
titleBottomItalic

and documented:

valueTextDecimals

Cheers,
Graeme.

Add a reply




« Back to message list