Click here to Skip to main content
15,614,766 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi all,

Kindly i have a page and in the page i have two pie charts, (i'm using Jqplot pie chart)
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
Posted
Updated 22-Mar-12 0:58am
v3

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"
 
Share this answer
 
another way:

CSS
According to the jqPlot options page (http://www.jqplot.com/docs/files/jqPlotOptions-txt.html) 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',    // *Color 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' }
}
);
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900