Статистика Google Analytics на вашем сайте. Часть третья. JavaScript графики

С момента публикации второго топика Andex о статистике прошло много времени, а мне понадобилась подобная аналитика.
Про использование gapi всё уже сказано до меня. Flash-графики armcharts больше не поддерживаются, а функционала существующих мне не хватило — для наглядности хотелось иметь временную шкалу, в результате использована javaScript версию armcharts, подпиленная напильничком, вот что получилось:


Для получения такого графика нужно:
во-первых, получить ежедневный отчет (у меня за последний год, а не 3 месяца как здесь),
во-вторых, на вашей странице добавить:

    <script type="text/javascript" src="/js/amcharts/amcharts.js"></script>
    <script type="text/javascript" src="/js/amcharts/raphael.js"></script>
    <script type="text/javascript" src="/js/makeCharts.js"></script>
    <div id="chartdiv" style="width:100%; height:400px;"></div>
    <div id="date" style="padding-left:43px;padding-bottom:10px;">
        <input onChange="changeZoomDates()" style="width:100px; text-align:center" type="text" id="startDate">-
        <input onChange="changeZoomDates()" style="width:100px; text-align:center" type="text" id="endDate">
    </div>

и в-третьих, в файле makeCharts.js
makeCharts.js

var chart, 
      chartData = [];
AmCharts.ready(drawChart);

function drawChart() {
                var report = "path/to/your/report";
		chartData = loadCSV(report);
	    // SERIAL CHART   
		if (chartData != false ) {
		    chart = new AmCharts.AmSerialChart();
		    chart.pathToImages = "/js/amcharts/images/";
		    chart.zoomOutButton = {
		        backgroundColor: '#000000',
		        backgroundAlpha: 0.15
		    };
		    chart.dataProvider = chartData;
		    chart.validateData();
		    chart.categoryField = "date";
		
		    // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
		    chart.addListener("dataUpdated", zoomChart);
		 	// listen for zoomed event andcall "chartZoom" method then it happens
		    chart.addListener('zoomed', chartZoom);
		
		    // AXES
		    // category                
		    var categoryAxis = chart.categoryAxis;
		    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
		    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
		    categoryAxis.dateFormats = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN'},{period:'hh',format:'JJ:NN'},{period:'DD',format:'DD.MM.YY'},{period:'MM',format:'MM'},{period:'YYYY',format:'YYYY'}]
		    categoryAxis.dashLength = 2;
		    categoryAxis.gridAlpha = 0.15;
		    categoryAxis.axisColor = "#DADADA";
		
			// value
	        var valueAxis = new AmCharts.ValueAxis();
	        valueAxis.axisAlpha = 0;
	        valueAxis.integersOnly = true;
	        chart.addValueAxis(valueAxis);
		    
		    // GRAPHS
		    // first graph
		    var graph1 = new AmCharts.AmGraph();
		    graph1.type = "smoothedLine";
		    graph1.valueAxis = valueAxis; // we have to indicate which value axis should be used
		    graph1.title = "Посетители";
		    graph1.valueField = "visitors";
		    graph1.bullet = "round";
		    graph1.bulletSize = 5;
		    graph1.lineThickness = 2;
		    graph1.lineColor = "#b6d278";
		    graph1.hideBulletsCount = 30;
		    chart.addGraph(graph1);
		
		    // second graph                
		    var graph2 = new AmCharts.AmGraph();
		    graph2.type = "smoothedLine";
		    graph2.valueAxis = valueAxis; // we have to indicate which value axis should be used
		    graph2.title = "Посещения";
		    graph2.valueField = "visits";
		    graph2.lineColor = "#FF9999";
		    graph2.lineThickness = 2;
		    graph2.bullet = "round";
		    graph2.bulletSize = 5;
		    graph2.hideBulletsCount = 30;
		    chart.addGraph(graph2);
		
		    // third graph
		    var graph3 = new AmCharts.AmGraph();
		    graph3.type = "smoothedLine";
		    graph3.valueAxis = valueAxis; // we have to indicate which value axis should be used
		    graph3.valueField = "pageviews";
		    graph3.lineColor = "#637bb6";
		    graph3.lineThickness = 2;
		    graph3.title = "Просмотры страниц";
		    graph3.bullet = "round";
		    graph3.bulletSize = 5;
		    graph3.hideBulletsCount = 30;
		    chart.addGraph(graph3);
		
		    // CURSOR
		    var chartCursor = new AmCharts.ChartCursor();
		    chartCursor.cursorPosition = "mouse";
		    chart.addChartCursor(chartCursor);
		
		    // SCROLLBAR
		    var chartScrollbar = new AmCharts.ChartScrollbar();
		    chartScrollbar.graph = graph1;
		    chartScrollbar.autoGridCount = true;
		    chartScrollbar.scrollbarHeight = 25;
		    chart.addChartScrollbar(chartScrollbar);
		
		    // LEGEND
		    var legend = new AmCharts.AmLegend();
		    legend.marginLeft = 110;
		    chart.addLegend(legend);
		    // WRITE
		    chart.write("chartdiv");
		    chart.validateNow();
		}
		else {
			$('#chartdiv').height(30).text("нет данных");
			$('#date').hide();
		}
	}

// this method is called when chart is first inited as we listen for "dataUpdated" event
	function zoomChart() {
	    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
	    //chart.zoomToIndexes(10, 20);
		chart.zoomToIndexes(chartData.length - 7, chartData.length - 1);
	}
// this method converts string from input fields to date object 
	function stringToDate(str) {
	    var dArr = str.split(".");
	    var date;
            date = new Date(Number(dArr[2]), Number(dArr[1]) - 1, dArr[0]);
	    return date;
	}
// this method is called when user changes dates in the input field
	function changeZoomDates() {
	    var startDateString = document.getElementById("startDate").value;
	    var endDateString = document.getElementById("endDate").value;
	    var startDate = stringToDate(startDateString);
	    var endDate = stringToDate(endDateString);
	    chart.zoomToDates(startDate, endDate);
	}

function parseCSV(data){ 
	    //replace UNIX new lines
	    data = data.replace (/\r\n/g, "\n");
	    //replace MAC new lines
	    data = data.replace (/\r/g, "\n");
	    //split into rows
	    var rows = data.split("\n");
	    var chartData = [];
	    
	    // loop through all rows
	    for (var i = 0; i < rows.length; i++){
	        // this line helps to skip empty rows
	        if (rows[i]) {                    
	            // our columns are separated by comma
	            var column = rows[i].split(";");  
	            // column is array now 
	            // first item is date
	            var date = column[0];
	            date = stringToDate(date);
	            // second item is value of the second column
	            var value1 = column[1];
	            // third item is value of the fird column 
	            var value2 = column[2];
	            var value3 = column[3];
	            // create object which contains all these items: visitors','visits','pageviews
	            var dataObject = {date:date, visitors:value1, visits:value3, pageviews:value2};
	            // add object to dataProvider array
	            chartData.push(dataObject);
	        }
	    }
	    return chartData;
	}