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