Background color for Jqplot pie chart

Question

Kindly i have a page and in the page i have two pie charts, i want to display different background color for the 2 charts but it is embeded in the css file! is there any option to use any color?? or to make it transparent? my code:

 PieTimer[index] = jQuery.jqplot(PieTimerId,

 TimerValuesArray,
 {
 seriesDefaults: {

 shadow: false,

 seriesColors: ["#13e837", "#6e869b"],

 renderer: jQuery.jqplot.PieRenderer,

 rendererOptions: {

 highlightMouseOver: false,

 diameter: 40,

 padding: 0,

 showDataLabels: false,

startAngle: 270,
sliceMargin: 0,

shadowOffset: 0,

shadowAlpha: 0,


shadowDepth: 0,

 drawBorder: false,

 shadow: false,

 borderWidth: 0

 }

 },

 legend: { show: false, location: 'w'}

 }

 );

i'm wondering if i can set a property (ex: backgroundcolor ...) when drawing the chart? 10x

score 23 · Accepted Answer · edited Sep 25 '12 at 22:19

According to the jqPlot options page you have a option called grid where you can set all the grid parameters, one of this parameters is background color.

grid: {
    drawGridLines: true,        // wether to draw lines across the grid or not.
    gridLineColor: '#cccccc',   // *Color of the grid lines.
    background: '#fffdf6',      // CSS color spec for background color of grid.
    borderColor: '#999999',     // CSS color spec for border around grid.
    borderWidth: 2.0,           // pixel width of border around grid.
    shadow: true,               // draw a shadow for grid.
    shadowAngle: 45,            // angle of the shadow.  Clockwise from x axis.
    shadowOffset: 1.5,          // offset from the line of the shadow.
    shadowWidth: 3,             // width of the stroke for the shadow.
    shadowDepth: 3,             // Number of strokes to make when drawing shadow.
                                // Each stroke offset by shadowOffset from the last.
    shadowAlpha: 0.07,          // Opacity of the shadow
    renderer: $.jqplot.CanvasGridRenderer,  // renderer to use to draw the grid.
    rendererOptions: {}         // options to pass to the renderer.  Note, the default
                                // CanvasGridRenderer takes no additional options.
},

An example of usage is:

var plot1 = jQuery.jqplot ('chart1', [data], 
{ 
    seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.PieRenderer
    },
grid: {
    drawGridLines: true,        // wether to draw lines across the grid or not.
        gridLineColor: '#cccccc',   // CSS color spec of the grid lines.
        background: '#ffff66',      // CSS color spec for background color of grid.
        borderColor: '#999999',     // CSS color spec for border around grid.
        borderWidth: 2.0,           // pixel width of border around grid.
        shadow: true,               // draw a shadow for grid.
        shadowAngle: 45,            // angle of the shadow.  Clockwise from x axis.
        shadowOffset: 1.5,          // offset from the line of the shadow.
        shadowWidth: 3,             // width of the stroke for the shadow.
        shadowDepth: 3
}, 
  legend: { show:true, location: 'e' }
}
);

I hope it can help you!

that is the solution, thanks a lot. i did it in another way, and here if the background is an image it works fine: for all who are interested i changed in the js file: jquery.jqplot.min.js the following old: this.background = "#fffdf6" new: this.background = "transparent" may be if we put tranparent in the example Santiago provided, it also work! thanks again — HGK, Mar 22 '12 at 14:27
Modifying the distributed .js file does not lend itself to good maintainability. I strongly suggest not following that path. — Eric J., Apr 28 '12 at 03:18

Background color for Jqplot pie chart

1 Answers1