jmc-123/PivotTable_template.html.jinja2

## PivotTable_template.html.jinja2
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>PivotTable.js</title>

        <!-- external libs from cdnjs -->
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>


        <link rel="stylesheet" type="text/css"
            href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.19.0/pivot.min.css">
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.19.0/pivot.min.js"></script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.19.0/d3_renderers.min.js"></script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.19.0/c3_renderers.min.js"></script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.19.0/export_renderers.min.js"></script>

        <style>
            body {
                font-family: Verdana;
                font-size: 20px
            }

            .node {
                border: solid 1px white;
                font: 10px sans-serif;
                line-height: 12px;
                overflow: hidden;
                position: absolute;
                text-indent: 2px;
            }

            .c3-line,
            .c3-focused {
                stroke-width: 3px !important;
            }

            .c3-bar {
                stroke: white !important;
                stroke-width: 1;
            }

            .c3 text {
                font-size: 12px;
                color: grey;
            }

            .tick line {
                stroke: white;
            }

            .c3-axis path {
                stroke: grey;
            }

            .c3-circle {
                opacity: 1 !important;
            }

            .c3-xgrid-focus {
                visibility: hidden !important;
            }
        </style>
    </head>

    <body>
        <script type="text/javascript">
            $(function () {

                $("#output").pivotUI(
                    $.csv.toArrays($("#output").text())
                    , $.extend({
                        renderers: $.extend(
                            $.pivotUtilities.renderers,
                            $.pivotUtilities.c3_renderers,
                            $.pivotUtilities.d3_renderers,
                            $.pivotUtilities.export_renderers
                        ),
                        hiddenAttributes: [""]
                    }
                        , {
                            onRefresh: function (config) {
                                var config_copy = JSON.parse(JSON.stringify(config));
                                //delete some values which are functions
                                delete config_copy["aggregators"];
                                delete config_copy["renderers"];
                                //delete some bulky default values
                                delete config_copy["rendererOptions"];
                                delete config_copy["localeStrings"];
                                $("#output2").text(JSON.stringify(config_copy, undefined, 2));
                                $(".pvtTable").css({
                                    fontSize: 20
                                });

                            }
                        }
                        , {{kwargs}}
                        , {{json_kwargs}})
                ).show();
            });
        </script>
        <div id="output" style="display: none;">{{csv}}</div>

        <textarea id="output2" style="float: left; width: 0px; height: 0px; margin: 0px; opacity:0;" readonly>
        </textarea>

        <button onclick="copyTextFunction()">Copy settings</button>
        <script>
            function copyTextFunction() {
                var copyText = document.getElementById("output2");
                copyText.select();
                document.execCommand("copy");
            }
        </script>

 <button onclick="exportTableToExcel()">exportTableToExcel</button>

<script type="text/javascript">
  function exportTableToExcel(tableID, filename = ''){
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

filename = filename?filename+'.xls':'excel_data.xls';
downloadLink = document.createElement("a");

document.body.appendChild(downloadLink);
console.log(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
  type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{

downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

downloadLink.download = filename;

downloadLink.click();
}

}
  </script>
    </body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>PivotTable.js</title>

	<!-- external libs from cdnjs -->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
	<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
	<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>


	<link rel="stylesheet" type="text/css"
	href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.19.0/pivot.min.css">
	<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.19.0/pivot.min.js"></script>
	<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.19.0/d3_renderers.min.js"></script>
	<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.19.0/c3_renderers.min.js"></script>
	<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.19.0/export_renderers.min.js"></script>

	<style>
	body {
	font-family: Verdana;
	font-size: 20px
	}

	.node {
	border: solid 1px white;
	font: 10px sans-serif;
	line-height: 12px;
	overflow: hidden;
	position: absolute;
	text-indent: 2px;
	}

	.c3-line,
	.c3-focused {
	stroke-width: 3px !important;
	}

	.c3-bar {
	stroke: white !important;
	stroke-width: 1;
	}

	.c3 text {
	font-size: 12px;
	color: grey;
	}

	.tick line {
	stroke: white;
	}

	.c3-axis path {
	stroke: grey;
	}

	.c3-circle {
	opacity: 1 !important;
	}

	.c3-xgrid-focus {
	visibility: hidden !important;
	}
	</style>
	</head>

	<body>
	<script type="text/javascript">
	$(function () {

	$("#output").pivotUI(
	$.csv.toArrays($("#output").text())
	, $.extend({
	renderers: $.extend(
	$.pivotUtilities.renderers,
	$.pivotUtilities.c3_renderers,
	$.pivotUtilities.d3_renderers,
	$.pivotUtilities.export_renderers
	),
	hiddenAttributes: [""]
	}
	, {
	onRefresh: function (config) {
	var config_copy = JSON.parse(JSON.stringify(config));
	//delete some values which are functions
	delete config_copy["aggregators"];
	delete config_copy["renderers"];
	//delete some bulky default values
	delete config_copy["rendererOptions"];
	delete config_copy["localeStrings"];
	$("#output2").text(JSON.stringify(config_copy, undefined, 2));
	$(".pvtTable").css({
	fontSize: 20
	});

	}
	}
	, {{kwargs}}
	, {{json_kwargs}})
	).show();
	});
	</script>
	<div id="output" style="display: none;">{{csv}}</div>

	<textarea id="output2" style="float: left; width: 0px; height: 0px; margin: 0px; opacity:0;" readonly>
	</textarea>

	<button onclick="copyTextFunction()">Copy settings</button>
	<script>
	function copyTextFunction() {
	var copyText = document.getElementById("output2");
	copyText.select();
	document.execCommand("copy");
	}
	</script>

	<button onclick="exportTableToExcel()">exportTableToExcel</button>

	<script type="text/javascript">
	function exportTableToExcel(tableID, filename = ''){
	var downloadLink;
	var dataType = 'application/vnd.ms-excel';
	var tableSelect = document.getElementById(tableID);
	var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

	filename = filename?filename+'.xls':'excel_data.xls';
	downloadLink = document.createElement("a");

	document.body.appendChild(downloadLink);
	console.log(downloadLink);
	if(navigator.msSaveOrOpenBlob){
	var blob = new Blob(['\ufeff', tableHTML], {
	type: dataType
	});
	navigator.msSaveOrOpenBlob( blob, filename);
	}else{

	downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

	downloadLink.download = filename;

	downloadLink.click();
	}

	}
	</script>
	</body>

	</html>