{"id":13702240,"url":"https://github.com/airblade/chartjs-ror","last_synced_at":"2025-04-12T19:50:51.029Z","repository":{"id":8808100,"uuid":"10504573","full_name":"airblade/chartjs-ror","owner":"airblade","description":"[Not supported - see #53] Simplifies using Chart.js in Rails","archived":false,"fork":false,"pushed_at":"2022-04-09T15:06:43.000Z","size":898,"stargazers_count":184,"open_issues_count":12,"forks_count":57,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-30T02:36:54.496Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Ruby","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/airblade.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-05T14:32:31.000Z","updated_at":"2024-07-15T06:27:31.000Z","dependencies_parsed_at":"2022-09-02T11:51:30.558Z","dependency_job_id":null,"html_url":"https://github.com/airblade/chartjs-ror","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airblade%2Fchartjs-ror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airblade%2Fchartjs-ror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airblade%2Fchartjs-ror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airblade%2Fchartjs-ror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/airblade","download_url":"https://codeload.github.com/airblade/chartjs-ror/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625501,"owners_count":21135513,"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-08-02T21:00:32.672Z","updated_at":"2025-04-12T19:50:51.001Z","avatar_url":"https://github.com/airblade.png","language":"Ruby","readme":"# chartjs-ror\n\nSimplifies using [Chart.js][] in Rails views.\n\n\n## Current Chart.js version\n\nThis gem includes [Chart.js v3.7.1](https://github.com/chartjs/Chart.js/tree/v3.7.1).\n\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n    gem 'chartjs-ror'\n\nAnd then execute:\n\n    $ bundle\n\nAfter that require Chart:\n\n  ```javascript\n  //= require Chart.min\n  ```\n\nPlease note Chart.js [no longer supports IE8 and below](https://github.com/chartjs/Chart.js/issues/2396#issuecomment-215233106).\n\n\n## Usage\n\nEach chart type has a corresponding helper for your views.  The helper methods take the same arguments as their Javascript counterparts.  The `options` are optional.\n\n\n```erb\n\u003c%= line_chart           data, options %\u003e\n\u003c%= bar_chart            data, options %\u003e\n\u003c%= horizontal_bar_chart data, options %\u003e\n\u003c%= radar_chart          data, options %\u003e\n\u003c%= polar_area_chart     data, options %\u003e\n\u003c%= pie_chart            data, options %\u003e\n\u003c%= doughnut_chart       data, options %\u003e\n\u003c%= bubble_chart         data, options %\u003e\n\u003c%= scatter_chart        data, options %\u003e\n```\n\nIf you don't want these helpers – perhaps they clash with other methods in your views – add this initializer to your app:\n\n```ruby\n# config/initializers/chartjs.rb\nChartjs.no_conflict!\n```\n\nThen you can use these helpers instead:\n\n```erb\n\u003c%= chartjs_line_chart           data, options %\u003e\n\u003c%= chartjs_bar_chart            data, options %\u003e\n\u003c%= chartjs_horizontal_bar_chart data, options %\u003e\n\u003c%= chartjs_radar_chart          data, options %\u003e\n\u003c%= chartjs_polar_area_chart     data, options %\u003e\n\u003c%= chartjs_pie_chart            data, options %\u003e\n\u003c%= chartjs_doughnut_chart       data, options %\u003e\n\u003c%= chartjs_bubble_chart         data, options %\u003e\n\u003c%= chartjs_scatter_chart        data, options %\u003e\n```\n\nFor example, to render a [line chart][linechart] in Javascript:\n\n```javascript\nvar data = {\n    labels: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\"],\n    datasets: [\n        {\n            label: \"My First dataset\",\n            backgroundColor: \"rgba(220,220,220,0.2)\",\n            borderColor: \"rgba(220,220,220,1)\",\n            data: [65, 59, 80, 81, 56, 55, 40]\n        },\n        {\n            label: \"My Second dataset\",\n            backgroundColor: \"rgba(151,187,205,0.2)\",\n            borderColor: \"rgba(151,187,205,1)\",\n            data: [28, 48, 40, 19, 86, 27, 90]\n        }\n    ]\n};\nvar options = { ... };\nnew Chart(ctx, {\n    type: 'Line',\n    data: data,\n    options: options\n});\n```\n\nThe Ruby equivalent is:\n\n```ruby\ndata = {\n  labels: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\"],\n  datasets: [\n    {\n        label: \"My First dataset\",\n        backgroundColor: \"rgba(220,220,220,0.2)\",\n        borderColor: \"rgba(220,220,220,1)\",\n        data: [65, 59, 80, 81, 56, 55, 40]\n    },\n    {\n        label: \"My Second dataset\",\n        backgroundColor: \"rgba(151,187,205,0.2)\",\n        borderColor: \"rgba(151,187,205,1)\",\n        data: [28, 48, 40, 19, 86, 27, 90]\n    }\n  ]\n}\noptions = { ... }\n\u003c%= line_chart data, options %\u003e\n```\n\nYou can also use underscored symbols for keys, instead of the camelcase versions.\nThey will be converted to their lower camelcase counterparts on output.\n\n```ruby\ndata = {\n  labels: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\"],\n  datasets: [\n    {\n        label: \"My First dataset\",\n        background_color: \"rgba(220,220,220,0.2)\",\n        border_color: \"rgba(220,220,220,1)\",\n        data: [65, 59, 80, 81, 56, 55, 40]\n    },\n    {\n        label: \"My Second dataset\",\n        background_color: \"rgba(151,187,205,0.2)\",\n        border_color: \"rgba(151,187,205,1)\",\n        data: [28, 48, 40, 19, 86, 27, 90]\n    }\n  ]\n}\noptions = { ... }\n\u003c%= line_chart data, options %\u003e\n```\n\n### Options\n\nYou can put anything in the `options` hash that Chart.js recognises.  To pass a JavaScript function as an option value, wrap it in quotation marks to make it a string.\n\nYou can also use these non-Chart.js settings:\n\n* `:class`          - class of the DOM canvas element - default is `chart`.\n* `:id`             - id of the DOM canvas element - default is `chart-n` where `n` is the 0-based index of the chart on the page.\n* `:width`          - width of the canvas in px - default is `400`.\n* `:height`         - height of the canvas in px - default is `400`.\n\n\n## Sample output\n\n```html\n\u003ccanvas id=\"chart-0\" class=\"chart\" width=400 height=400\u003e\u003c/canvas\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  //\u003c![CDATA[\n  (function() {\n    var initChart = function() {\n      var ctx = document.getElementById(\"chart-0\");\n      var chart = new Chart(ctx, {\n        type: \"Line\",\n        data = { ... };\n        options = { ... };\n      });\n    };\n\n    if (typeof Chart !== \"undefined\" \u0026\u0026 Chart !== null) {\n      initChart();\n    }\n    else {\n      if (window.addEventListener) {\n        window.addEventListener(\"load\", initChart, false);\n      }\n      else if (window.attachEvent) {\n        window.attachEvent(\"onload\", initChart);\n      }\n    }\n  })();\n  //]]\u003e\n\u003c/script\u003e\n```\n\nThe Javascript is actually written out on a single line but you get the idea.\n\n\n## Intellectual Property\n\nCopyright Andrew Stewart, AirBlade Software.  Released under the MIT licence.\n\n\n  [Chart.js]: http://www.chartjs.org/\n  [linechart]: http://www.chartjs.org/docs/#line-chart\n\n","funding_links":[],"categories":["Integrations"],"sub_categories":["Others"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairblade%2Fchartjs-ror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fairblade%2Fchartjs-ror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairblade%2Fchartjs-ror/lists"}