Skip to content

Instantly share code, notes, and snippets.

@cham11ng
Last active June 26, 2017 14:51
Show Gist options
  • Save cham11ng/4255cdfd80559e4abc9d7748a849090f to your computer and use it in GitHub Desktop.
Save cham11ng/4255cdfd80559e4abc9d7748a849090f to your computer and use it in GitHub Desktop.
Snippet Collection
<html>
<head>
<title>Chart.js</title>
<style type="text/css">
.chart {
height: 300px;
width: 500px;
}
</style>
</head>
<body>
<div class="chart">
<canvas id="myChart" class="chart"></canvas>
<a href="#" id="btn-download">Download JPEG</a>
<a href="#" id="btn-download1">Download PNG</a>
</div>
<script type="text/javascript" src="Chart.bundle.js"></script>
<script>
var ctx = document.getElementById("myChart");
Chart.plugins.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
chart.options.tooltips.enabled = false;
}
},
beforeDraw: function(c) {
var ctx = c.chart.ctx;
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
if(!tooltip._active[0].hidden){
tooltip.initialize();
tooltip.update();
tooltip.pivot();
tooltip.transition(easing).draw();
}
});
chart.options.tooltips.enabled = false;
}
}
});
var myChart = new Chart(ctx, {
type: 'bar',
data: {
backgroundColor: "#fff",
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
showAllTooltips: true,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
var button = document.getElementById('btn-download');
button.addEventListener('click', function (e) {
var ctx = document.getElementById("myChart");
var dataURL = ctx.toDataURL('image/jpeg');
button.href = dataURL;
button.download = 'apple.jpeg'
});
var button1 = document.getElementById('btn-download1');
button1.addEventListener('click', function (e) {
var ctx = document.getElementById("myChart");
var dataURL = ctx.toDataURL('image/png');
button1.href = dataURL;
button1.download = 'apple.png'
});
</script>
</body>
</html>
<?php
$kmPerSqure = 0.00807482596958;
echo $kmPerSqure.'<br>';
$meterPerSquare = $kmPerSqure/(1000*1000);
echo $meterPerSquare;
$expValue = floor(log($meterPerSquare, 10));
echo '<br>';
echo '<br>'. sprintf('%.12f x 10<sup>%d</sup>', $meterPerSquare/pow(10,$expValue), $expValue);
echo '<br>'.number_format($meterPerSquare, 20, '.', '');;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment