Skip to content

Instantly share code, notes, and snippets.

@BoniWPy

BoniWPy/index.html

Created August 6, 2019 09:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save BoniWPy/0bcdb7b5c8469f3bb06fa64d7917fe02 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save BoniWPy/0bcdb7b5c8469f3bb06fa64d7917fe02 to your computer and use it in GitHub Desktop.
Download ZIP
vQdwjP
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="./Style.css" rel="stylesheet" type="text/css">
<link href="../Grid/Grid.css" rel="stylesheet" type="text/css">
<script src="../libraries/jquery.min.js"> </script>
<script src="../libraries/jquery-ui.js"> </script>
<link rel="stylesheet" href="../libraries/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<title>Reports</title>
<div id="table">
<div class="caption">
<div id="container" style="height: 350px"></div>
</div>
<div class="group">
<div class="row">
<div class="cell">
<div id="container1" style="height: 350px"></div>
</div>
<div class="cell right">
<div id="container2" style="height: 350px"></div>
</div>
</div>
</div>
</div>
<div id="buttonrow">
<button id="export2pdf">Export to PDF</button>
</div>
Raw
script.js
$(function () {
Highcharts.getSVG = function(charts,texts, options, callback) {
var svgArr = [],
top = 0,
width = 0,
newLine = false,
txt,txt1,txt2,txt3,txt10,txt11;
addSVG = function(svgres,i) {
// Grab width/height from exported chart
var svgWidth = +svgres.match(
/^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
)[1],
svgHeight = +svgres.match(
/^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
)[1],
// Offset the position of this chart in the final SVG
svg;
if (svgWidth > 900) {
if(i==5){
top = 1000;
svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')"');
}else{
svg = svgres.replace('<svg', '<g transform="translate(' + width + ', 0 )"');
}
top = Math.max(top, svgHeight);
} else {
if (newLine) {
if(i==4){
width = 800;
}
svg = svgres.replace('<svg', '<g transform="translate(' + width + ', ' + top + ')"');
top += svgHeight;
width += svgWidth;
newLine = false;
} else {
newLine = true;
if(i==5){
top = 1000;
svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
}else{
svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
}
top = Math.max(top, svgHeight);
width += svgWidth;
//width = Math.max(width, chart.chartWidth);
}
}
svg = svg.replace('</svg>', '</g>');
svgArr.push(svg);
txt = texts[i];
txt1 = '<svg width="350" height="75" viewBox="0 0 350 75"><rect x="10" y="80" width="300" height="40" style="fill: white; stroke:black;stroke-width:2"/><g style="overflow:hidden; font-size:14; font-family: Arial"></text><text x="20" y="95" style="fill: black">Demo 1 = </text></g><g style="overflow:hidden; font-size:14; font-family: Arial"></text><text x="20" y="112" style="fill: black">Test Case = </text></g></svg>' ;
txt2 = '<svg width="400" height="75" viewBox="0 0 350 75"><rect x="350" y="80" width="250" height="60" style="fill: white; stroke:black;stroke-width:2"/><g style="overflow:hidden; font-size:14; font-family: Arial"></text><text x="370" y="95" style="fill: black">Print [&Oslash; Copy]: </text></g><g style="overflow:hidden; font-size:14; font-family: Arial"></text><text x="370" y="112" style="fill: black">Check = </text><text x="370" y="129" style="fill: black">Subject = </text></g></svg>' ;
txt3 = '<svg width="400" height="75" viewBox="0 0 350 75"><rect x="950" y="80" width="250" height="60" style="fill: white; stroke:black;stroke-width:2"/><g style="overflow:hidden; font-size:14; font-family: Arial"></text><text x="970" y="95" style="fill: black">Total Number: </text></g><g style="overflow:hidden; font-size:14; font-family: Arial"></text><text x="970" y="112" style="fill: black">Vorjahr = </text><text x="970" y="129" style="fill: black">Count = </text></g></svg>' ;
txt10 = '<svg width="400" height="75" viewBox="0 0 350 75"><rect x="300" y="1005" width="250" height="40" style="fill: white; stroke:white;"/><g style="overflow:hidden; font-size:14; font-family: Arial"></text><text x="320" y="1022" style="fill: black">Internes KPI:</text></g>g style="overflow:hidden; font-size:12; font-family: Arial"></text><text x="920" y="1022" style="fill: black">test Case:</text></g></svg>' ;
txt11 = '<svg width="500" height="75" viewBox="0 0 500 75"><rect x="500" y="1005" width="200" height="30" style="fill: white; stroke:black;stroke-width:2"/><g style="overflow:hidden; font-size:14; font-family: Arial"></text><text x="505" y="1024" style="fill: black">&Oslash; Checklist = </text></g></svg>' ;
svgArr.push(txt);
svgArr.push(txt1);
svgArr.push(txt2);
svgArr.push(txt3);
svgArr.push(txt10);
svgArr.push(txt11);
},
exportChart = function(i) {
if (i === charts.length) {
// add SVG image to exported svg
//addSVG(svgImg.outerHTML);
//addSVG(svgImg.outerHTML);
//console.log(top+'-----'+width);
return callback('<svg height="2000" width="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
}
charts[i].getSVGForLocalExport(options, {}, function() {
console.log("Failed to get SVG");
}, function(svg) {
addSVG(svg,i);
return exportChart(i + 1); // Export next only when this SVG is received
});
};
// console.log(svgArr);
exportChart(0);
};
Highcharts.exportCharts = function(charts,texts, options) {
options = Highcharts.merge(Highcharts.getOptions().exporting, options);
// Get SVG asynchronously and then download the resulting SVG
Highcharts.getSVG(charts,texts, options, function(svg) {
Highcharts.downloadSVGLocal(svg, options, function() {
console.log("Failed to export on client side");
});
});
};
//Set global default options for all charts
Highcharts.setOptions({
exporting: {
fallbackToExportServer: false // Ensure the export happens on the client side or not at all
}
});
var chart1 = new Highcharts.chart('container', {
chart: {
width: 2000,
borderColor: 'black',
borderWidth: 1,
spacingTop: 70
},
xAxis: {
min: 0,
max: 11,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '',
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
title: {
style: {
color: '#333333',
fontSize: '22px'
},
text: "2011"
},
credits: {
enabled: false
},
legend: {
itemStyle: {
fontSize:'14px',
}
},
subtitle: {
style: {
color: '#333333',
fontSize: '16px'
},
text: 'Marks'
},
tooltip: {
shared: true
},
series: [{
name: '2011 -',
type: 'column',
color: '#4572A7',
data: [[0,1], [1,2],[2, 4], [3,5],[4, 6], [5, 2],[6, 5], [7, 6], [8, 3],[9, 7], [10, 9],[11, 1]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: true
},
{
name: '2011 - present',
type: 'spline',
color: 'orange',
dataLabels:'false',
data: [[0, 50], [1, 10],[2, 22], [3, 14],[4, 17], [5,60],[6, 44], [7, 50], [8, 30],[9, 20], [10, 40],[11, 20]],
marker: {
radius: 4
}
},
{
name: '2012',
type: 'spline',
color: 'red',
dataLabels:'false',
//data: [<?php echo $target;?>],
marker: {
radius: 4
}
}]
});
var texts = $('.HC');
$("#export2pdf").click(function() {
Highcharts.exportCharts([chart1,],texts, {
type: 'application/pdf',
filename: 'Feedback',
});
});
});
Raw
style.css
.container {
max-width: 600px;
min-width: 300px;
margin: 0 auto;
}
#buttonrow {
max-width: 600px;
min-width: 320px;
margin: 0 auto;
}
.highcharts-axis-line {
stroke-width: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment