CODEWITHSUNDEEP
jqplot
Aniruddh Ambarkar
Aniruddh Ambarkar

Reputation: 1030

jQplot gauge meter setting canvas color transparent

I am using jQplot gauge meter.

I want to set the background of the gauge as transparent. By default it is set to white(background-color).

Please help me with this.

Upvotes: 0

Views: 1563

Answers (2)

schmerdy - Sonos
schmerdy - Sonos

Reputation: 151

I had the same problem and with your hint of editing jqplot gauge meter js, I actually found an easy way. When you create the Gauge, just pass in a grid with transparent background - this worked for me:

   fuelMeter = $.jqplot('fuel_level',[s3],{
       grid: {
           background: "transparent"
       },
       seriesDefaults: {
           renderer: $.jqplot.MeterGaugeRenderer,
           rendererOptions: {
               label: 'Fuel %',
               // ...
           }
       }
   });

Upvotes: 4

Michael Kuehne
Michael Kuehne

Reputation: 1

Not sure whether it works with the gauge meter, but for the jqPlot PieChart I defined a rgba color scheme for the grid background, with fallback in case a browser does not support rgba, see below. That works on Mozilla and IE 8, at least.

Late answer, but hopefully still helps someone. 

function createChartOptions() {
    var optionsObj = {seriesColors : [ 'green', 'purple', 'yellow' ],
        grid : {
            drawBorder : false,
            drawGridlines : false,
            background : 'rgb(255, 255, 255)',  /* fallback */
            background : 'rgba(255, 255, 255, 0)',
            shadow : false, 
        },
        seriesDefaults : {
            // Make this a pie chart.
            renderer : jQuery.jqplot.PieRenderer,
            rendererOptions : {
                showDataLabels : false,
                startAngle : -90,
                shadow : false, 
            }
        }, 
    }
    return optionsObj;
}

Upvotes: 0

Related Questions