{"id":22229713,"url":"https://github.com/boycce/groph","last_synced_at":"2025-03-25T08:44:01.303Z","repository":{"id":22354719,"uuid":"25690719","full_name":"boycce/groph","owner":"boycce","description":"Beautiful graphs built on-top of pixi's super fast canvas renderer.","archived":false,"fork":false,"pushed_at":"2023-06-26T03:06:22.000Z","size":251,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-20T16:48:46.896Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/boycce.png","metadata":{"files":{"readme":"README.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}},"created_at":"2014-10-24T13:50:08.000Z","updated_at":"2023-06-26T03:06:25.000Z","dependencies_parsed_at":"2022-07-17T12:46:25.699Z","dependency_job_id":null,"html_url":"https://github.com/boycce/groph","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boycce%2Fgroph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boycce%2Fgroph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boycce%2Fgroph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boycce%2Fgroph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boycce","download_url":"https://codeload.github.com/boycce/groph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245431709,"owners_count":20614182,"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":[],"created_at":"2024-12-03T01:12:03.656Z","updated_at":"2025-03-25T08:44:01.274Z","avatar_url":"https://github.com/boycce.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Groph\n====\nCreate sexy looking line graphs, built with the help of Pixi using the canvas element. Currently groph's API only supports line charts and a single style, but no doubt this will soon change.\n\n### Road Map ###\n\n- Support for more line chart styling options\n- Add a destroy method\n- Reduce dependencies\n- ~~Resposive charts~~\n- Create github pages\n\n### Contribute ###\n\nWe would love for you to be apart of this project and in the journey of laying down a path for faster, more expressive charting API, in support of canvas (and soon WebGL) which both have optimistic futures. In your pull request please do not commit `groph.min.js`.\n\n### Features ###\n\n- Canvas renderer, what drives Google maps\n- Reuse groph instances for a faster build\n- Responsive\n- Sleek animations\n\n### Example ###\n\n- [Line graph 1](https://github.com/Boyyce/groph/blob/master/example/index.html)\n\n### Usage ###\nInclude on your page groph and its dependencies. I have compiled pixi with the bare necessities in under \u003c 57kb. This is located inside the `vendors` directory. \n```html\n\u003cscript src=\"http://code.jquery.com/jquery-latest.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/tweenjs/0.5.1/tweenjs.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"../js/groph.min.js\"\u003e\u003c/script\u003e\n```\nRun Groph\n\n```javascript\nvar groph = new Groph({\n  selector : '#graph1',\n  w : 1008,\n  h : 365,\n  data1: [15, 50, 200, 243, 400, 302, 400],\n  data2: [10, 33, 155, 110, 300, 150, 250]\n});\n```\n\n### Options ###\n\n- `selector`: jQuery selector of your element.\n- `w`: Width of the graph\n- `h`: Height of the graph\n- `pointMax`: Max value of the graph\n- `pointMin`: Min value of the graph\n- `graphScale`: Scale the graph\n- `graphPadding`: eg. `[60, 10, 50, 20]`\n- `data1`: Array of your incoming data\n- `data2`: Array of your incoming data\n- `anim`: Animate on init\n- `cwd`: Where the textures are loaded from (two so far).\n- ... see code for more\n\n### API Methods ###\n\n- `remove`: Removes groph and DOM reference but keeps processed and canvas data.\n- `remake`: Sets up groph again. You can re-pass any settings\n\n\u0026nbsp;\n\nEnjoy.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboycce%2Fgroph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboycce%2Fgroph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboycce%2Fgroph/lists"}