{"id":21879173,"url":"https://github.com/typpo/google-charts-node","last_synced_at":"2025-04-06T23:18:07.399Z","repository":{"id":50767060,"uuid":"274724468","full_name":"typpo/google-charts-node","owner":"typpo","description":"Render Google Charts to image","archived":false,"fork":false,"pushed_at":"2024-12-10T04:41:27.000Z","size":119,"stargazers_count":36,"open_issues_count":6,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T21:12:50.733Z","etag":null,"topics":["chart-api","google-charts","google-charts-api"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/typpo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-24T17:04:53.000Z","updated_at":"2024-12-10T04:41:32.000Z","dependencies_parsed_at":"2024-03-28T12:38:31.192Z","dependency_job_id":"432b84d0-55a7-41eb-8fd6-17b026bcb54c","html_url":"https://github.com/typpo/google-charts-node","commit_stats":{"total_commits":35,"total_committers":5,"mean_commits":7.0,"dds":"0.22857142857142854","last_synced_commit":"4191172af46196f7acef1f349a2bb33e165cecac"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fgoogle-charts-node","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fgoogle-charts-node/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fgoogle-charts-node/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fgoogle-charts-node/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typpo","download_url":"https://codeload.github.com/typpo/google-charts-node/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247563941,"owners_count":20958971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart-api","google-charts","google-charts-api"],"created_at":"2024-11-28T08:15:29.053Z","updated_at":"2025-04-06T23:18:07.381Z","avatar_url":"https://github.com/typpo.png","language":"JavaScript","readme":"google-charts-node\n---\n[![npm](https://img.shields.io/npm/v/google-charts-node)](https://www.npmjs.com/package/google-charts-node)\n\nThis package allows you to render Google Charts on the server as PNG images.  It's part of [QuickChart](https://quickchart.io), which offers a suite of tools for rendering charts \u0026 graphs as images.\n\nIt is based on the [Google Visualization API](https://developers.google.com/chart/interactive/docs/reference) and is made possible through the use of [puppeteer](https://github.com/puppeteer/puppeteer), which uses the Chromium browser for \"headless\" rendering.\n\nFor a more detailed walkthrough, see [Server-side image rendering for Google Charts](https://quickchart.io/documentation/google-charts-image-server/) on QuickChart.\n\n\n## Upgrade Notes\n\nIf your application passes Puppeteer options you pass to `render` method, make sure they are compatible with [Puppeteer 23.10.1](https://github.com/puppeteer/puppeteer/tree/puppeteer-v23.10.1).\n\n## Setup\n\nThis project is [available on NPM](https://www.npmjs.com/package/google-charts-node).\n\n```\nnpm install google-charts-node\n```\n\nYou may instead prefer to use the hosted version available at https://quickchart.io/google-charts/render ([see docs](https://quickchart.io/documentation/google-charts-image-server/#using-the-api)).\n\n## Example\n\n```js\nconst GoogleChartsNode = require('google-charts-node');\n\n// Define your chart drawing function\nfunction drawChart() {\n  const data = google.visualization.arrayToDataTable([\n    ['City', '2010 Population',],\n    ['New York City, NY', 8175000],\n    ['Los Angeles, CA', 3792000],\n    ['Chicago, IL', 2695000],\n    ['Houston, TX', 2099000],\n    ['Philadelphia, PA', 1526000]\n  ]);\n\n  const options = {\n    title: 'Population of Largest U.S. Cities',\n    chartArea: {width: '50%'},\n    hAxis: {\n      title: 'Total Population',\n      minValue: 0\n    },\n    vAxis: {\n      title: 'City'\n    }\n  };\n\n  const chart = new google.visualization.BarChart(container);\n  chart.draw(data, options);\n}\n\n// Render the chart to image\nconst image = await GoogleChartsNode.render(drawChart, {\n  width: 400,\n  height: 300,\n});\n```\n\nThis produces the following image:\n\n![Google Charts Image](https://i.imgur.com/ABS8FSR.png)\n\nThe only requirements of your `drawChart` function are that you must:\n- Define a `chart` variable or return your chart.\n- Use the provided `container` variable to render your chart.\n\n### Example with arguments\n\nTo use outside values in your drawChart function, call `render` with a Javascript string.  Here's an example:\n\n```js\nconst myArg = 12345;\nconst myOtherArg = [5, 10, 15, 20];\nconst drawChartStr = `\n  // Create the data table.\n  var data = new google.visualization.DataTable();\n  data.addColumn('string', 'Topping');\n  data.addColumn('number', 'Slices');\n  data.addRows([\n    ['Mushrooms', ${myArg}],\n    ['Onions', ${myOtherArg[0]}],\n    ['Olives', ${myOtherArg[1]}],\n    ['Zucchini', ${myOtherArg[2]}],\n    ['Pepperoni', ${myOtherArg[3]}],\n  ]);\n  // Set chart options\n  var options = { title: 'How Much Pizza I Ate Last Night' };\n  // Instantiate and draw our chart, passing in some options.\n  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));\n  chart.draw(data, options);\n`;\nconst image = await GoogleChartsNode.render(drawChartStr, {\n  width: 400,\n  height: 300,\n});\n```\n\n## Usage\n\n### render(drawChartFunction, options) -\u003e Buffer\n\nThe library exposes a single function, render.\n\n**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.\n\n**options** is a dictionary containing some settings and parameters:\n- **width**: Width of chart canvas (default `100%`)\n- **height**: Height of chart canvas (default `100%`)\n- **packages**: Array of Google Charts packages to import (default `['corechart']`)\n- **mapsApiKey**: Google Maps API key (used only for geochart and map charts)\n- **puppeteerOptions**: Options passed to [puppeteer.launch](https://pptr.dev/api/puppeteer.launchoptions)\n\n## More examples\n\nSee the `examples/` directory for more examples of different charts.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyppo%2Fgoogle-charts-node","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyppo%2Fgoogle-charts-node","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyppo%2Fgoogle-charts-node/lists"}