Skip to content

Instantly share code, notes, and snippets.

@muthu32

muthu32/index.html

Last active March 21, 2019 08:16
Show Gist options
  • Save muthu32/6bd29d851a506f06b9f21b5ac9c814c9 to your computer and use it in GitHub Desktop.
Save muthu32/6bd29d851a506f06b9f21b5ac9c814c9 to your computer and use it in GitHub Desktop.
Download ZIP
bar chart & Pie chart using chart.js
Raw
index.html
<!--- https://blockbuilder.org/muthu32/6bd29d851a506f06b9f21b5ac9c814c9 ---->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" ></script>
<script>
function svgBarChartEntry()
{
get_heat_staytime_list();
}
function get_heat_staytime_list()
{
//var list = history_heat_staytime_list(history_items);
list = [{'domain':'bokuta.se',heat:5,staytime:10},
{'domain':'lol.se',heat:25,staytime:14},
{'domain':'vaxthus.se',heat:15,staytime:20},
{'domain':'Mangatha.se',heat:15,staytime:10},
{'domain':'loremipsumipsum.se',heat:14,staytime:10},
{'domain':'hello.se',heat:16,staytime:10},
{'domain':'test.se',heat:17,staytime:10},
{'domain':'MuthukumarkumarMuthukumarkumarMuthukumarkumar.se',heat:20,staytime:10},
{'domain':'MaheswariLOL.se',heat:18,staytime:10},
{'domain':'Pavithra.se',heat:17,staytime:10},
]
//svgBarChart(list);
//svgVirBarChart(list);
tmp_svgBarChart(list);
tmp_svgPieChart(list);
}
function find_top_list(list){
//alert("in find_top_list");
//alert(list);
//alert(list.length);
if(list.length==0)
return false;
var top_items=new Array();
if(list.length<10){
//alert("in second if");
for(var i=0;i<list.length;i++){
top_items[i]= {};
top_items[i].domain=list[i].domain;
top_items[i].heat=list[i].heat;
}}
else{
//alert("in second else");
list.sort(function compare(obj1,obj2){
return obj2.heat-obj1.heat;
});
//alert(list.length)
//alert(list[0].domain)
for(var i=0;i<8;i++){
top_items[i]= {};
top_items[i].domain=list[i].domain;
top_items[i].heat=list[i].heat;
}
}
return top_items;
}
/* I modify this file for presentation.
* It is just a temporal version. And it can be delete or modify any time.
*/
// -----------------------------------
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(231,233,237)'
};
window.randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}
function tmp_svgBarChart(list)
{
var top_items=find_top_list(list);
var color = Chart.helpers.color;
var barChartData = {
labels: [],
datasets: [{
type: 'bar',
label: 'Heat Click',
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
borderColor: window.chartColors.red,
data: []
}, ]
};
if(top_items)
{
for (var i = 0;i<top_items.length;i++)
{
barChartData.labels.push(top_items[i].domain);
barChartData.datasets[0].data.push(top_items[i].heat);
}
}
// Define a plugin to provide data labels
Chart.plugins.register({
afterDatasetsDraw: function(chartInstance, easing) {
// To only draw at the end of animation, check for easing === 1
var ctx = chartInstance.chart.ctx;
chartInstance.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
// Draw the text in black, with the specified font
ctx.fillStyle = 'rgb(0, 0, 0)';
var fontSize = 16;
var fontStyle = 'normal';
var fontFamily = 'Helvetica Neue';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
if(dataset.data[index]>=1){
var dataString = dataset.data[index].toString();
//alert(typeof(dataset.data[index]))
}
else{
var percent_form=((dataset.data[index])*100).toFixed(2)+'%';
var dataString =percent_form;
//alert(dataString)
}
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var padding = 5;
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
});
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
title: {
display: true,
text: 'Heat Click URL'
},
}
});
}
function tmp_svgPieChart(list)
{
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [
],
backgroundColor: [
],
label: 'StayTime'
}],
labels: [
]
},
options: {
responsive: true
}
};
if(list && list.length > 0)
{
// Sort by stay time
list.sort(function compare(obj1, obj2){
return obj2.staytime - obj1.staytime;
});
var count = 0;
var total_data = new Array();
var sum = 0;
for(var i = 0; i < list.length ; i++)
{
var r = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var random_color = "rgb(" + r + "," + g + "," + b + ")";
if(count>5)
{
var rest_time = 0;
for(var j = i; j < list.length; j++)
{
if(list[j])
{
rest_time = rest_time + list[j].staytime;
}
}
total_data.push(rest_time);
sum += rest_time;
config.data.labels.push("Others");
config.data.datasets[0].backgroundColor.push(random_color);
break;
}
else{
total_data.push(list[i].staytime);
sum += list[i].staytime;
config.data.labels.push(list[i].domain);
config.data.datasets[0].backgroundColor.push(random_color);
}
count = count + 1;
}
for(var i = 0; i< total_data.length; i++)
{
config.data.datasets[0].data.push(total_data[i] / sum);
}
}
config.data.datasets[0].data
var ctx = document.getElementById("canvas2").getContext("2d");
window.myPie = new Chart(ctx, config);
}
window.onload = function(){
// divBarChart();
svgBarChartEntry();
//alert("what");
//svgVirBarChart();
};
</script>
</head>
<body>
<h4> Hit Rate </h4>
<canvas id="canvas"></canvas>
<h4> Stay Time </h4>
<div id = "pie_div">
<canvas id="canvas2" height="150"></canvas>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment