typpo / google-charts-node Goto Github PK

Render Google Charts to image

License: GNU Affero General Public License v3.0

JavaScript 100.00%

google-charts chart-api google-charts-api

google-charts-node's Introduction

google-charts-node

This package allows you to render Google Charts on the server as PNG images. It's part of QuickChart, which offers a suite of tools for rendering charts & graphs as images.

It is based on the Google Visualization API and is made possible through the use of puppeteer, which uses the Chromium browser for "headless" rendering.

For a more detailed walkthrough, see Server-side image rendering for Google Charts on QuickChart.

Setup

This project is available on NPM.

npm install google-charts-node

You may instead prefer to use the hosted version available at https://quickchart.io/google-charts/render (see docs).

Example

const GoogleChartsNode = require('google-charts-node');

// Define your chart drawing function
function drawChart() {
  const data = google.visualization.arrayToDataTable([
    ['City', '2010 Population',],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000]
  ]);

  const options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  const chart = new google.visualization.BarChart(container);
  chart.draw(data, options);
}

// Render the chart to image
const image = await GoogleChartsNode.render(drawChart, {
  width: 400,
  height: 300,
});

This produces the following image:

The only requirements of your drawChart function are that you must:

Define a chart variable or return your chart.
Use the provided container variable to render your chart.

Example with arguments

To use outside values in your drawChart function, call render with a Javascript string. Here's an example:

const myArg = 12345;
const myOtherArg = [5, 10, 15, 20];
const drawChartStr = `
  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', ${myArg}],
    ['Onions', ${myOtherArg[0]}],
    ['Olives', ${myOtherArg[1]}],
    ['Zucchini', ${myOtherArg[2]}],
    ['Pepperoni', ${myOtherArg[3]}],
  ]);
  // Set chart options
  var options = { title: 'How Much Pizza I Ate Last Night' };
  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
`;
const image = await GoogleChartsNode.render(drawChartStr, {
  width: 400,
  height: 300,
});

Usage

render(drawChartFunction, options) -> Buffer

The library exposes a single function, render.

drawChartFunction is a Function or Javascript string that is evaluated in order to draw the chart. You should put your regular drawChart Google Charts function here.

options is a dictionary containing some settings and parameters:

width: Width of chart canvas (default 100%)
height: Height of chart canvas (default 100%)
packages: Array of Google Charts packages to import (default ['corechart'])
mapsApiKey: Google Maps API key (used only for geochart and map charts)
puppeteerOptions: Options passed to puppeteer.launch

More examples

See the examples/ directory for more examples of different charts.

google-charts-node's People

Contributors

Stargazers

Watchers

Forkers

lakhoune frysch kanami-nekomata achimovic operva-ai msimerson amazingshellyyy brcambui nickyguants bensonkariuki

google-charts-node's Issues

puppeteer launch headless new

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/google-charts-node/lib/render.js b/node_modules/google-charts-node/lib/render.js
index 0551607..21f4989 100644
--- a/node_modules/google-charts-node/lib/render.js
+++ b/node_modules/google-charts-node/lib/render.js
@@ -20,7 +20,7 @@ async function renderGoogleChart(contentRaw, optsRaw) {
     optsRaw || {},
   );
 
-  const browser = await puppeteer.launch(opts.puppeteerOptions);
+  const browser = await puppeteer.launch({headless: 'new'});
 
   const page = await browser.newPage();
   page.setDefaultTimeout(RENDER_TIMEOUT_MS);

This issue body was partially generated by patch-package.

Navigation timeout of 2000 ms exceeded

When i use google-charts-node in my backend then it gives "Navigation timeout of 2000 ms exceeded" most of the Time. and log is ..
{ TimeoutError: Navigation timeout of 2000 ms exceeded
at Promise.then (C:\angular\b-all\node_modules\google-charts-node\node_modules\puppeteer\lib\LifecycleWatcher.js:100:111)
-- ASYNC --
at Frame. (C:\angular\b-all\node_modules\google-charts-node\node_modules\puppeteer\lib\helper.js:116:19)
at Page.setContent (C:\angular\b-all\node_modules\google-charts-node\node_modules\puppeteer\lib\Page.js:550:46)
at Page. (C:\angular\b-all\node_modules\google-charts-node\node_modules\puppeteer\lib\helper.js:117:27)
at Object.renderGoogleChart [as render] (C:\angular\b-all\node_modules\google-charts-node\lib\render.js:32:16)
at process._tickCallback (internal/process/next_tick.js:68:7) name: 'TimeoutError' }

