[Google Charts] Conversion de plusieurs Googlechart en un clique

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:

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:

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 .:calim2: