{"id":33169546,"url":"https://github.com/aphorism44/phaser-barchart","last_synced_at":"2025-11-20T19:00:59.724Z","repository":{"id":95888551,"uuid":"80074200","full_name":"aphorism44/phaser-barchart","owner":"aphorism44","description":"Open-source plugin for the Phaser.io JS library","archived":false,"fork":false,"pushed_at":"2018-02-21T21:29:09.000Z","size":796,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-17T12:32:58.274Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aphorism44.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-01-26T01:00:40.000Z","updated_at":"2022-11-08T16:45:14.000Z","dependencies_parsed_at":"2023-03-13T16:43:54.601Z","dependency_job_id":null,"html_url":"https://github.com/aphorism44/phaser-barchart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aphorism44/phaser-barchart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aphorism44%2Fphaser-barchart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aphorism44%2Fphaser-barchart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aphorism44%2Fphaser-barchart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aphorism44%2Fphaser-barchart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aphorism44","download_url":"https://codeload.github.com/aphorism44/phaser-barchart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aphorism44%2Fphaser-barchart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285494607,"owners_count":27181443,"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","status":"online","status_checked_at":"2025-11-20T02:00:05.334Z","response_time":54,"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":[],"created_at":"2025-11-16T01:00:33.530Z","updated_at":"2025-11-20T19:00:59.718Z","avatar_url":"https://github.com/aphorism44.png","language":"HTML","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\u003ch1\u003e\u003cstrong\u003ePhaser.io Barchart Plugin\u003c/strong\u003e\u003c/h1\u003e\n\u003cimg src=\"assets/phaserLogo.png\"/\u003e\n\u003cbr\u003e\nThis is a plugin for Phaser.io,  a popular open source game framework.\n\u003cbr\u003e\nSpecifically, it generates a bar graph from an array of numbers.\n\u003cbr\u003e\n\u003cimg src=\"assets/git1.png\"/\u003e\n\u003ch3\u003e\u003cstrong\u003eSetup\u003c/strong\u003e\u003c/h3\u003e\n\u003cbr\u003e\nTo use this plugin, please take the following steps:\n\u003cbr\u003e\u003cbr\u003e\nOn your index page, you need to reference a copy of the plugin code (phaser-barchart.js), like this:\n\u003ccode\u003e\n\n    \u003cscript src=\"vendor/phaser-barchart.js\"\u003e\u003c/script\u003e\n\n\u003c/code\u003e\nWithin your game's first preload function, load the plugin with this command:\n\u003cpre\u003e\n\ngame.plugin = game.plugins.add(Phaser.Plugin.BarchartPlugin);\n\n\u003c/pre\u003e\nYou are now able to use the plugin in your Phaser code.\n\u003cbr\u003e\n\u003ch3\u003e\u003cstrong\u003eUsage\u003c/strong\u003e\u003c/h3\u003e\n\u003cbr\u003e\nThe plugin has two public methods: \u003cstrong\u003eaddChart\u003c/strong\u003e and \u003cstrong\u003eupdateChart\u003c/strong\u003e.\n\u003cbr\u003e\u003cbr\u003e\nThe addChart method is used like this:\n\u003cpre\u003e\n\nthis.newChart = game.plugin.addChart(valueArray, x, y, width, height, label, hideLabels);\n\n\u003c/pre\u003e\nThis will create a bar graph object. The variables are:\n\u003cbr\u003e\u003cbr\u003e\n\u003cul\u003e\n    \u003cli\u003e\u003cstrong\u003evalueArray.\u003c/strong\u003e An array of numbers.\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003ex\u003c/strong\u003e. The x-coordinate of the graph (aligned with its left side) \u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003ey\u003c/strong\u003e. The y-coordinate of the graph (aligned with its upper side)\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003ewidth\u003c/strong\u003e. The graph width, in pixels.\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003eheight\u003c/strong\u003e. The graph height, in pixels.\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003elabel\u003c/strong\u003e. A string placed above the graph; usually a description.\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003ehideLabels (optional)\u003c/strong\u003e. If this is set to \"true,\" the graph will not show its label, nor will it mark the y-axis. By default this is \"false.\"\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr\u003e\nAlthough a graph can be static, the second method, updateChart, adds a dynamic functionality to the graph object it's called for, such as:\n\u003cpre\u003e\n\nnewChart.updateChart(newArray);\n\n\u003c/pre\u003e\nThis command will update the entire graph, depending on the numbers used.\n\u003cbr\u003e\u003cbr\u003e\nThe easiest way to update the chart on a regular basis is to add a Phaser timer, then use that to call a function that updates both the array and the graph. For example:\n\u003cpre\u003e\n    this.numberArray = [1.2, 4.2, 5.1, 5.5, 6.3];\n    ...\n    this.anotherGraph = game.plugin.addChart(this.numberArray, 600, 100, 200, 100, \"Another Graph\");\n    this.gameTimer = game.time.events.loop(1000, game.updateCharts, this);\n    ...\n    game.updateCharts = function() {\n        this.numberArray.unshift(Math.random() * 10); //add a new number to the front of the array\n        this.numberArray.pop(); //remove last item in array\n        this.anotherGraph.updateChart(this.numberArray);\n    };\n    \n\u003c/pre\u003e\n\u003cbr\u003e\nHINT: The best way to handle the updateChart array is to unshift new values to the front. It may also be useful to pop the oldest element, although this isn't necessary.\n\u003cbr\u003e\n\u003ch3\u003e\u003cstrong\u003eUseful Features\u003c/strong\u003e\u003c/h3\u003e\n\u003cbr\u003e\nI have tried to make this plugin as robust and flexible as possible. Among these features:\n\u003cbr\u003e\u003cbr\u003e\n\u003cul\u003e\n    \u003cli\u003eThe plugin will automatically determine the y-axis numerical labels based on the highest and lowest numbers in the array.\u003c/li\u003e\n    \u003cli\u003eIf a graph is updated with a larger (or smaller) array, the plugin adjusts the bar width every time the array size changes.\u003c/li\u003e\n    \u003cli\u003eThe plugin can generate numerous graphs, in case someone decides to place two or more of them at once.\u003c/li\u003e\n    \u003cli\u003e If the plugin determines the array is too large to properly display the graph (the number of elements must be less than or equal to half of the graph's width), it will remove items from the end of the array.\u003c/li\u003e\n    \u003cli\u003eGraphs can handle both positive and negative numbers. In addition, graphs can plot both positive and negative points at the same time. In this case, the graph will determine a \"zero point,\" then plot positive numbers (green, with bars pointing upwards) and negative numbers (red, pointing downwards), all from the zero point.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cbr\u003e\n\u003ch3\u003e\u003cstrong\u003eExamples\u003c/strong\u003e\u003c/h3\u003e\n\u003cbr\u003e\n\u003cimg src=\"assets/git2.png\"/\u003e\nMy idle game at Newgrounds, \u003ca href=\"http://www.newgrounds.com/portal/view/687176\" target=\"_blank\"\u003e\u003cem\u003eThe Townsfolk Cartel\u003c/em\u003e\u003c/a\u003e, is the first place I used this plugin (in fact, I created the plugin because that game needed this functionality). When playing the game, press on the \"Statistics\" button. The graph there shows the last 90 days or so of income, so that players can see how they're doing.\n\u003cbr\u003e\u003cbr\u003e\nIf you open the index.html page in this directory, you will see several different style of graph, all created with the plugin. The main.js file creates and updates all the graphs. The code in the create function creates five graphs, while the timerUpdate function updates three of them, along with their number arrays.\n\u003cbr\u003e\n\u003ch3\u003e\u003cstrong\u003eA Tutorial Exercise\u003c/strong\u003e\u003c/h3\u003e\n\u003cbr\u003e\nTo demonstrate how this plugin works, I will show how to add a graph to an existing Phaser.io program. For this, I have included the code from Phaser.io that is \u003ca href=\"http://phaser.io/tutorials/making-your-first-phaser-game\", target=\"_blank\"\u003eused as a tutorial for newcomers\u003c/a\u003e. To see this, open the tutorial.html file instead of index.html. The game should start immediately.\n\u003cbr\u003e\u003cbr\u003e\n\u003cimg src=\"assets/git3.png\"/\u003e\nAs you can see, the game is extremely simple. You just need to move the character around with arrow keys and collect starts for points.\n\u003cbr\u003e\u003cbr\u003e\nSuppose, for some strange reason, the game had a timer, and you wanted to see what the score was for each second. This is your exercise - make the following modifications to the tutorial.html file:\n\u003cbr\u003e\u003cbr\u003e\n\u003col\u003e\n    \u003cli\u003eAdd the plugin file to the HTML5 head. Remember: the instructions on this are located above, under the Setup header. Also keep in mind: the plugin file is at vendor/phaser-barchart.js. \u003cstrong\u003eBe careful\u003c/strong\u003e - don't reference the plugin before the phaser.js file, else you'll get an error.\u003c/li\u003e\n    \u003cli\u003eThe next step is to make the plugin available in the Phaser program. Again, this was discussed in the above instructions. Can you find the preload function?\u003c/li\u003e\n    \u003cli\u003eThe graph will require an array of numbers as input; in this case, those numbers are the score, recorded every second. So, we need to create an array, then, once a second, add the current score into it. How to do this? Well, first you should create a blank array (since this is primitive code, feel free to create it as a global variable, along with the graph itself). Next, you'll need to add a game timer loop, and every second, update this array. If you read the Usage section, you should know how. HINT - you'll at least need to add a new function.\n    \u003c/li\u003e\n    \u003cli\u003eNow you can place a graph on the screen. The instructions are under the Usage header above. You can assume the following:\n        \u003cul\u003e\n            \u003cli\u003eThe graph should be placed in the upper-right corner, unreachable to the character.\u003c/li\u003e\n            \u003cli\u003eThe graph should be small enough not to interfere with the game.\u003c/li\u003e\n        \u003c/ul\u003e\n   \u003c/li\u003e\n   \u003cli\u003eFinally, you'll need to update the score graph every second. HINT: if you already made a function to handle the timed update of the score array, you should be able to include the graph update there.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cbr\u003e\nIf you succeeded, you should see a game like this. Graphing scores doesn't seem very useful, but there are many games where this will help.\n\u003cimg src=\"assets/git4.png\"/\u003e\n\u003cbr\u003e\u003cbr\u003e\nCHEAT: If you want to see the finished code for this, look for the file called \"finished.html\" in the assets folder. But please try to solve it yourself first.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faphorism44%2Fphaser-barchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faphorism44%2Fphaser-barchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faphorism44%2Fphaser-barchart/lists"}