[Google Charts] Conversion de plusieurs Googlechart en un clique

**dellus** · 25/04/2014, 15h34

Bonjour ,
je travail sur la réalisation d'un site web et je suis sur un problème qui me bloque un peu

alors aider moi svp.
le truc c'est que j'ai dans une page HTML un script qui creer des googlechart (piechart ,linechart) ensuite un autre script pour convertir c'est les graphe en pdf sauf que dans mon code j'ai deux boutons l'un pour m'afficher le premier graphe et le deuxieme pour m'afficher le second graphe je voudrais savoir si c'est possible d'avoir un seul bouton qui fait appel a ces deux fonction.

voila le code du premier script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
  <head>
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
    <script>
      function getImgData(chartContainer) {
        var chartArea = chartContainer.getElementsByTagName('iframe')[0].
          contentDocument.getElementById('chartArea');
        var svg = chartArea.innerHTML;
        var doc = chartContainer.ownerDocument;
        var canvas = doc.createElement('canvas');
        canvas.setAttribute('width', chartArea.offsetWidth);
        canvas.setAttribute('height', chartArea.offsetHeight);
 
 
        canvas.setAttribute(
            'style',
            'position: absolute; ' +
            'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
            'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
        doc.body.appendChild(canvas);
        canvg(canvas, svg);
        var imgData = canvas.toDataURL("image/png");
        canvas.parentNode.removeChild(canvas);
        return imgData;
      }
 
      function saveAsImg(chartContainer) {
        var imgData = getImgData(chartContainer);
 
        // Replacing the mime-type will force the browser to trigger a download
        // rather than displaying the image in the browser window.
        window.location = imgData.replace("image/png", "image/octet-stream");
      }
 
      function toImg(chartContainer, imgContainer) {
        var doc = chartContainer.ownerDocument;
        var img = doc.createElement('img');
        img.src = getImgData(chartContainer);
 
        while (imgContainer.firstChild) {
          imgContainer.removeChild(imgContainer.firstChild);
        }
        imgContainer.appendChild(img);
      }
    </script>

voila le script que je veux changer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        // Pie chart
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(5);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 11);
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 2);
        data.setValue(2, 0, 'Commute');
        data.setValue(2, 1, 2);
        data.setValue(3, 0, 'Watch TV');
        data.setValue(3, 1, 2);
        data.setValue(4, 0, 'Sleep');
        data.setValue(4, 1, 7);
 
        var chart = new google.visualization.PieChart(document.getElementById('pie_div'));
        chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
 
        // Line chart
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);
var chart = new google.visualization.LineChart(document.getElementById('line_div'));
        chart.draw(data, {width: 450, height: 300, title: 'Company Performance'});
 
</head>
  <body>
    <div id="img_div" style="position: fixed; top: 0; right: 0; z-index: 10; border: 1px solid #b9b9b9">
      Image will be placed here
    </div>
 
    <button onclick="saveAsImg(document.getElementById('pie_div'));">Save as PNG Image</button>
    <button onclick="toImg(document.getElementById('pie_div'), document.getElementById('img_div'));">Convert to image</button>
    <div id="pie_div"></div>
 
    <button onclick="saveAsImg(document.getElementById('line_div'));">Save as PNG Image</button>
    <button onclick="toImg(document.getElementById('line_div'), document.getElementById('img_div'));">Convert to image</button>
    <div id="line_div"></div> 
</body>
</html>

j'aimerai tellement trouver un moyen de faire appel au bouton de <onclick="toImg de('pie_div') et celui de (line_divà une seule fois pourqu'il s'affiche en meme temps dans une meme page.
Merci d'avance .

**NoSmoking** · 28/04/2014, 13h26

Bonjour,

...je voudrais savoir si c'est possible d'avoir un seul bouton qui fait appel a ces deux fonction.

rien ne t'empêche de sérialiser les fonctions, pour une vision iniline

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button onclick="fct_1(); fct_2();fct_3();">Sérialize Function</button>

le plus propre restant quand même d'attacher cela sur l'événement onclick de l'élément.

[Google Charts] Conversion de plusieurs Googlechart en un clique

APIs Google

Discussions similaires

Partager

Partager