stats.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Scholarworks Dashboard</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
    <!-- ///////////////////////////////////////////////// -->
    <!-- D3 Visualization Library -->
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="js/d3pie.min.js"></script>
    <!--  USING D3 -->
    <script>

		function draw(data) {
			d3.select("body")
				.data(data)
				.enter()
				.append("svg")
					.attr("width", function(d) { 25 } )
					.attr("height", function(d) { 25 } )
					.append("circle")
					.attr("cx", 25)
					.attr("cy", 25)
					.attr("r", function(d) { return d.count })
					.style("fill", "purple");
		}

	</script>
    
    <!-- ///////////////////////////////////////////////// -->
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="/dashboard">Scholarworks Dashboard</a>
        </div>
        <div class="navbar-collapse collapse">
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="/dashboard">Overview</a></li>
            <li><a href="reports.html">Reports</a></li>
            <li><a href="stats.html">Analytics</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">Scholarworks Analytics Dashboard</h1>

          <div class="row placeholders">
          	<!--  NOTHING HERE FOR NOW -->
          </div>

          <h2 class="sub-header">Statistics Visualization</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Statisitics Visualization on Facet: Type</th>
                  <th>&nbsp;</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style="width: 50%; align: center;">
						<div id="pieChart"></div>
				  </td>
                  <td style="width: 50%; align: center;">
						<div id="pieChart2"></div>
				  </td>
<script>

var pieChartData = {};
pieChartData["header"] = {
		"title": {
			"text": "ScholarWorks Facet Counts for Type",
			"fontSize": 24,
			"font": "open sans"
		},
		"subtitle": {
			"text": "A full pie chart to show off label collision detection and resolution.",
			"color": "#999999",
			"fontSize": 12,
			"font": "open sans"
		},
		"titleSubtitlePadding": 9
	};
pieChartData["footer"] = {
		"color": "#999999",
		"fontSize": 10,
		"font": "open sans",
		"location": "bottom-left"
	};
pieChartData["size"] = {
		"canvasWidth": 500,
		"canvasHeight": 500
};
pieChartData["data"] = {
		"sortOrder": "value-desc"
};
pieChartData["data"]["smallSegmentGrouping"] = {
	enabled: true,
	value: 3,
	valueType: "percentage",
	label: "< 3% of items"
};
pieChartData["data"]["content"] = [];
pieChartData["labels"] = {
		"outer": {
			"pieDistance": 32
		},
		"inner": {
			"hideWhenLessThanPercentage": 5
		},
		"mainLabel": {
			"fontSize": 11
		},
		"percentage": {
			"color": "#ffffff",
			"decimalPlaces": 0
		},
		"value": {
			"color": "#adadad",
			"fontSize": 11
		},
		"lines": {
			"enabled": true
		}
	};

pieChartData["effects"] = {
		"pullOutSegmentOnClick": {
			"effect": "linear",
			"speed": 400,
			"size": 8
		}
	};
pieChartData["misc"] = 	{
		"gradient": {
			"enabled": true,
			"percentage": 100
		}
	};
pieChartData["callbacks"] = {
		onClickSegment: function(info) {console.log(info.data.label);},
		onMouseoverSegment: function(info) {
			$("#hoverInfo").text(info.data.label);
		}
	};	

$.getJSON('http://scholarworks.calstate.edu/portal/api/facet/json/type_keyword', function(data) {
	data = $.parseJSON(data);
	$.each(data, function(i, item){
		// alert(i + " = " + item.name + ": " + item.size);
    	var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
		pieChartData["data"]["content"].push({"label": item.name, "value": item.size, "color": hue});
	});
	loadPieChart("pieChart",pieChartData);
});

var pieChartData2 = {};
pieChartData2["header"] = {
		"title": {
			"text": "ScholarWorks Facet Counts for Program",
			"fontSize": 24,
			"font": "open sans"
		},
		"subtitle": {
			"text": "A full pie chart to show off label collision detection and resolution.",
			"color": "#999999",
			"fontSize": 12,
			"font": "open sans"
		},
		"titleSubtitlePadding": 9
	};
pieChartData2["footer"] = {
		"color": "#999999",
		"fontSize": 10,
		"font": "open sans",
		"location": "bottom-left"
	};
pieChartData2["size"] = {
		"canvasWidth": 500,
		"canvasHeight": 500
};
pieChartData2["data"] = {
		"sortOrder": "value-desc"
		
};
pieChartData2["data"]["content"] = [];
pieChartData2["labels"] = {
		"outer": {
			"pieDistance": 32
		},
		"inner": {
			"hideWhenLessThanPercentage": 5
		},
		"mainLabel": {
			"fontSize": 11
		},
		"percentage": {
			"color": "#ffffff",
			"decimalPlaces": 0
		},
		"value": {
			"color": "#adadad",
			"fontSize": 11
		},
		"lines": {
			"enabled": true
		}
	};

pieChartData2["effects"] = {
		"pullOutSegmentOnClick": {
			"effect": "linear",
			"speed": 400,
			"size": 8
		}
	};
pieChartData2["misc"] = 	{
		"gradient": {
			"enabled": true,
			"percentage": 100
		}
	};
pieChartData2["callbacks"] = {
		onClickSegment: function(info) {console.log(info.data.label);},
		onMouseoverSegment: function(info) {
			$("#hoverInfo").text(info.data.label);
		}
	};	

$.getJSON('http://scholarworks.calstate.edu/portal/api/facet/json/program_keyword', function(data) {
	data = $.parseJSON(data);
	$.each(data, function(i, item){
		// alert(i + " = " + item.name + ": " + item.size);
    	var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
		pieChartData2["data"]["content"].push({"label": item.name, "value": item.size, "color": hue});
	});
	loadPieChart("pieChart2",pieChartData2);
});

function loadPieChart(pieChartId,pieChartDataIn) {
	var pie = new d3pie(pieChartId, pieChartDataIn);
}


</script>
                  </td>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>