html - tipos - haxis google chart
Reemplazo de Google Chart Images (6)
La API Google Chart Images actualmente está en desuso y programada 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:
Esto producirá la siguiente imagen que se puede agregar fácilmente a través de una etiqueta <img> y es compatible con todos los clientes de navegador y correo electrónico.
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.
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 simplemente 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 compilados en una etiqueta <svg> . El contenido de esta etiqueta se puede dibujar en un <canvas> utilizando la excelente biblioteca canvg .
Una vez hecho esto, puede transferir el contenido del lienzo a un <img> por canvas.toDataURL . Aquí hay un ejemplo :
Primero, incluye la biblioteca canvg
<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/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
Algunos markup: 3 etiquetas, un <div> para el gráfico, un <canvas> y un <img>
<div id="chart_div" style="width: 400px; height: 300px"></div>
<canvas id="canvas"></canvas>
<img id="img" width="200">
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:
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 = ''<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([''+
''[/'Task/', /'Hours per Day/'],''+
''[/'Work/', 11],''+
''[/'Eat/', 2],''+
''[/'Commute/', 2],''+
''[/'Watch TV/', 2],''+
''[/'Sleep/', 7]''+
'']);''+
''var options = {''+
''title: /'My Daily Activities/',''+
''is3D: true,''+
''};''+
''var chart = new google.visualization.PieChart(document.getElementById(/'piechart_3d/'));''+
''chart.draw(data, options);''+
''}''+
''</script>''+
''</head>''+
''<body>''+
''<div id="piechart_3d" style="width: 900px; height: 500px;"></div>''+
''</body>''+
''</html>'';
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);
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í.