Waruna's Blog by Waruna Ranasinghe

Sunday, April 3, 2011

How to hide vertical grid lines in jQuery flot

There is a straight forward method to hide vertical or horizontal grid lines in your jQuery flot bar chart. First of all you need to checkout the flot trunk and include jquery.flot.js and jquery.flot.stack.js scripts in your script. You need the trunk, since released flot - 0.6 does not support this feature.

Then include the following as the options.

xaxis: {
  tickLength: 0
}

i.e.

<script id="source">
$(function () {
    var d1 = [];
    for (var i = 0; i <= 10; i += 1)
        d1.push([i, parseInt(Math.random() * 30)]);
 
    var d2 = [];
    for (var i = 0; i <= 10; i += 1)
        d2.push([i, parseInt(Math.random() * 30)]);
 
    var d3 = [];
    for (var i = 0; i <= 10; i += 1)
        d3.push([i, parseInt(Math.random() * 30)]);
 
    var stack = 0, bars = true, lines = false, steps = false;
 
    function plotWithOptions() {
        $.plot($("#placeholder"), [ d1, d2, d3 ], {
            series: {
                stack: stack,
                lines: { show: lines, steps: steps },
                bars: { show: bars, barWidth: 0.6, align: "center" }
            },
            xaxis: { tickLength: 0}
        });
    }
 
    plotWithOptions();
});
</script>

Saturday, November 14, 2009

jQuery DatePicker with icon

It is always quite convenient to use an icon to pop-up the date picker in onclick of an icon. It is a very easy task with jQuery date picker. Try following code:

<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({showOn: 'button', buttonImage: '/images/search.gif', buttonImageOnly: true});
});
</script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div>

</body>
</html>

But when you use the above code, the DatePicker will not be popped-up when clicked in the text box, but on the icon. Please be kind enough to make a comment if you happend to find the solution for that.

Reference: http://jqueryui.com/demos/datepicker/#icon-trigger
http://docs.jquery.com/UI/Datepicker