jqPlot meter gauge label formatting

Question

I'm trying to make a gauge chart with jqPlot and having some trouble formatting the tick labels. Is it possible to override the labels?

I'm wanting the labels to be prepended with a currency symbol and for thousand separating commas to be added and although I've found some examples which work with other chart types, they don't have any affect on the meter type. Does anyone know how to do this?

Is it also possible to make the meter show more minor tick marks? When I set my own tick positions it shows fewer minor ticks.

I'm getting the values from server side and this is Salesforce so if anything looks a little unusual, such as getting values using {! } formatting, that's all it is.

<apex:page showHeader="true" sidebar="true" controller="TargetsDashCtrl">
    <!--[if lt IE 9]><apex:includeScript value="{!URLFOR($Resource.jqPlot, '/dist/excanvas.js')}"  /><![endif]-->
    <apex:includeScript value="{!URLFOR($Resource.jqPlot, '/dist/jquery.min.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.jqPlot, '/dist/jquery.jqplot.min.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.jqPlot, '/dist/plugins/jqplot.meterGaugeRenderer.js')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqPlot, '/dist/jquery.jqplot.css')}"  />

    <style>
        .jqplot-title{
            font-size:16px;
        }

        .jqplot-meterGauge-tick, .jqplot-meterGauge-label {
            color: #999;
            font-size: 14px;
        }

    </style>

    <div id="chartdiv" style="height:300px;width:500px; "></div>

    <script>
        $j = jQuery.noConflict();
        $j(document).ready(function(){

            plot = $j.jqplot('chartdiv',[[{!data.actual}]],{
                title: '{!data.title}',
                seriesDefaults: {
                    renderer: $j.jqplot.MeterGaugeRenderer,
                    rendererOptions: {
                        min: 0,
                        max: {!data.target},
                        label: '{!data.actual} - values in \'000 USD',
                        labelPosition: 'bottom',
                        labelHeightAdjust: -5,
                        ticks: [0, {!data.x25pct},{!data.x75pct},{!data.target}],
                        intervals:[{!data.x25pct},{!data.x75pct},{!data.target}],
                        intervalColors:['#C25454', '#C2C254', '#54C254'],
                        ringColor: '#363636',
                        tickColor: '#363636',
                        ringWidth: 6
                    }
                }
            });
        });
    </script>

</apex:page>

Thanks Steve

score 1 · Answer 1 · answered Apr 29 '16 at 10:07

1

Try to use simple CSS:

<style type="text/css">
  .jqplot-meterGauge-label {
     color: #000000;
     margin-top: 5px;
  }
</style>

answered Apr 29 '16 at 10:07

Gianluca Demarinis

1,964
2
15
21

Hey could you please point me to the documentation page where I can find all these css class. – Kishor Prakash May 05 '16 at 08:55
I don't have any doc.. I just try and with Google Chrome Inspect I looked the class/ID of the element. – Gianluca Demarinis May 05 '16 at 14:28
OK. Thanks very much. – Kishor Prakash May 09 '16 at 05:10

score 0 · Answer 2 · answered Feb 26 '18 at 11:26

Even if this question is a bit old, it showed me the way to the solution of numberMinorTicks. This numberMinorTicks is not changeable by rendererOptions array or something as it gets computed inside plugins/jqplot.meterGaugeRenderer.js

My solution is to change the file and to make that param work like other 'passable' params as well. Check the code for this.numberMinorTicks = getnmt(this.tickPositions, this.tickInterval, this.tickFactor); and replace it with something like

this.numberMinorTicks = (this.numberMinorTicks) ? this.numberMinorTicks : getnmt(this.tickPositions, this.tickInterval, this.tickFactor);

That way it will still work when nothing is passed and as well as when you pass something. Passing is done like

var plot0 = $.jqplot(passed_php_arrChartIDs, passed_value_arr, {
    seriesDefaults: {
        renderer: $.jqplot.MeterGaugeRenderer,
        rendererOptions: {
            numberMinorTicks:4
        }
    }
});

I did NOT post any lines and explicit coding instructions as the plugin looks different for every available version.

jqPlot meter gauge label formatting

2 Answers2