2012-07-02 13 views
11

Ich versuche Google-Diagramme zu verwenden, um Bilder von Diagrammen in die E-Mails einzubetten. Also Jeder Benutzer wird ein einzigartiges Diagramm haben.Google Charts als Bild

Können wir die API verwenden und eine eindeutige URL einbetten, die die Diagramme darstellt und ein Bild an den E-Mail-Client liefert.

+0

die Bilddiagramme Funktion von Google Charts funktioniert ein Leckerbissen, siehe http://datamakessense.com/kpi-emails-with-google-charts-url-parameters – AdrianBR

Antwort

4

Es ist möglich, eine URL zu generieren, die ein Bild eines Diagramms unter Verwendung der Google Chart Wizard rendern wird. Allerdings ist dieser Service vor kurzem (April glaube ich) da veraltet. Es funktioniert immer noch gut, aber für eine langfristige Lösung müssen Sie möglicherweise mit einer anderen Methode kommen.

bearbeiten

Eine andere Methode wäre, um das Bild zu erzeugen und sie auf Ihren Server speichern, bevor die E-Mail zu senden. Sie können dies tun, indem Sie eine Seite auf Ihrem Server einrichten, die das Diagramm durch Parsen eines bestimmten Slugs generiert, und wenn das Diagramm geladen ist, senden Sie eine POST-Anfrage mit den Bilddaten. Sie können auf die Daten zugreifen URI durch eine versteckte Leinwand mit (HTML5 erforderlich ist) und das canvg javascript Plugin:

chart_area = document.getElementById("chart_div").getElementsByTagName('iframe')[0].contentDocument.getElementById("chartArea"); 
svg = chart_area.innerHTML; 
canvas = document.getElementById("hidden_canvas"); 
canvas.setAttribute('width', chart_area.offsetWidth); 
canvas.setAttribute('height', chart_area.offsetHeight); 

canvg(canvas, svg); 
image_data_uri = canvas.toDataURL("image/png"); 
+1

andere Alternative? –

7

Sie eine PNG-Version des Diagramms erhalten kann chart.getImageURI() wie folgt verwendet:

werden muss, nachdem das Diagramm gezeichnet wurde, also im ready Ereignis!

var my_div = document.getElementById('my_div'); 
var my_chart = new google.visualization.ChartType(chart_div); 

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

my_chart.draw(data); 
1

ein wenig zu spät zur Party, aber wir nur https://ChartURL.com exakt für diesen Bedarf gebaut, weil trotz dieser Frage alt fast 3,5 Jahre, die beste Lösung, da draußen, bis ChartURL wurde das Bild Charts API Google veraltet :)

Hoffe das hilft jemand aus!