{"id":23029680,"url":"https://github.com/antononcube/raku-javascript-google-charts","last_synced_at":"2026-07-04T10:31:25.640Z","repository":{"id":243432670,"uuid":"812272273","full_name":"antononcube/Raku-JavaScript-Google-Charts","owner":"antononcube","description":"Raku package for interfacing Google Charts.","archived":false,"fork":false,"pushed_at":"2024-07-11T21:12:15.000Z","size":177,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-24T14:42:20.509Z","etag":null,"topics":["google-chart-api","google-charts","graphics","javascript","raku","rakulang","visualization"],"latest_commit_sha":null,"homepage":"https://raku.land/zef:antononcube/JavaScript::Google::Charts","language":"Raku","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"artistic-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antononcube.png","metadata":{"files":{"readme":"README-work.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2024-06-08T12:25:23.000Z","updated_at":"2025-05-17T13:54:33.000Z","dependencies_parsed_at":"2025-06-13T05:41:26.932Z","dependency_job_id":null,"html_url":"https://github.com/antononcube/Raku-JavaScript-Google-Charts","commit_stats":null,"previous_names":["antononcube/raku-javascript-google-charts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/antononcube/Raku-JavaScript-Google-Charts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antononcube%2FRaku-JavaScript-Google-Charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antononcube%2FRaku-JavaScript-Google-Charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antononcube%2FRaku-JavaScript-Google-Charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antononcube%2FRaku-JavaScript-Google-Charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antononcube","download_url":"https://codeload.github.com/antononcube/Raku-JavaScript-Google-Charts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antononcube%2FRaku-JavaScript-Google-Charts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35118970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-04T02:00:05.987Z","response_time":113,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["google-chart-api","google-charts","graphics","javascript","raku","rakulang","visualization"],"created_at":"2024-12-15T14:16:43.373Z","updated_at":"2026-07-04T10:31:25.620Z","avatar_url":"https://github.com/antononcube.png","language":"Raku","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript::Google::Charts\n\nThis repository has the Raku package for generation of \nthe [JavaScript Google Charts](https://developers.google.com/chart) \ncode for making plots and charts.\n\nThis package is intended to be used in Jupyter notebooks with the\n[Raku kernel implemented by Brian Duggan](https://github.com/bduggan/raku-jupyter-kernel), [BD1], or\n[\"Jupyter::Chatbook\"](https://github.com/antononcube/Raku-Jupyter-Chatbook), [AAp4].\nThe commands of the package generate JavaScript code that produces (nice) \n[Google Charts plots or charts](https://developers.google.com/chart/interactive/docs/gallery).\n\nThe package JavaScript graphs can be also included in HTML and Markdown documents.\n\nOne nice feature of Google Charts is that it allows the download of the plots and charts made with it.\n\n--------\n\n## Mission statement\n\nMake first class -- beautiful, tunable, and useful -- plots and charts with Raku using \nconcise specifications.\n\n--------\n\n## Design and philosophy\n\nHere is a list of guiding design principles:\n\n- Google Charts gives a simple user interface, hence, we preserve and follow it as much as we can\n- Make Google Charts' documentation completely applicable for the implemented functions\n  - That documentation is very detailed and high quality.\n  - *(Raku is just \"conduit\" to Google Charts.)*\n- Facilitate the use of data simpler than that required by Google Charts\n  - For example, just giving a list of numbers to a scatter plot should work.\n- Facilitate the generation of both HTML code and (just) JavaScript code\n- Keep the implementation simple\n  - Do not to try to make an extensive interface to Google Charts or have complicated code snippets system.\n    - *(Like the efforts in [\"JavaScript::D3\"](https://raku.land/zef:antononcube/JavaScript::D3).)*\n  \n--------\n\n## The chart types currently implemented \n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eChart Type\u003c/th\u003e\n    \u003cth\u003eChart Type\u003c/th\u003e\n    \u003cth\u003eChart Type\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAnnotated Timeline \u0026#x25A2;\u003c/td\u003e\n    \u003ctd\u003eArea Chart \u0026#x2713;\u003c/td\u003e\n    \u003ctd\u003eBar Chart \u0026#x2713;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eBubble Chart \u0026#x2713;\u003c/td\u003e\n    \u003ctd\u003eCalendar Chart \u0026#x25A2;\u003c/td\u003e\n    \u003ctd\u003eCandlestick Chart \u0026#x25A2;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eColumn Chart \u0026#x2713;\u003c/td\u003e\n    \u003ctd\u003eCombo Chart \u0026#x2713;\u003c/td\u003e\n    \u003ctd\u003eGauge \u0026#x2713;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eGeo Chart \u0026#x2713;\u003c/td\u003e\n    \u003ctd\u003eHistogram \u0026#x2713;\u003c/td\u003e\n    \u003ctd\u003eLine Chart \u0026#x2713;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eOrg Chart \u0026#x25A2;\u003c/td\u003e\n    \u003ctd\u003ePie Chart \u0026#x2713;\u003c/td\u003e\n    \u003ctd\u003eSankey Diagram \u0026#x2713;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eScatter Chart \u0026#x2713;\u003c/td\u003e\n    \u003ctd\u003eStepped Area Chart \u0026#x2713;\u003c/td\u003e\n    \u003ctd\u003eTimeline \u0026#x2713;\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eTreeMap \u0026#x2713;\u003c/td\u003e\n    \u003ctd\u003eWaterfall Chart \u0026#x25A2;\u003c/td\u003e\n    \u003ctd\u003eWord Tree \u0026#x2713;\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n--------\n\n## How does it work?\n\nHere is a diagram that summarizes the evaluation path from a Raku plot spec to a browser diagram:\n\n```mermaid\ngraph TD\n   Raku{{Raku}}\n   IRaku{{\"Raku\u003cbr\u003eJupyter kernel\"}}\n   Jupyter{{Jupyter}}\n   JS{{JavaScript}}\n   RakuInput[/Raku code input/]\n   JSOutput[/JavaScript code output/]\n   CellEval[Cell evaluation]\n   JSResDisplay[JavaScript code result display]\n   Jupyter -.-\u003e |1|IRaku -.-\u003e |2|Raku -.-\u003e |3|JSOutput -.-\u003e |4|Jupyter\n   Jupyter -.-\u003e |5|JS -.-\u003e |6|JSResDisplay\n   RakuInput ---\u003e CellEval ---\u003e Jupyter  ---\u003e JSResDisplay\n```\n\nHere is the corresponding narration:\n\n1. Enter Raku plot command in cell that starts with \n   [the magic spec `%% js`](https://github.com/bduggan/raku-jupyter-kernel/issues/100#issuecomment-1349494169).\n\n   - Like `js-google-charts-plot('Scatter', (^12)\u003e\u003e.rand)`.\n   \n2. Jupyter via the Raku kernel evaluates the Raku plot command.\n\n3. The Raku plot command produces JavaScript code.\n\n4. The Jupyter \"lets\" the web browser to evaluate the obtained JavaScript code.\n\n   - Instead of web browser, say, Visual Studio Code can be used.\n\n   \nThe evaluation loop spelled out above is possible because of the magics implementation in the Raku package\n[Jupyter::Kernel](https://github.com/bduggan/raku-jupyter-kernel#features), \n[BD1].\n   \n--------\n\n## Alternatives\n\n### Raku packages\n\nThe Raku package \n[\"JavaScript::D3\"](https://raku.land/zef:antononcube/JavaScript::D3), [AAp1, AAv1],\nprovides a similar set of JavaScript computed plots and charts using the library [D3.js](https://d3js.org).\n\nD3.js is (much more) of lower level library than Google Charts. \n\n**Remark:** Google Charts is customizable, but its set of plots and charts is a streamlined \nand relatively rigid compared to D3.js.\n\nThe Raku packages \"Text::Plot\", [AAp2] and \"SVG::Plot\", [MLp1],\nprovide similar functionalities and both can be used in Jupyter notebooks. \n(Well, \"Text::Plot\" can be used anywhere.)\n\n--------\n\n## Examples\n\n### [Scatter plot](https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/scatterchart)\n\n```perl6, eval=FALSE\nuse JavaScript::Google::Charts;\n\nmy @res = 120.rand xx 12;\n\njs-google-charts('Scatter', @res, format =\u003e 'html', :png-button);\n```\n\n![](https://raw.githubusercontent.com/antononcube/Raku-JavaScript-Google-Charts/main/docs/Raku-JavaScript-Google-Charts-scatter-plot-demo.png)\n\n### [Bubble chart](https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/bubblechart)\n\n```perl6, eval=FALSE\nmy @res2 = [('A'..'Z').pick, 120.rand, 130.rand, \u003ca b\u003e.pick, 10.rand] xx 12;\n\n@res2 = @res2.map({ \u003clabel x y group z\u003e.Array Z=\u003e $_.Array })».Hash; \n\njs-google-charts('Bubble', @res2, column-names =\u003e \u003clabel x y group z\u003e, format =\u003e 'html', :png-button, div-id =\u003e 'bubble');\n```\n\n![](https://raw.githubusercontent.com/antononcube/Raku-JavaScript-Google-Charts/main/docs/Raku-JavaScript-Google-Charts-bubble-chart-demo.png)\n\n--------\n\n## References\n\n### Articles\n\n[OV1] Olivia Vane, \n[\"D3 JavaScript visualisation in a Python Jupyter notebook\"](https://livingwithmachines.ac.uk/d3-javascript-visualisation-in-a-python-jupyter-notebook), \n(2020), \n[livingwithmachines.ac.uk](https://livingwithmachines.ac.uk).\n\n[SF1] Stefaan Lippens, \n[Custom D3.js Visualization in a Jupyter Notebook](https://www.stefaanlippens.net/jupyter-custom-d3-visualization.html), \n(2018), \n[stefaanlippens.net](https://www.stefaanlippens.net).\n\n### Packages\n\n[AAp1] Anton Antonov,\n[JavaScript::D3 Raku package](https://raku.land/zef:antononcube/Text::Plot),\n(2022-2024),\n[GitHub/antononcube](https://github.com/antononcube/Raku-JavaScript-D3).\n\n[AAp1] Anton Antonov,\n[Text::Plot Raku package](https://raku.land/zef:antononcube/Text::Plot),\n(2022),\n[GitHub/antononcube](https://github.com/antononcube/Raku-Text-Plot).\n\n[AAp3] Anton Antonov,\n[JavaScriptD3 Python package](https://github.com/antononcube/Python-packages/tree/main/JavaScriptD3),\n(2022),\n[Python-packages at GitHub/antononcube](https://github.com/antononcube/Python-packages).\n\n[AAp4] Anton Antonov,\n[Jupyter::Chatbook Raku package](https://github.com/antononcube/Raku-Jupyter-Chatbook),\n(2023-2024),\n[GitHub/antononcube](https://github.com/antononcube).\n\n[BD1] Brian Duggan,\n[Jupyter::Kernel Raku package](https://raku.land/cpan:BDUGGAN/Jupyter::Kernel),\n(2017-2022),\n[GitHub/bduggan](https://github.com/bduggan/raku-jupyter-kernel).\n\n[MLp1] Moritz Lenz,\n[SVG::Plot Raku package](https://github.com/moritz/svg-plot)\n(2009-2018),\n[GitHub/moritz](https://github.com/moritz/svg-plot).\n\n### Videos\n\n[AAv1] Anton Antonov,\n[\"The Raku-ju hijack hack for D3.js\"](https://www.youtube.com/watch?v=YIhx3FBWayo),\n(2022),\n[YouTube/@AAA4Prediction](https://www.youtube.com/@AAA4prediction).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantononcube%2Fraku-javascript-google-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantononcube%2Fraku-javascript-google-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantononcube%2Fraku-javascript-google-charts/lists"}