Dynamically changing granularity of data based on zoom scope

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<div class="note">^^^ Use the scrollbar above to zoom/pan and see how data granularity changes when zoomed-in ^^^</div>

CSS

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}
#chartdiv {
	width	: 100%;
	height	: 500px;
}
.note {
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

JavaScript

// let's generate two sets of data: one daily and one monthly
var dailyData = [{
    "date": "2012-07-27 12:00",
    "value": 13
},{
    "date": "2012-07-27 13:00",
    "value": 13
}];

var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "none",
        "pathToImages": "http://www.amcharts.com/lib/3/images/",
        "dataDateFormat": "YYYY-MM-DD",
        "valueAxes": [{
            "axisAlpha": 0,
            "position": "left"
        }],
        "graphs": [{
			"id": "g1",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "title": "red line",
            "useLineColorForBulletBorder": true,
            "valueField": "value"
        }],
        "chartScrollbar": {
			"graph": "g1",
			"scrollbarHeight": 30
		},
        "chartCursor": {
            "cursorPosition": "mouse",
            "pan": true
        },
        "categoryField": "date",
        "categoryAxis": {
            "parseDates": true,
            "dashLength": 1,
            "minorGridEnabled": true,
            // let's start with the monthly data
            "minPeriod": "hh",
            "position": "top"
        },
        "dataProvider": monthlyData
    }
);

// when chart data updates "zoomed" event is called
// let's set up a flag so that we know which zoom events to ignore
chart.ignoreZoomEvent = true;

// watch for any zoom/pan changes with "zoomed" event
chart.addListener("zoomed", function (event) {
    
    // ignore this event?
    if (chart.ignoreZoomEvent) {
        chart.ignoreZoomEvent = false;
        return;
    }
    
    // calculate the length of selected period in days
    var timeDiff = Math.abs(event.endDate.getTime() - event.startDate.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    
    // determine which period to use
    // if more than 90 days...