Just in case somebody looks for a solution.
I have overwritten the hook to manually draw lines to X-Axis.
function raw(plot, ctx) {
var data = plot.getData();
var axes = plot.getAxes();
var offset = plot.getPlotOffset();
var bottom = axes.yaxis.p2c(0)+offset.top;
for (var i = 0; i < data.length; i++) {
var series = data[i];
for (var j = 0; j < series.data.length; j++) {
var color = colors[j];
var d = (series.data[j]);
var x = offset.left + axes.xaxis.p2c(d[0]);
var y = offset.top + axes.yaxis.p2c(d[1]);
var r = 0.9;
ctx.lineWidth = 0.4;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.arc(x,y-r,r,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
ctx.shadowSize = 0;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x, bottom);
ctx.stroke();
ctx.closePath();
ctx.fill();
}
}
}
Maybe it can be optimized, but it works as it should. To prevent this ugly color of flot I've changed the options of plot to hide the actual graph:
var plot = $.plot(
$('#graphContainer'),[
{
data: d2,
points: {
show: true
}
}
],{series:{
shadowSize: 0,
color: "rgba(0,0,0,0)",
lines: {
lineWidth: 0.1,
fill: false,
show: false,
color: "rgba(0,0,0,0)"
},
points: {
shadowSize: 0,
lineWidth: 0.1,
fill: false,
show: false,
color: "rgba(0,0,0,0)"
}
},
grid: {
backgroundColor: "#F1F1F1",
hoverable: false,
clickable: false,
borderWidth: {top: 0.1, right: 0.1, left: 0.1, bottom: 0.1},
borderColor: {
top: "#AAAAAA",
left: "#AAAAAA",
right:"#AAAAAA",
bottom:"#AAAAAA"
},
},
bars: {
show: false
},
xaxis: {
show: true,
},
hooks: {
draw: [raw]
}
});
So you need d2-Array with your data and colors-Array with colors for each point. The length of d2 and colors should be the same. You can also change the value of var r
and ctx.lineWidth
in function raw(plot, ctx)
to get your wanted appearance.