František Špaček
2 years ago
parent
7bc2723e31
commit
7d67a990e3
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,528 @@
|
||||
function Rect(value, name, x, y, w, h){
|
||||
this.value = value;
|
||||
this.name = name;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.w = w;
|
||||
this.h = h;
|
||||
this.checkHit = function (mouseX, mouseY) {
|
||||
return (mouseX >= x && mouseX <= x + w && mouseY >= y && mouseY <= y + h);
|
||||
}
|
||||
}
|
||||
|
||||
function Circle(value, name, x, y, r){
|
||||
this.value = value;
|
||||
this.name = name;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.r = r;
|
||||
this.checkHit = function (mouseX, mouseY) {
|
||||
return Math.pow((mouseX - x),2) + Math.pow((mouseY - y),2) <= Math.pow(r, 2);
|
||||
}
|
||||
}
|
||||
|
||||
function PieSlice(value, name, x, y, r, sAngle, eAngle){
|
||||
this.value = value;
|
||||
this.name = name;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.r = r;
|
||||
this.sAngle = sAngle;
|
||||
this.eAngle = eAngle;
|
||||
this.checkHit = function (mouseX, mouseY) {
|
||||
if (Math.pow((mouseX - x),2) + Math.pow((mouseY - y),2) <= Math.pow(r, 2)){
|
||||
var dy = mouseY - y;
|
||||
var dx = mouseX - x;
|
||||
var theta = Math.atan2(dy, dx); // range (-PI, PI]
|
||||
if (theta < 0) theta += 2*Math.PI;
|
||||
|
||||
return (theta > sAngle && theta < eAngle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let objects = [];
|
||||
|
||||
function checkHit(pos) {
|
||||
for (let i = 0; i < objects.length; i++){
|
||||
if (objects[i].checkHit(pos.x, pos.y)){
|
||||
return objects[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getLargest(data) {
|
||||
let largest = data[0].values[0];
|
||||
|
||||
data.forEach(function (categ) {
|
||||
for (let i = 0; i < categ.values.length; i++)
|
||||
if (categ.values[i] > largest) {
|
||||
largest = categ.values[i];
|
||||
}
|
||||
});
|
||||
|
||||
return largest;
|
||||
}
|
||||
|
||||
function getSmallest(data) {
|
||||
let smallest = data[0].values[0];
|
||||
|
||||
data.forEach(function (categ) {
|
||||
for (let i = 0; i < categ.values.length; i++)
|
||||
if (categ.values[i] < smallest) {
|
||||
smallest = categ.values[i];
|
||||
}
|
||||
});
|
||||
|
||||
return smallest;
|
||||
}
|
||||
|
||||
function drawAxis(bounds, largest, smallest, arrayLen, ctx, graphSettings, drawValues = true) {
|
||||
ctx.font = "16px Arial";
|
||||
if (graphSettings.y_step <= 0) graphSettings.y_step = 1;
|
||||
|
||||
ctx.beginPath();
|
||||
for (let i = (smallest < 0)?smallest:0; i <= ((largest>=0)?largest:0); i += parseFloat(graphSettings.y_step)){
|
||||
|
||||
ctx.strokeStyle = "#BBB";
|
||||
ctx.lineWidth = 1;
|
||||
let scale = bounds.height - ((largest >= 0)?(bounds.bottom - bounds.xAxis):0);
|
||||
let extreme = (largest<=0)?Math.abs(smallest):Math.abs(largest);
|
||||
let yPos = Math.round((bounds.xAxis - i * scale / extreme));
|
||||
|
||||
//support line
|
||||
if (graphSettings.display_support_lines) {
|
||||
|
||||
ctx.moveTo( bounds.left, yPos );
|
||||
ctx.lineTo( bounds.right, yPos );
|
||||
}
|
||||
|
||||
//Y axis value
|
||||
ctx.fillStyle = "black";
|
||||
ctx.textAlign = "center";
|
||||
ctx.textAlign = "end";
|
||||
ctx.fillText( i, bounds.left - 3, yPos);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
//X axis value
|
||||
if (drawValues) {
|
||||
ctx.fillStyle = "black";
|
||||
ctx.textAlign = "center";
|
||||
for (let i = 0; i < arrayLen; i++){
|
||||
let x = bounds.left + bounds.width / (arrayLen - 1) * i;
|
||||
let text = (i + 1).toString();
|
||||
if (graphSettings.custom_x_values !== "")
|
||||
text = graphSettings.custom_x_values.split(';')[i];
|
||||
ctx.fillText(text, x, bounds.bottom + 18);
|
||||
}
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
//X and Y axis
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.lineWidth = "2px";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo( bounds.left, bounds.top );
|
||||
ctx.lineTo( bounds.left, bounds.bottom );
|
||||
ctx.moveTo( bounds.left, bounds.xAxis);
|
||||
ctx.lineTo( bounds.right, bounds.xAxis );
|
||||
ctx.stroke();
|
||||
|
||||
//Axis labels
|
||||
//X axis text
|
||||
ctx.beginPath();
|
||||
ctx.font = "20px Arial";
|
||||
ctx.fillStyle = "black";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(graphSettings.x_label, bounds.width/2 + bounds.left, bounds.height + 2*bounds.top - 5);
|
||||
|
||||
//Y axis text
|
||||
ctx.save();
|
||||
ctx.rotate(-Math.PI / 2);
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(graphSettings.y_label, -(bounds.left + bounds.height/2), 18);
|
||||
ctx.restore();
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function drawTitle(canvas, graphSettings) {
|
||||
let ctx = canvas.getContext("2d");
|
||||
let x = canvas.width / 2;
|
||||
let y = 25;
|
||||
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = "black";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText( graphSettings.title, x, y);
|
||||
}
|
||||
|
||||
function drawPoints(ctx, bounds, values, name, arrayLen, largest, color) {
|
||||
ctx.fillStyle = color;
|
||||
let radius = 3;
|
||||
|
||||
for( let i = 0; i < arrayLen; i++ ){
|
||||
ctx.beginPath();
|
||||
if(values[i] === null) continue;
|
||||
let scale = bounds.height - ((largest >= 0)?(bounds.bottom - bounds.xAxis):0);
|
||||
let extreme = (largest<=0)?Math.abs(smallest):Math.abs(largest);
|
||||
let x = bounds.left + bounds.width / (arrayLen - 1) * i;
|
||||
let y = (bounds.xAxis - values[i] / extreme * scale);
|
||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
|
||||
let new_object = new Circle(values[i], name, x, y, radius);
|
||||
objects.push(new_object);
|
||||
}
|
||||
}
|
||||
|
||||
function drawSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color ){
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX,centerY);
|
||||
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
function getBounds(canvas, graphMargin) {
|
||||
return {
|
||||
top: graphMargin,
|
||||
bottom: canvas.height - graphMargin,
|
||||
left: graphMargin,
|
||||
right: canvas.width - graphMargin,
|
||||
height: canvas.height - 2*graphMargin,
|
||||
width: canvas.width - 2*graphMargin,
|
||||
xAxis: canvas.height - graphMargin
|
||||
};
|
||||
}
|
||||
|
||||
function drawPieChart(canvas, data, graphSettings) {
|
||||
|
||||
let ctx = canvas.getContext("2d");
|
||||
let index = 0;
|
||||
let start_angle = 0;
|
||||
let total_value = 0;
|
||||
let bounds = getBounds(canvas, graphSettings.margin);
|
||||
|
||||
|
||||
data.forEach(function (categ) {
|
||||
let val = categ.values[0];
|
||||
if (val !== null)
|
||||
total_value += val;
|
||||
});
|
||||
|
||||
data.forEach(function (categ) {
|
||||
let val = categ.values[0];
|
||||
let slice_angle = 2 * Math.PI * val / total_value;
|
||||
|
||||
let x = canvas.width/2;
|
||||
let y = canvas.height/2;
|
||||
let r = Math.min(bounds.width/2, bounds.height/2);
|
||||
let end_angle = start_angle + slice_angle;
|
||||
|
||||
drawSlice(ctx, x, y, r, start_angle, end_angle, categ.color);
|
||||
let new_object = new PieSlice(val + " (" + Math.round(val/total_value*100) + "%)", categ.name, x, y, r, start_angle, end_angle);
|
||||
objects.push(new_object);
|
||||
|
||||
start_angle = end_angle;
|
||||
index++;
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function drawPointChart(canvas, data, graphSettings){
|
||||
let ctx = canvas.getContext( "2d" );
|
||||
|
||||
let bounds = getBounds(canvas, graphSettings.margin);
|
||||
let largest = getLargest(data);
|
||||
let smallest = getSmallest(data);
|
||||
|
||||
if (smallest < 0)
|
||||
bounds.xAxis = bounds.bottom - (bounds.height / (((largest<=0)?0:Math.abs(largest)) + Math.abs(smallest)) * Math.abs(smallest));
|
||||
let arrayLen = data[0].values.length;
|
||||
|
||||
drawAxis(bounds, largest, smallest, arrayLen, ctx, graphSettings);
|
||||
|
||||
data.display_points = true;
|
||||
data.forEach(function (categ) {
|
||||
//Points
|
||||
if (graphSettings.display_points)
|
||||
drawPoints(ctx, bounds, categ.values, categ.name, arrayLen, largest, categ.color);
|
||||
});
|
||||
}
|
||||
|
||||
function drawLineChart(canvas, data, graphSettings){
|
||||
let ctx = canvas.getContext( "2d" );
|
||||
|
||||
let bounds = getBounds(canvas, graphSettings.margin);
|
||||
let largest = getLargest(data);
|
||||
let smallest = getSmallest(data);
|
||||
|
||||
if (smallest < 0)
|
||||
bounds.xAxis = bounds.bottom - (bounds.height / (((largest<=0)?0:Math.abs(largest)) + Math.abs(smallest)) * Math.abs(smallest));
|
||||
let arrayLen = data[0].values.length;
|
||||
|
||||
drawAxis(bounds, largest, smallest, arrayLen, ctx, graphSettings);
|
||||
|
||||
data.forEach(function (categ) {
|
||||
//Lines
|
||||
ctx.beginPath();
|
||||
ctx.lineJoin = "round";
|
||||
ctx.strokeStyle = categ.color;
|
||||
|
||||
for (let i = 0; i < arrayLen; i++) {
|
||||
if (categ.values[i] === null) continue;
|
||||
|
||||
let scale = bounds.height - ((largest >= 0)?(bounds.bottom - bounds.xAxis):0);
|
||||
let extreme = (largest<=0)?Math.abs(smallest):Math.abs(largest);
|
||||
let x = bounds.left + bounds.width / (arrayLen - 1) * i;
|
||||
let y = (bounds.xAxis - categ.values[i] / extreme * scale);
|
||||
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
|
||||
//Points
|
||||
if (graphSettings.display_points)
|
||||
drawPoints(ctx, bounds, categ.values, categ.name, arrayLen, largest, categ.color);
|
||||
});
|
||||
}
|
||||
|
||||
function drawAreaChart(canvas, data, graphSettings){
|
||||
let ctx = canvas.getContext( "2d" );
|
||||
|
||||
let bounds = getBounds(canvas, graphSettings.margin);
|
||||
let largest = getLargest(data);
|
||||
let smallest = getSmallest(data);
|
||||
|
||||
if (smallest < 0)
|
||||
bounds.xAxis = bounds.bottom - (bounds.height / (((largest<=0)?0:Math.abs(largest)) + Math.abs(smallest)) * Math.abs(smallest));
|
||||
let arrayLen = data[0].values.length;
|
||||
|
||||
drawAxis(bounds, largest, smallest, arrayLen, ctx, graphSettings);
|
||||
|
||||
data.forEach(function (categ) {
|
||||
//Lines
|
||||
ctx.beginPath();
|
||||
ctx.lineJoin = "round";
|
||||
ctx.strokeStyle = categ.color;
|
||||
|
||||
let xmax = 0;
|
||||
for (let i = 0; i < arrayLen; i++) {
|
||||
if (categ.values[i] === null) continue;
|
||||
let scale = bounds.height - ((largest >= 0)?(bounds.bottom - bounds.xAxis):0);
|
||||
let extreme = (largest<=0)?Math.abs(smallest):Math.abs(largest);
|
||||
let x = bounds.left + bounds.width / (arrayLen - 1) * i;
|
||||
let y = (bounds.xAxis - categ.values[i] / extreme * scale);
|
||||
xmax = x;
|
||||
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
ctx.lineTo(xmax, bounds.xAxis);
|
||||
ctx.lineTo(bounds.left, bounds.xAxis);
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.fillStyle = categ.color;
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
ctx.globalAlpha = 1;
|
||||
|
||||
//Points
|
||||
if (graphSettings.display_points)
|
||||
drawPoints(ctx, bounds, categ.values, categ.name, arrayLen, largest, categ.color);
|
||||
});
|
||||
}
|
||||
|
||||
function drawBarChart(canvas, data, graphSettings) {
|
||||
let ctx = canvas.getContext( "2d" );
|
||||
|
||||
let bounds = getBounds(canvas, graphSettings.margin);
|
||||
ctx.shadowOffsetX = 15;
|
||||
ctx.shadowOffsetY = 15;
|
||||
ctx.shadowBlur = 4;
|
||||
|
||||
let largest = getLargest(data);
|
||||
let barCount = data.length;
|
||||
let dataCount = data[0].values.length;
|
||||
|
||||
let smallest = getSmallest(data);
|
||||
|
||||
if (smallest < 0)
|
||||
bounds.xAxis = bounds.bottom - (bounds.height / (((largest<=0)?0:Math.abs(largest)) + Math.abs(smallest)) * Math.abs(smallest));
|
||||
|
||||
drawAxis(bounds, largest, smallest, dataCount, ctx, graphSettings, false);
|
||||
|
||||
let size = bounds.width / dataCount;
|
||||
let innerSize = size * 0.8;
|
||||
let bar_width = innerSize * 0.7 / barCount;
|
||||
|
||||
for (let i = 0; i < dataCount; i++) {
|
||||
let num = 0;
|
||||
data.forEach(function (categ) {
|
||||
ctx.beginPath();
|
||||
let value = categ.values[i];
|
||||
let left = bounds.left + (size * (i + 0.15) + (innerSize * num / barCount));
|
||||
let scale = bounds.height - ((largest >= 0)?(bounds.bottom - bounds.xAxis):0);
|
||||
let extreme = (largest<=0)?Math.abs(smallest):Math.abs(largest);
|
||||
let bar_height = value / extreme * scale;
|
||||
let top = (bounds.xAxis - categ.values[i] / extreme * scale);
|
||||
|
||||
ctx.fillStyle = categ.color;
|
||||
ctx.fillRect(left, top, bar_width, bar_height);
|
||||
|
||||
//x value
|
||||
if (num === 0){
|
||||
let text = (i + 1).toString();
|
||||
if (graphSettings.custom_x_values !== ""){
|
||||
text = graphSettings.custom_x_values.split(';')[i];
|
||||
}
|
||||
ctx.font = "16px Arial";
|
||||
ctx.fillStyle = "black";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(text, bounds.width / dataCount * i + size / 2 + bounds.left, bounds.bottom + 15);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
num++;
|
||||
let new_object = new Rect(value, categ.name, left, top, bar_width, bar_height);
|
||||
objects.push(new_object);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function stackedChart(canvas, data, graphSettings) {
|
||||
let ctx = canvas.getContext( "2d" );
|
||||
|
||||
let bounds = getBounds(canvas, graphSettings.margin);
|
||||
ctx.shadowOffsetX = 15;
|
||||
ctx.shadowOffsetY = 15;
|
||||
ctx.shadowBlur = 4;
|
||||
|
||||
let dataCount = data[0].values.length;
|
||||
|
||||
let largest = 0;
|
||||
for (let i = 0; i < dataCount; i++){
|
||||
let sum = 0;
|
||||
data.forEach(function (categ) {
|
||||
categ.values[i] = Math.abs(categ.values[i]);
|
||||
sum += categ.values[i];
|
||||
});
|
||||
if (sum > largest) largest = sum;
|
||||
}
|
||||
|
||||
let smallest = getSmallest(data);
|
||||
if (smallest < 0)
|
||||
bounds.xAxis = bounds.bottom - (bounds.height / (((largest<=0)?0:Math.abs(largest)) + Math.abs(smallest)) * Math.abs(smallest));
|
||||
|
||||
drawAxis(bounds, largest, smallest, dataCount, ctx, graphSettings, false);
|
||||
|
||||
let size = bounds.width / dataCount;
|
||||
let bar_width = size * 0.7;
|
||||
|
||||
for (let i = 0; i < dataCount; i++) {
|
||||
let last_top = bounds.xAxis;
|
||||
let num = 0;
|
||||
data.forEach(function (categ) {
|
||||
ctx.beginPath();
|
||||
|
||||
let value = categ.values[i];
|
||||
let bar_height = value / largest * bounds.height;
|
||||
let left = bounds.left + (size * (i + 0.15));
|
||||
let top = last_top - bar_height;
|
||||
|
||||
ctx.fillStyle = categ.color;
|
||||
ctx.fillRect(left, top, bar_width, bar_height);
|
||||
|
||||
last_top = top;
|
||||
|
||||
//x value
|
||||
if (num === 0){
|
||||
let text = (i + 1).toString();
|
||||
if (graphSettings.custom_x_values !== ""){
|
||||
text = graphSettings.custom_x_values.split(';')[i];
|
||||
}
|
||||
ctx.font = "16px Arial";
|
||||
ctx.fillStyle = "black";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(text, bounds.width / dataCount * i + size / 2 + bounds.left, bounds.bottom + 15);
|
||||
ctx.stroke();
|
||||
}
|
||||
num++;
|
||||
|
||||
let new_object = new Rect(value, categ.name, left, top, bar_width, bar_height);
|
||||
objects.push(new_object);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function resizeCanvas(canvas, parent, legendHeight = 0, bgColor) {
|
||||
|
||||
if (legendHeight > 0) legendHeight += 3.1;
|
||||
//set size
|
||||
canvas.style.width = parent.clientWidth.toString();
|
||||
canvas.style.height = (parent.clientHeight - legendHeight).toString();
|
||||
canvas.width = parent.clientWidth;
|
||||
canvas.height = parent.clientHeight - legendHeight;
|
||||
|
||||
//reset canvas color
|
||||
let ctx = canvas.getContext( "2d" );
|
||||
if (bgColor == null){
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
} else {
|
||||
ctx.fillStyle = bgColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLegend(displayLegend, data) {
|
||||
if (displayLegend){
|
||||
let legendHTML = "";
|
||||
data.forEach(function (categ) {
|
||||
legendHTML += "<div><span style='display:inline-block;width:20px;background-color:" + categ.color + ";'> </span> "+categ.name+"</div>";
|
||||
});
|
||||
|
||||
legend.innerHTML = legendHTML;
|
||||
legend.style.display = "block";
|
||||
} else {
|
||||
legend.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function drawChart(graphSettings, data) {
|
||||
updateLegend(graphSettings.display_legend, data);
|
||||
resizeCanvas(canvas, parent, legend.offsetHeight, graphSettings.b_color);
|
||||
objects = [];
|
||||
|
||||
//Choose the correct graph
|
||||
switch (graphSettings.type) {
|
||||
case "point":
|
||||
drawPointChart(canvas, data, graphSettings);
|
||||
break;
|
||||
case "line":
|
||||
drawLineChart(canvas, data, graphSettings);
|
||||
break;
|
||||
case "pie":
|
||||
drawPieChart(canvas, data, graphSettings);
|
||||
break;
|
||||
case "bar":
|
||||
drawBarChart(canvas, data, graphSettings);
|
||||
break;
|
||||
case "area":
|
||||
drawAreaChart(canvas, data, graphSettings);
|
||||
break;
|
||||
case "stacked":
|
||||
stackedChart(canvas, data, graphSettings);
|
||||
break;
|
||||
}
|
||||
|
||||
if (graphSettings.display_title)
|
||||
drawTitle(canvas, graphSettings);
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}
|
||||
Chart
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div id="graphDiv">
|
||||
<canvas id="graphCanvas"></canvas>
|
||||
<div id="graphLegend"></div>
|
||||
<div id="dataDiv"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
<script>
|
||||
let canvas = document.getElementById("graphCanvas");
|
||||
let parent = document.getElementById("graphDiv");
|
||||
let legend = document.getElementById("graphLegend");
|
||||
let dataDiv = document.getElementById("dataDiv");
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const code = urlParams.get('code');
|
||||
let data = [];
|
||||
let graphSettings = [];
|
||||
|
||||
//Načtení dat
|
||||
/*function load_data() {
|
||||
$.ajax({
|
||||
url: "php/load_data.php",
|
||||
type: "post",
|
||||
dataType: "json",
|
||||
data: {code: code},
|
||||
success: function (result) {
|
||||
data = JSON.parse(result.data);
|
||||
graphSettings = JSON.parse(result.settings);
|
||||
|
||||
if (data !== null) {
|
||||
|
||||
drawChart(graphSettings, data);
|
||||
} else {
|
||||
parent.innerHTML = "graph not found.";
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
load_data();*/
|
||||
|
||||
//Click
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const pos = {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
};
|
||||
let obj = checkHit(pos);
|
||||
|
||||
//show point value
|
||||
if (obj !== null){
|
||||
let divHitBox = dataDiv;
|
||||
divHitBox.style.display = "block";
|
||||
|
||||
if (pos.x + divHitBox.clientWidth <= parent.clientWidth - 2){
|
||||
divHitBox.style.left = pos.x + "px";
|
||||
} else {
|
||||
dataDiv.style.left = pos.x - divHitBox.clientWidth + "px";
|
||||
}
|
||||
|
||||
if (pos.y + divHitBox.clientHeight <= parent.clientHeight - 2){
|
||||
dataDiv.style.top = pos.y + "px";
|
||||
} else {
|
||||
dataDiv.style.top = pos.y - divHitBox.clientHeight + "px";
|
||||
}
|
||||
dataDiv.style.display = "block";
|
||||
dataDiv.innerHTML = "<b>" + obj.name + "</b><br><p>" + obj.value + "</p>";
|
||||
}
|
||||
else {
|
||||
dataDiv.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
//Resize
|
||||
$(window).on('resize', function(){
|
||||
drawChart(graphSettings, data);
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue