Reemplazo de Google Chart Images

La API Google Chart Images actualmente está en desuso y progtwigda para la jubilación el 20 de abril de 2015 .

¿Hay algún otro servicio gratuito que pueda reemplazarlo y permitir generar imágenes de gráficos simplemente proporcionando parámetros en la URL?

Aquí hay un ejemplo de una URL utilizada para generar una imagen PNG, puede usarse como una fuente HTML img y es útil especialmente en correos electrónicos:

http://chart.apis.google.com/chart?chxl=1:|Apr+04|Apr+05|Apr+06|Apr+07|Apr+08|Apr+09&chxp=1,0,20,40 , 60,80,100 & chxr = 0,0,45 & chxs = 1,676767,11,5,0, lt, 676767 & chxt = y, x & chs = 550×198 & cht = ls & chco = 3366CC, FF9900 & chds = 0,45,0,45 & chd = t: 7,12, 11,9,13,7 | 11,26,45,24,22,27 & chdl = Visitas ++++ | Página + Vistas y chdlp = t && chdls = 333333,16 & chg = 100,20,0,0 & chls = 4 | 2

Esto producirá la siguiente imagen que se puede agregar fácilmente a través de una etiqueta y es compatible con todos los clientes de navegador y correo electrónico.

Imagen de la API de Google Charts

Después de este anuncio, hicimos un reemplazo inmediato para Google Image Charts 👍 y añadimos animación gif en la parte superior 🚀 (¡las animaciones de los gráficos en los correos electrónicos son increíbles!).

Se llama gráficos de imágenes. Ya no hay dolor en la representación del gráfico del lado del servidor, no hay problemas de escalado, es increíblemente rápido, 1 URL = 1 gráfico de imagen.

enter image description here

http://www.jfree.org/eastwood/ es una implementación de código abierto de la API google api. No es 100% fiel, pero fue lo suficientemente cerca para mí.

Mi equipo en Ramen recientemente construyó exactamente esto. Se llama ChartURL . No es para siempre libre, como es la API de Google Charts, pero hay un nivel gratuito bastante generoso.

Te permite construir URL de dos maneras. Primero, puedes encriptar los datos en la URL. Usamos el cifrado para fines contables (ya que no es para siempre). En ambos casos, codificas un template_slug y tus datos en la URL. El template_slug es una representación de cadena de una configuración de gráfico que puede modificar, previsualizar y guardar dentro de su cuenta en ChartURL.com. De modo que puede tener email-bar-chart-1 y email-bar-chart-2 y timeseries-signups cada uno con su propio estilo / configuración, y luego solo enviar los datos que desea graficar dentro de esa plantilla.

Aquí hay un ejemplo de generar una URL en ruby:

 # This is a working example. View fully commented version here: # https://gist.github.com/ryana/055414a4804806263b82 require 'json' require 'openssl' require 'base64' require 'cgi' ENCRYPT_KEY = "dek-d7a46236eda961a6c3c18ffcc6b077ba87d27e9ae85f7842c6d427c265dd5f69d5131308d93332353d4a55a4b1160fcf516515a4a9f0aa50fbf2d7a2e7d0f1c5" ENCRYPT_KEY_DIGEST = KEY_DIGEST = OpenSSL::Digest::SHA256.new(ENCRYPT_KEY).digest PROJECT_TOKEN = "dt-RwYN" def charturl_url(template_slug, data) json = {options: data}.to_json cipher = OpenSSL::Cipher.new 'AES-256-CBC' cipher.encrypt iv = cipher.random_iv cipher.key = ENCRYPT_KEY_DIGEST encrypted_json = cipher.update(json) + cipher.final iv_for_url = CGI.escape(Base64.encode64(iv)) data_for_url = CGI.escape(Base64.encode64(encrypted_json)) "https://charturl.com/i/#{PROJECT_TOKEN}/#{template_slug}/#{iv_for_url}/#{data_for_url}" end # Call our helper url = charturl_url("weekly-activity", data: {columns: [["This Week", 10,12,41,9,14,15,15], ["Last Week", 9,14,21,21,20,3,5]]}) #=> https://charturl.com/i/dt-RwYN/weekly-activity/nEPfObOZ3zTivXZqri8ZLA%3D%3D%0A/7X6WrBHEdRcnutV0fU0sN8s9mHFGkkRr%2FZYJwb43p8PDzAJvGWd37zi6ro70%0AVJd9f%2FkSIq2dmJzGe%2BW6CSlpUIrhXHXogvXd%2B%2Fk4VOS%2BTSlnMBwKOSJJNpGZ%0AVrLZd%2Fgq1mSbiXQnc%2FydiTVcGL2DaA%3D%3D%0A 