"Failed to launch Browser process" error

Hi all, I'm trying to deploy a nodeJS service to cloudfoundry. It has a "google-charts-node" dependency. The app crashes with the following error, ERR /home/vcap/deps/0/node_modules/google-charts-node/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such f
ile or directory

Has anyone come across such error. Suggestions are welcome. Thank you!

offline version

Is there any chance that you know of an offline version? Searching far and wide for a backend graphing library that doesnt require calls to outside services

Problem with google.visualization not defined

👋 This is possibly a very silly question, but where is the google module in google.visualization.arrayToDataTable supposed to be imported from? Seems like this usually comes from:

<script src="https://www.gstatic.com/charts/loader.js"></script>

But of course this isn't available on the backend. Am I supposed to load this some other way?

Extra Line on Pie chart in case of single data value

loading google-charts-node in ES6 module

Hi there,

in my project I am using ES6 modules, how to import google-charts-node (it is commonJS)? I have tried this script and it does generate blank(empty) PNG:

`import { writeFileSync } from 'fs';
import GoogleChartsNode from 'google-charts-node';
(async () => {
const image = await GoogleChartsNode.render(generateBarChart, {
width: 400,
height: 300,
});

writeFileSync('google-chart.png', image);

})();

function generateBarChart() {

  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population'],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000],
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: { width: '50%' },
    hAxis: {
      title: 'Total Population',
      minValue: 0,
    },
    vAxis: {
      title: 'City',
    },
  };

  const chart = new google.visualization.BarChart(container);
  chart.draw(data, options);

}
`

Problem with google is not defined

At the beginning every thing work,no problem,
then suddenly this error just show up,
so i dont know what happened

UnhandledPromiseRejectionWarning: ReferenceError: google is not defined

GeoChart Error: Must draw chart before calling getImageURI

Reproduce

(async () => {
  const drawChart = `
  var container = document.getElementById('chart_div');const data = google.visualization.arrayToDataTable([['Country', 'Popularity'],['Germany', 200],['United States', 300],['Brazil', 400],['Canada', 500],['France', 600],['RU', 700]
]);var options={};var chart = new google.visualization.GeoChart(container);chart.draw(data, options);
  `;
  const image = await GoogleChartsNode.render(drawChart, {
    width: 400,
    height: 300,
    package: 'geochart'
  });

  fs.writeFileSync('/tmp/google-chart.png', image);
})();

Node.js without html

Hello again. I'm using node.js without html, then what i need provide in the following code:

const chart = new google.visualization.BarChart(??????????????????????);
        chart.draw(data, options);

TypeScript support

Hi! I'm using typescript for all my projects, and i think is good feature for next update if you add type definitions for library.

Guage chart is giving not a constructor error

As per the given documentation I have added guage in packages array.

     const image = await GoogleChartsNode.render(drawChart, {
                        width: 400,
                        height: 300,
                        packages:['gauge']
          });

And draw function is given as

function drawChart() {

    var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Memory', 80]
      ]);

      var options = {
        width: 400, height: 120,
        redFrom: 90, redTo: 100,
        yellowFrom:75, yellowTo: 90,
        minorTicks: 5
      };

	const chart = new google.visualization.Guage(container);
	chart.draw(data, options);
  }

But If I try to access it from express server I am getting

Page error: Error: TypeError: google.visualization.Guage is not a constructor.
Please help

Not working on azure cloud function

When trying to deploy a working implementation that works locally on a windows environment, it does not run as a cloud function. The following error is being triggered

Error: Could not find browser revision 756035. Run "npm install" or "yarn install" to download a browser binary.2023-03-13T13:08:21Z [Information] at ChromeLauncher.launch (C:\home\site\wwwroot\node_modules\google-charts-node\node_modules\puppeteer\lib\Launcher.js:81:23)2023-03-13T13:08:21Z [Information] at async Object.renderGoogleChart [as render] (C:\home\site\wwwroot\node_modules\google-charts-node\lib\render.js:23:19)2023-03-13T13:08:21Z [Information] at async createChart (C:\home\site\wwwroot\TimerTrigger1\helpers\donut_chart.js:59:19)2023-03-13T13:08:21Z [Information] at async getDonutChartData (C:\home\site\wwwroot\TimerTrigger1\helpers\donut_chart.js:122:13)2023-03-13T13:08:21Z [Information] at async processReports (C:\home\site\wwwroot\TimerTrigger1\helpers\index.js:56:33)2023-03-13T13:08:21Z [Information] at async module.exports (C:\home\site\wwwroot\TimerTrigger1\index.js:9:5)

