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
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!