Debido a que las URL tienen un límite de caracteres, también proporcionamos una API que le permite publicar datos y le devolveremos una URL breve:

 # This is a working example. View fully commented version here: # https://gist.github.com/ryana/d37fccd7af3c6c409164/ require 'json' require 'typhoeus' API_KEY = "dak-55045dac-bb35-40ac-80c8-874ab71c6f83" def charturl_url(template_slug, options) url = "https://charturl.com/short-urls.json?api_key=#{API_KEY}" headers = {'Content-Type' => 'application/json'} body = {template: template_slug, options: options}.to_json surl_response = Typhoeus::Request.post(url, body: body, headers: headers) raise("Error creating ShortURL: #{surl_response.inspect}") if !surl_response.success? JSON.parse(surl_response.body)['short_url'] end # Call our helper url = charturl_url("weekly-activity", data: {columns: [["This week", 4,1,5,6,1,7,8], ["Last week", 1,5,3,1,6,2,6]]}) url #=> "https://charturl.com/r/J9lA" 

Por el momento, no he encontrado una solución para realmente “vincular directamente” a un gráfico (ver más adelante). Pero es posible convertir los gráficos en imágenes / PNG, y esa es la prerrequisito. Y al convertir sobre la marcha, puede permitir a los usuarios guardar el gráfico como una imagen en un archivo.

Los gráficos de Google modernos están comstackdos en una etiqueta . El contenido de esta etiqueta se puede dibujar en un utilizando la excelente biblioteca canvg .

Una vez hecho esto, puede transferir el contenido del canvas a un por canvas.toDataURL . Aquí hay un ejemplo :

Primero, incluye la biblioteca canvg

    

Algunos markup: 3 tags, un

para el gráfico, un y un

 

Observe "width=200" para la imagen, solo para demostrar que en realidad está funcionando 🙂

Dibuje un cuadro como “normal” (como cualquiera que esté acostumbrado a hacerlo), aquí minimalista solo para la prueba

 function drawLineGraph() { var data = new google.visualization.DataTable(someJSON); chart = new google.visualization.BarChart(document.getElementById("chart_div")); var options = {}; chart.draw(data, options); } 

Dibuja el cuadro en window.load . Utilizo un setTimeout para el efecto, pero en un escenario de la vida real, creo que sería mejor usar una función google.visualization.events.addListener(xxx, 'ready', function .

 window.onload = function() { drawLineGraph(); setTimeout(function() { //get SVG content var chart = document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode; var svg = chart.innerHTML; //get the canvas, adjust width / height var canvas = document.getElementById('canvas'); canvas.setAttribute('width', chart.offsetWidth); canvas.setAttribute('height', chart.offsetHeight); //transfer SVG to canvas by canvg canvg(canvas, svg); //get an image source by canvas.toDataURL and add to the image var imgsrc = canvas.toDataURL("image/png"); document.getElementById('img').setAttribute('src', imgsrc); }, 1000); } 

El src de la imagen se verá algo así como:

datos: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt + + XCAAAdCklEQVR4Xu2dfcyWZfnHDyFwtZVz68WcJWO9UCRuD4T9KjdrJC0HI8wWbmiTGMJPiXBg8bL IIhioxio4aaiZIPZCxi9qCtro / ZsCatZGzSiLdZcNtwSwugX8Ou8Nhji88B5f0 + vPdf5fD .. ..

Por supuesto, seguir y seguir …. Como es normal. Todavía no he intentado manipular / enlace remoto / enviado esto, solo lo usé como imagen, ¡ pero estoy seguro de que es bastante fácil !


Resultado / salida para el código de arriba:

enter image description here

También he estado buscando otros servicios similares que podrían generar gráficos de imágenes estáticas, pero hasta ahora no han tenido éxito.

Sin embargo, una opción es crear su propio “servicio” utilizando scripts php en su propio servidor, al cual puede pasar parámetros.

Puede usar una biblioteca de gráficos php, por ejemplo algo como pChart para generar los gráficos con php, y devolver la imagen .png del script.

Algunos problemas con las soluciones de gráficos basados ​​en JavaScript son que normalmente no puede usarlos si también desea generar PDF con gráficos sobre la marcha, o si desea generar gráficos dentro de Rich-text Editors, o simplemente usarlos en correos electrónicos ( como ya lo mencionaste).

También me encontré con un problema como este en el que necesitaba gráficos basados ​​en imágenes estáticas en el lado del servidor usando PHP. Encontré una manera de lograr esto usando PhantomJS y Google Chart’s javascript api. A continuación se muestra un ejemplo de cómo hacer esto …

 var webPage = require('webpage'); var page = webPage.create(); page.includeJs("https://www.gstatic.com/charts/loader.js", function() { var expectedContent = '' + '' + ' '+ ''+ ''+ '
'+ ''+ ''; var expectedLocation = 'http://www.phantomjs.org/'; page.setContent(expectedContent, expectedLocation); window.setTimeout(function () { page.render("mypng.png"); phantom.exit(); }, 1000); // Change timeout as required to allow sufficient time });

Después de eso, necesita ejecutar este archivo javascript dentro de su PHP: –

 exec(ROOT_DIRECTORY . "\phantomjs.exe processImageData.js ", $output);