Skip to content

GitLab

Commit 1a402a31 authored by Antoine Blanquet's avatar Antoine Blanquet
Browse files

First Commit Antoine Blanquet - Training Sparkline + Attempt Making SVG image... 

First Commit Antoine Blanquet - Training Sparkline + Attempt Making SVG image from a HTML document. Failed attempt. Current code retransmissions. On the right track
parent 08accb30
Expand all Hide whitespace changes
Inline Side-by-side
sandbox/sparkline/README.md 0 → 100644
View file @ 1a402a31
# Training Sparkline.
```
Envoyer un mail avec un résumé très précis . (Sparkline)
PB : envoyer par mail, possiblement pas possible avec du javascript. Alternative : Générer Sparkline, générer image et générer doc en svg.
```
TODO :
* Step1 : Produire des faux rapports (HTML) avec des éléments Sparkline. (entrainement utilisation de sparkline)
* Step2 : Générer image du rapport HTML en SVG
* Step3 : Produire les rapports HTML avec les véritables informations des gateways.
\ No newline at end of file
sandbox/sparkline/html2canvas.js 0 → 100644
View file @ 1a402a31
This diff is collapsed.
sandbox/sparkline/sparkline_test.html 0 → 100644
View file @ 1a402a31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></html>
<head>
<title>jQuery Sparklines Simple Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-family: helvetica, arial, san-serif; background-color: #fff; text-align: left; font-size: 0.9em; margin: 10em }
</style>
<script type="text/javascript" src="jQuery_Sparklines_Simple_Example_fichiers/jquery-1.js"></script>
<script type="text/javascript" src="jQuery_Sparklines_Simple_Example_fichiers/jquery.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
$(function() {
/** This code runs when everything has been loaded on the page */
/* Inline sparklines take their values from the contents of the tag */
$('.inlinesparkline').sparkline();
/* Sparklines can also take their values from the first argument
passed to the sparkline() function */
var myvalues = [10,8,5,7,4,4,1];
$('.dynamicsparkline').sparkline(myvalues);
/* The second argument gives options such as chart type */
$('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );
/* Use 'html' instead of an array of values to pass options
to a sparkline with data in the tag */
$('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
});
</script>
</head>
<body>
<div style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
<p id="capture">
Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<p>
Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>
</p>
<p>
Bar chart with dynamic data: <span class="dynamicbar">Loading..</span>
</p>
<p>
Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span>
</p>
</body>
<script type="text/javascript">
//* Step2 : Générer image du rapport HTML en SVG
// Test avec le rapport : jQuery_Sparklines_Simple_Example.html
//http://html2canvas.hertzen.com/getting-started/
//4 paragraphs différents : faisons 1 image pour chacun.
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
</script>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment