Graph with Days in Month

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="placeholder" style="font-size: 1.2em;width: 750px; height: 420px; "></div>
<div id="hSlider" style="width: 650px;"></div>
<div id="vSlider" style="position: absolute; height: 365px;"></div>

JavaScript

var graphMode = "";
var d = [];
var currentDate = new Date();

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function generateData(graphMode)
{
	d = [];
	var year=currentDate.getFullYear();
	var month=currentDate.getMonth();
	var day=currentDate.getDate();
	if (graphMode == "month") {
		$( "#hSlider" ).slider( "option", "min", 1 );
		$( "#hSlider" ).slider( "option", "max", 31 );
		$( "#hSlider" ).slider( "option", "values", [ 1, 31 ] );
		for (var i = 1; i <= 31; i++) {
			if (i < day)
			{
				d.push([ i, getRandomInt(1200, 1800) ]);
			}
			else
			{
				d.push([ i, 0]);
			}
		}
	}
}

$(function() {

	$("#hSlider").slider({
		range : true,
		slide : function(event, ui) {
			plotGraph();
		}
	});
	$("#vSlider").slider({
		orientation : "vertical",
		range : true,
		min : 0,
		max : 3000,
		values : [0, 2500],
		slide : function(event, ui) {
			plotGraph();
		}
	});
	generateData("month");
	plotGraph();
});

function plotGraph() {
	$.plot("#placeholder", [d], {
		yaxis : {
			axisLabel : 'kWh',
			min : $("#vSlider").slider("values", 0),
			max : $("#vSlider").slider("values", 1)
		},
		xaxis : {
			/*mode : "time",
			timezone : "browser",
			minTickSize : [1, "month"],*/
			min : $("#hSlider").slider("values", 0),
			max : $("#hSlider").slider("values", 1),
			tickSize: 1,
		},
		bars : {
			show: true,
			align: "center",
			barWidth: 0.75,
		}
	});
}