HTML
<!-- W3.CSS -->
<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
<!-- Icons for sortable column heads -->
<style>
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
content: " \25B4\25BE"
}
</style>
<!-- Small supporting library -->
<script type='text/javascript' src='https://stats.chileru.org/public/stat_chileru.js'></script>
<!-- Google chart support -->
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<!-- Sortable tables support -->
<script type='text/javascript' src='https://stats.chileru.org/public/ard_public/sorttable.js'></script>
<script>
// Load basic Google charts
google.charts.load('current', {'packages':['corechart']});
// Optional. Look for more details:
// https://developers.google.com/chart/interactive/docs/gallery/piechart
chartOptions = {
is3D: true,
chartArea:{left:20,top:20,width:'100%',height:'100%'}
};
window.onload = function() {
objRequest = new StatsChileru_Request();
// Table. Mandatory! One of: total, edad, edadm, edadf, edad100, edadm100, edadf100, pais, region, comuna, profesion, actividad, estudios.
objRequest.setT('region');
// Country
objRequest.setP('Venezuela');
// Year
//objRequest.setA('2021');
// Region
//objRequest.setR('Metropolitana');
// Commune
//objRequest.setC('Santiago');
// Visa type - t or d.
objRequest.setV('t');
objRequest.requestAPI('callbackStatsChileRU');
}
function callbackStatsChileRU(objResponse){
// == Chart
// Chart columns. Start from 0.
arrChartColumns = [1, 2];
objResponse.chartDataTable( arrChartColumns );
chartTitle = objResponse.getRequestParametersText();
objResponse.drawChart('StatChart', chartTitle, 'PieChart', chartOptions);
// == Table
// Make table sortable (except 1st column);
objResponse.setSortable();
// Description.
StatTable = objResponse.getRequestParametersHTML();
// Optionally set heading tag, default h2.
StatTable += objResponse.getHeading('h3');
// Optionally set style and class for the table.
StatTable += objResponse.getTable('max-width:500px', 'w3-table-all');
StatTable += objResponse.getTableComment();
objResponse.showTable(StatTable, 'StatTable');
}
</script>
</head>
<body>
<h1>Pie chart with sortable table</h1>
<!-- You should specify width and height explicitely! -->
<div id='StatChart' style='width:500px;height:400px;'> </div>
<div id='StatTable'> </div>
</body>
Wordpress
Go to Apariencia - Editor. Edit "Funciones de tema (functions.php)". Or use any appropriate plugin.
function stats_chileru() {
// Appears in post No. 1
if (is_single ('1')) {
?>
...JAVASCRIPT GOES HERE...
<?php
}
}
add_action('wp_head', 'stats_chileru');