Dashed lines flot
HTML
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id="placeholder" style="width: 400px; height: 400px"></div>
<script src="//rawgit.com/flot/flot/master/jquery.flot.resize.js"></script>
<!--
<script src="//rawgit.com/flot/flot/master/jquery.flot.categories.js"></script>
<script src="//rawgit.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script>
<script src="//rawgit.com/flot/flot/master/jquery.flot.stack.js"></script>
<script src="//rawgit.com/cquartier/flot.dashes/master/jquery.flot.dashes.js"></script>
-->
<script src="//rawgit.com/flot/flot/master/jquery.flot.pie.js"></script>
JavaScript
var series = [
{"label":"One", "dashes":{"show": "true"},"data":[
[0, "5"],
[1, "4"],
[2, "5"],
[3, "14"],
[4, "44"],
[5, "31"],
[6, "6"],
[7, "26"],
[8, "18"],
[9, "77"],
[10, "4"]
]
},{"label":"Two","lines":{"show":"true"},"data":[
[0, "2"],
[1, "5"],
[2, "14"],
[3, "15"],
[4, "4"],
[5, "34"],
[6, "31"],
[7, "16"],
[8, "16"],
[9, "8"],
[10, "57"]
]
}];
var options = {
//yaxis: {max: maxValue, min: minValue},
//grid: {hoverable: true, clickable: true},
//legend: {show: false}
//xaxis: {tickFormatter: null}
/*
canvas : false,
axisLabelUserHtml: true,
tooltip: true,
*/
/*
grid: {
borderWidth : {
bottom: 1,
left: 1,
right: 0,
top: 0
},
clickable: true,
hoverable: true,
labelMargin: 5,
mouseActiveRadius: 10
},
legend : {
backgroundOpacity: 0,
markings: null,
noColumns: 1,
position:"ne",
show: true
},*/
series : {
/*
bars :{
align: "center",
barWidth : 0.2,
fill : 0.7,
lineWidth: 0.7,
order:0,
show:false,
stack:false
},*/
lines : {
show: false,
steps: false
},
points : {
show: false,
shadowSize : 0,
stack : false
}
},
xaxis :{
min: -0.5,
tickDecimals: 0
},
yaxis : {
labelHeight: 10,
tickDecimals: 0
}
};
$.plot("#placeholder", series , options);
$("#placeholder").bind("plotclick", function (event, pos, item){
alert(item);
});