JavaScript Google Chart Diagramm als Bild

Pfandfinder

Lieutenant
Registriert
Nov. 2020
Beiträge
642
hi,

kann mir wer erklären wie ich ein Google Chart von hier als Bild ausgebe ? https://developers.google.com/chart/interactive/docs/gallery/linechart

In der Doku steht die Funktion getImageURI und ein Link mit Script. das hab ich einfach ganz unten eingefügt, es erscheint aber kein Bild.

Javascript:
<script>
    var my_div = document.getElementById('curve_chart');
    var my_chart = new google.visualization.ChartType(curve_chart);

    google.visualization.events.addListener(my_chart, 'ready', function () {
      my_div.innerHTML = '<img src="' + my_chart.getImageURI() + '">';
    });

    my_chart.draw(data);
</script>
 
das ganze wird vermutlich mit einem canvas object erstellt. DH wenn du das verwendete canvas Element im Inspector findest kannst du es auch direct selektieren und die DataURL erhalten:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Ansonsten sollte in der Konsole ein Fehler stehen, lt https://developers.google.com/chart/interactive/docs/printing schaut es richtig aus.
Mit einem gepflegten console.log('huhu'); im event listener kannst du auch schauen ob das ready event von my_chart gefeuert wird.

gibt es den div#curve_chart eh auch?
 
Auf jeden Fall würde ich auch mit der Konsole, wie @netzgestaltung geschrieben hat, starten.
Ich bin mir nicht hundert Prozent sicher, aber ich glaube, dass getImageURI, Teil der alten API war. Diese ist mittlerweile nicht mehr zugänglich.
 
ah - hab einen fehler gefunden:
zeile var my_chart hatte das falsche argument curve_chart - vermutlich hast du die variable später auf my_div umbenannt.
Die Konsole sollte einen Fehler werfen "variable curve_chart undefined" oder so ähnlich.

Javascript:
<script>
    var my_div = document.getElementById('curve_chart');
    var my_chart = new google.visualization.ChartType(my_div);

    google.visualization.events.addListener(my_chart, 'ready', function () {
      my_div.innerHTML = '<img src="' + my_chart.getImageURI() + '">';
    });

    my_chart.draw(data);
</script>
 
stimmt.

ich habe jetzt mal das complete example genommen, das geht. aber das Diagramm ist jetzt so ein Balkendiagramm. wie ändere ich das jetzt zu Liniendiagramm ?

also geht es um dieses Script:
Javascript:
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Element', 'Density', { role: 'style' }],
        ['Copper', 8.94, '#b87333', ],
        ['Silver', 10.49, 'silver'],
        ['Gold', 19.30, 'gold'],
        ['Platinum', 21.45, 'color: #e5e4e2' ]
      ]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        bar: {groupWidth: '95%'},
        legend: 'none',
      };

      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.ColumnChart(chart_div);

      // Wait for the chart to finish drawing before calling the getImageURI() method.
      google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        console.log(chart_div.innerHTML);
      });

      chart.draw(data, options);

  }
  </script>

<div id='chart_div'></div>
Ergänzung ()

edit: habs gefunden. Aber wieso kann ich das nicht von einer 2. Datei aus als Bild einbinden lassen ?
HTML:
<img src="generate.php">

man sieht nur das "not found" Bild, der link ist aber richtig, öffne ich den im Browser erscheint ja das diagramm.
 
Zuletzt bearbeitet:
Vermutlich weil .php kein gültiger src-Type ist: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Supported_image_formats
Ist user-Agent abhängig, aber scheint prinzipiell (sinnigerweise) nur für Image-Filetypes zu gehen oder eben base64.
Kannst du denn nicht "image.jpg" (oder Ähnliches) nehmen und im Web Server nen internen redirect bzw Alias machen?
Dann bekommt der Browser gar nicht mit, dass ein php Script aufgerufen wird und du hättest es mit minimalen Anpassungen gelöst.
 
Zurück
Oben