I use the excellent jqPlot plugin, and the only function that I did not find in the documentation is "how the colored parts of the background / mesh with multiple colors"
The x-axis units of my plots are dates. I would like to highlight a part of the weekend (only) grid by changing the background grid color, if possible.
Or would anyone have another idea?
thank
CHANGE OF THE FINAL RESPONSE
Based on Boro’s suggestion, I developed a better way to highlight part of the background using the “line” option instead of the “verticalLine” option. The fact is that with "verticalLine" developers must deal with the line width. Thus, it is difficult to get what you need, because the width of the line extends from the center of the line, and not from the border.
The “Line” option allows you to set the start and end points to set the exact part of the background to highlight. The width parameter is still used to display the row as a column, but it extends horizontally rather than vertically.
"lineWidth", . "y" "start" "end" yaxis.
Boro
grid:
{
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc', // Color of the grid lines.
backgroundColor: "#eee",
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
},
canvasOverlay: {
show: true,
objects:
[
{
line:
{
start : [new Date('2012-01-12').getTime(),20],
stop : [new Date('2012-01-13').getTime(),20],
lineWidth: 1000,
color: 'rgba(255, 0, 0,0.45)',
shadow: false,
lineCap : 'butt'
}
},
{
line:
{
start : [new Date('2012-01-13').getTime(),20],
stop : [new Date('2012-01-14').getTime(),20],
lineWidth: 1000,
color: 'rgba(255, 0, 0,0.45)',
shadow: false,
lineCap : 'butt'
}
}
]
}
