Skip to content

Instantly share code, notes, and snippets.

@djtfmartin

djtfmartin/index.html

Created February 25, 2016 22:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save djtfmartin/572642fda08899f72044 to your computer and use it in GitHub Desktop.
Save djtfmartin/572642fda08899f72044 to your computer and use it in GitHub Desktop.
Download ZIP
Charts demos
Raw
index.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://raw.githubusercontent.com/tomsouthall/Chart.HorizontalBar.js/master/Chart.HorizontalBar.js"></script>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
</head>
<body style="width:100%;">
<div id="charts" style="padding:15px; font-family:'Arial';">
<div>
<div class="chart-content">
<canvas id="habitat-chart"></canvas>
</div>
<div class="chart-legend" id="habitat-chart-legend"></div>
<div id="cleared"></div>
</div>
<div>
<canvas id="month-bar-chart"></canvas>
</div>
<div>
<canvas id="year-bar-chart"></canvas>
</div>
<div>
<canvas id="dataset-chart"></canvas>
</div>
<div>
<canvas id="dataprovider-chart"></canvas>
</div>
<div>
<canvas id="national-parks-bar-chart"></canvas>
</div>
<div>
<canvas id="habitat-bar-chart"></canvas>
</div>
</div>
</body>
<style>
.doughnut-legend ul { list-style: none; list-style-type:none; }
.doughnut-legend ul li { list-style: none; list-style-type:none; }
.doughnut-legend li span { width: 5px; height:30px; padding-left:10px; padding-right:10px; margin-right:10px; border-radius: 5px;}
</style>
<script type="text/javascript">
var biocacheServiceUrl = "http://records-ws.als.scot";
//var biocacheServiceUrl = "http://localhost:8991/biocache-service";
var colors = [
"#8B2635","#D2D4C8", "#D3EFBD",
"#BCE784","#5DD39E","#348AA7", "#525174",
"#513B56","#656839","#26547C","#8A8E91",
"#BDD9BF"
];
function generateDoughnutChart(chartDivId, query, facetQueries, queryContext, facet){
var queryUrl = biocacheServiceUrl + "/occurrences/search.json?q=" + query + "&pageSize=0&fsort=index&facets=" + facet + "&qc=" + queryContext;
$.ajax({
url: queryUrl,
type: 'GET',
error: function(xhr, status, error) {
alert("error");
},
success: function(data) {
var items = [];
$.each( data.facetResults[0].fieldResult, function(key, result) {
items.push({
value: result.count,
color: colors[(key + 1) % colors.length-1],
highlight: colors[(key + 1) % colors.length-1],
label: result.label
});
});
var ctx = document.getElementById(chartDivId).getContext("2d");
var doughnut = new Chart(ctx).Doughnut(items, {responsive: true});
document.getElementById("habitat-chart-legend").innerHTML = doughnut.generateLegend();
$("#" + chartDivId).click(
function(evt){
var activePoints = doughnut.getSegmentsAtEvent(evt);
var url = "http://records.als.scot/occurrences/search?q=" + query + "&fq=" + facet + ":" + activePoints[0].label;
window.location.href = url;
}
);
}
});
}
function generateHorizBarChart(chartDivId, query, facetQueries, queryContext, facet){
var queryUrl = biocacheServiceUrl + "/occurrences/search.json?q=" + query + "&pageSize=0&fsort=index&facets=" + facet + "&qc=" + queryContext;
$.ajax({
url: queryUrl,
type: 'GET',
error: function(xhr, status, error) {
alert("error");
},
success: function(data) {
var labelToFq = {};
var datastructure = {
labels : [],
datasets : [{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: []
}]
};
$.each( data.facetResults[0].fieldResult, function(key, result) {
var prettifiedLabel = result.label.substring(0, 80);
if(result.label.trim() == "") {
prettifiedLabel = "Not available";
}
datastructure.labels.push(prettifiedLabel);
datastructure.datasets[0].data.push(result.count);
if(result.fq){
labelToFq[prettifiedLabel] = result.fq;
} else {
labelToFq[prettifiedLabel] = facet + ":" + result.label;
}
});
var ctx = document.getElementById(chartDivId).getContext("2d");
var horizBar = new Chart(ctx).HorizontalBar(datastructure, {responsive: true});
$("#" + chartDivId).click(
function(evt){
var activePoints = horizBar.getBarsAtEvent(evt);
var url = "http://records.als.scot/occurrences/search?q=" + query + "&fq=" + labelToFq[activePoints[0].label];
window.location.href = url;
}
);
}
});
}
function generateBarChart(chartDivId, query, facetQueries, queryContext, facet){
var queryUrl = biocacheServiceUrl + "/occurrences/search.json?q=" + query + "&pageSize=0&fsort=index&facets=" + facet + "&qc=" + queryContext;
$.ajax({
url: queryUrl,
type: 'GET',
error: function(xhr, status, error) {
alert("error");
},
success: function(data) {
var labelToFq = {};
var datastructure = {
labels : [],
datasets : [{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: []
}]
};
$.each( data.facetResults[0].fieldResult, function(key, result) {
var prettifiedLabel = result.label.substring(0, 80);
if(result.label.trim() == "") {
prettifiedLabel = "Not available";
}
datastructure.labels.push(prettifiedLabel);
datastructure.datasets[0].data.push(result.count);
if(result.fq){
labelToFq[prettifiedLabel] = result.fq;
} else {
labelToFq[prettifiedLabel] = facet + ":" + result.label;
}
});
var ctx = document.getElementById(chartDivId).getContext("2d");
var horizBar = new Chart(ctx).Bar(datastructure, {responsive: true});
$("#" + chartDivId).click(
function(evt){
var activePoints = horizBar.getBarsAtEvent(evt);
var url = "http://records.als.scot/occurrences/search?q=" + query + "&fq=" + labelToFq[activePoints[0].label];
window.location.href = url;
}
);
}
});
}
generateBarChart("month-bar-chart", "Puffin", "", "cl2:Scotland", "month");
generateBarChart("year-bar-chart", "Puffin", "", "cl2:Scotland", "decade");
generateDoughnutChart("habitat-chart", "Puffin", "", "cl2:Scotland", "cl1000");
generateHorizBarChart("habitat-bar-chart", "Puffin", "", "cl2:Scotland", "cl1000");
generateHorizBarChart("national-parks-bar-chart", "Puffin", "", "cl2:Scotland", "cl6");
generateHorizBarChart("dataset-chart", "Puffin", "", "cl2:Scotland", "data_resource_uid");
generateHorizBarChart("dataprovider-chart", "Puffin", "", "cl2:Scotland", "data_provider_uid");
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment