rynr/coverage.html

## coverage.html
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Sonar Project-Stats</title>
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="normalize.min.css">
        <link rel="stylesheet" href="main.css">

        <script src="modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>

                <div class="wrapper">
                    <div class="head-row">
                        <img src="img/logo.png" class="logo"><span class="claim">FriendScout24 - Sonar Code Coverage Statistics </span>
                    </div>
                    <div id="chart_11" class="chart"></div>
                    <div id="chart_12" class="chart"></div>
                    <div id="chart_21" class="chart"></div>
                    <div id="chart_22" class="chart"></div>
                </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="jquery-1.10.1.min.js"><\/script>')</script>
        <script type="text/javascript" src="google-jsapi.js"></script>
        <script type="text/javascript"src="main.js"></script>

    </body>
</html>

## main.js
var SonarDivs = function(){
  var settings = {
                                    'sonarBaseUrl':'http://sonar.friendscout24.de/api/',
                                    'sonarSettingsUrlPart':'&metrics=new_coverage,new_lines_to_cover&includetrends=true&format=json&callback=?',
                                    'chartHeightSingleRow':80,
                                    'colorBarNewCoverage':'#ff7500',
                                    'colorBarNewUncoveredLines':'#003366',
                                    'defaultProjects': 'de.friendscout24.portal:portal'
                                    };

    var currentChartRow = 1;

  var getURLParameter = function(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
    }

    var drawProjectCharts = function(_json) {
            var chartRow = currentChartRow++;
            var dataNewCoverage = google.visualization.arrayToDataTable([
                ['time intervals', 'coverage of new code'],
        [_json.p1p,  _json.msr[1].var1/100],
        ['7 days',  _json.msr[1].var2/100],
        ['30 days',  _json.msr[1].var3/100]
      ]);

            var optionsNewCoverage = {
                title: _json.name + ' - Coverage of new code in %',
                titleTextStyle: {fontSize: 22,bold: true,color: '#144496'},
                colors: [settings.colorBarNewCoverage],
                legend: {position: 'none'},
                chartArea: {width:"80%",height:"70%"},
                hAxis:{format:'###%', minValue: 0, maxValue: 1}
      };

            var dataNewUncovetedLines = google.visualization.arrayToDataTable([
                ['time intervals', 'new uncovered lines'],
        [_json.p1p,  _json.msr[0].var1],
        ['7 days',  _json.msr[0].var2],
        ['30 days',  _json.msr[0].var3]
      ]);

      var optionsNewUncovetedLines = {
                title: _json.name + ' - New lines of code',
                titleTextStyle: {fontSize: '22',bold: true,color: '#144496'},
                colors: [settings.colorBarNewUncoveredLines],
                legend: {position: 'none'},
                chartArea: {width:"80%",height:"70%"},
                hAxis:{format:'### loc', minValue: 0}
      };

            var chartElem1 = document.getElementById('chart_'+chartRow+'1');
      var chart = new google.visualization.BarChart(chartElem1);
            $(chartElem1).show();
      chart.draw(dataNewCoverage, optionsNewCoverage);

            var chartElem2 = document.getElementById('chart_'+chartRow+'2');
            var chart2 = new google.visualization.BarChart(chartElem2);
            $(chartElem2).show();
      chart2.draw(dataNewUncovetedLines, optionsNewUncovetedLines);
    };

    var setChartHeights = function(_numOfRows){
        var heightInPercent = settings.chartHeightSingleRow/_numOfRows
        $('.chart').css('height', heightInPercent+'%');
    };

    var jsonpCallback = function(_json){
        drawProjectCharts(_json[0]);
    };

  var init = function(){
        $('body, .wrapper').css({'height': window.screen.height-1, 'width': window.screen.width-1});
        // get project params from url
        var projectsFromParam = getURLParameter('project');
        if(projectsFromParam==null){
            projectsFromParam = settings.defaultProjects;
        }
        var projectArray = projectsFromParam.split('|');
        setChartHeights(projectArray.length);
        // get JSON for list of sonar projects via JSON-P
        for(var i=0;i<projectArray.length;i++){
            $.getJSON(settings.sonarBaseUrl + 'resources?resource=' + projectArray[i] + settings.sonarSettingsUrlPart, jsonpCallback);
        }
    };

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(init);
}();
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Sonar Project-Stats</title>
	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet" href="normalize.min.css">
	<link rel="stylesheet" href="main.css">

	<script src="modernizr-2.6.2-respond-1.1.0.min.js"></script>
	</head>
	<body>

	<div class="wrapper">
	<div class="head-row">
	<img src="img/logo.png" class="logo"><span class="claim">FriendScout24 - Sonar Code Coverage Statistics </span>
	</div>
	<div id="chart_11" class="chart"></div>
	<div id="chart_12" class="chart"></div>
	<div id="chart_21" class="chart"></div>
	<div id="chart_22" class="chart"></div>
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="jquery-1.10.1.min.js"><\/script>')</script>
	<script type="text/javascript" src="google-jsapi.js"></script>
	<script type="text/javascript"src="main.js"></script>

	</body>
	</html>
	var SonarDivs = function(){
	var settings = {
	'sonarBaseUrl':'http://sonar.friendscout24.de/api/',
	'sonarSettingsUrlPart':'&metrics=new_coverage,new_lines_to_cover&includetrends=true&format=json&callback=?',
	'chartHeightSingleRow':80,
	'colorBarNewCoverage':'#ff7500',
	'colorBarNewUncoveredLines':'#003366',
	'defaultProjects': 'de.friendscout24.portal:portal'
	};

	var currentChartRow = 1;

	var getURLParameter = function(name) {
	return decodeURIComponent((new RegExp('[?\|&]' + name + '=' + '([^&;]+?)(&\|#\|;\|$)').exec(location.search)\|\|[,""])[1].replace(/\+/g, '%20'))\|\|null;
	}

	var drawProjectCharts = function(_json) {
	var chartRow = currentChartRow++;
	var dataNewCoverage = google.visualization.arrayToDataTable([
	['time intervals', 'coverage of new code'],
	[_json.p1p, _json.msr[1].var1/100],
	['7 days', _json.msr[1].var2/100],
	['30 days', _json.msr[1].var3/100]
	]);

	var optionsNewCoverage = {
	title: _json.name + ' - Coverage of new code in %',
	titleTextStyle: {fontSize: 22,bold: true,color: '#144496'},
	colors: [settings.colorBarNewCoverage],
	legend: {position: 'none'},
	chartArea: {width:"80%",height:"70%"},
	hAxis:{format:'###%', minValue: 0, maxValue: 1}
	};

	var dataNewUncovetedLines = google.visualization.arrayToDataTable([
	['time intervals', 'new uncovered lines'],
	[_json.p1p, _json.msr[0].var1],
	['7 days', _json.msr[0].var2],
	['30 days', _json.msr[0].var3]
	]);

	var optionsNewUncovetedLines = {
	title: _json.name + ' - New lines of code',
	titleTextStyle: {fontSize: '22',bold: true,color: '#144496'},
	colors: [settings.colorBarNewUncoveredLines],
	legend: {position: 'none'},
	chartArea: {width:"80%",height:"70%"},
	hAxis:{format:'### loc', minValue: 0}
	};

	var chartElem1 = document.getElementById('chart_'+chartRow+'1');
	var chart = new google.visualization.BarChart(chartElem1);
	$(chartElem1).show();
	chart.draw(dataNewCoverage, optionsNewCoverage);

	var chartElem2 = document.getElementById('chart_'+chartRow+'2');
	var chart2 = new google.visualization.BarChart(chartElem2);
	$(chartElem2).show();
	chart2.draw(dataNewUncovetedLines, optionsNewUncovetedLines);
	};

	var setChartHeights = function(_numOfRows){
	var heightInPercent = settings.chartHeightSingleRow/_numOfRows
	$('.chart').css('height', heightInPercent+'%');
	};

	var jsonpCallback = function(_json){
	drawProjectCharts(_json[0]);
	};

	var init = function(){
	$('body, .wrapper').css({'height': window.screen.height-1, 'width': window.screen.width-1});
	// get project params from url
	var projectsFromParam = getURLParameter('project');
	if(projectsFromParam==null){
	projectsFromParam = settings.defaultProjects;
	}
	var projectArray = projectsFromParam.split('\|');
	setChartHeights(projectArray.length);
	// get JSON for list of sonar projects via JSON-P
	for(var i=0;i<projectArray.length;i++){
	$.getJSON(settings.sonarBaseUrl + 'resources?resource=' + projectArray[i] + settings.sonarSettingsUrlPart, jsonpCallback);
	}
	};

	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(init);
	}();