It seems that the code is trying to launch Puppeteer with a specific browser revision (756035), but the binary for that revision is not available on your system.

You can try running "npm install" or "yarn install" to download the necessary browser binary. This will install the required dependencies and should solve the issue.

If that doesn't work, you can also try passing a different browser revision to Puppeteer by setting the "executablePath" option. For example:

javascript

const puppeteer = require('puppeteer-core');

const browser = await puppeteer.launch({
executablePath: '/path/to/chrome',
});

How to handle legends in bottom position in image.

if we use pie, multiple column/ bar chart then legends position in bottom is paginate. so how to show all legends in bottom of image.
image.pdf

"TypeError: JSON.stringify(...) is not a function" when trying to pass arguments

So, I'll make this as short as possible. I am running a test script. Here is the script for reference:

const GoogleChartsNode = require("google-charts-node")
const strftime = require("strftime")
const { badgeDates } = require("./badges.json")
var newBadges = []
var dateGroups = {}
var rows = []

const fs = require("fs")

for (let i = 0; i < badgeDates.length; i++) {
    let badge = badgeDates[i]
    let awardedDate = new Date(Date.parse(badge.awardedDate))
    badge.awardedDate = awardedDate
    newBadges.push(badge)

    let group = strftime("%B %Y", awardedDate)
    if (!(group in dateGroups)) {
        dateGroups[group] = []
    }
    dateGroups[group].push(badge)

    rows.push([awardedDate, i + 1])
}


const drawChart = `

    let data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Badges');

    data.addRows(${JSON.stringify(rows)});

    let options = {
        hAxis: {
            title: 'Earned Date'
        },
        vAxis: {
            title: 'Badge Count'
        }
    };

    let chart = new google.visualization.LineChart(container);
    chart.draw(data, options);
`

(async () => {
    const image = await GoogleChartsNode.render(drawChart, {
        width: 400,
        height: 300,
      });
    
    fs.writeFileSync("./my_image_chart.png", image)
})()

As seen from the title, I get an error saying JSON.stringify(...) is not a function, and I don't know why. I tried moving the JSON.stringify() part outside the string, but the same thing happens. I am not really sure what I'm doing wrong here, so if someone could help me out, that would be amazing. Thank you.

Getting error while using "google-charts-node" for dynamic data

I am trying to create charts using "google-charts-node" npm via REST api but getting this error everytime when I try to pass dynamic data from request body in the drawChart function but it works fine when I passed static parameters

Here is my code:


const GoogleChartsNode = require('google-charts-node');
const express=require('express')
const body_parser=require('body-parser')

const fs = require('fs');
const app=express()

app.use(body_parser.json());

async function drawChart(body) {

var arr=[]
arr=body.chartData
console.log(arr)

    var data =  google.visualization.arrayToDataTable(arr);
  
    var options = {
      title: 'Revenue of C2C 2020',
      chartArea: { width: '50%' },
      hAxis: {
        title: 'Revenue',
        minValue: 0,
      },
      vAxis: {
        title: 'Products',
      },
    };
      var chart = new google.visualization.BarChart(container);
  
   chart.draw(data, options);
  }

  
  
  

  const Img= async(body) => {
    const image = await  GoogleChartsNode.render(drawChart(body), {
      width: 400,
      height: 300,
    });
    return image
}
var bodyData

const getDataFirst=(data,callback)=>{
    console.log('func',data)
    callback(data)
}

app.post('/drawcharts', async (req,res)=>{
bodyData=req.body
getDataFirst(bodyData,async(data)=>{
    console.log('callback',data)
    const v= await Img(data)
    console.log(v)
})`

and getting this error

(node:9608) UnhandledPromiseRejectionWarning: ReferenceError: google is not defined
at drawChart (C:\Users\C2C04\Desktop\Charts\test.js:16:17)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.