npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

google-charts-node

v2.0.0

Published

Headless image renderer for Google Charts

Downloads

1,278

Readme

google-charts-node

npm

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:

Google Charts 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.