{"id":846,"url":"https://github.com/chasseurmic/TWRCharts","last_synced_at":"2025-07-30T19:32:33.647Z","repository":{"id":16458055,"uuid":"19210035","full_name":"chasseurmic/TWRCharts","owner":"chasseurmic","description":"An iOS wrapper for ChartJS. Easily build animated charts by leveraging the power of native Obj-C code.","archived":false,"fork":false,"pushed_at":"2014-06-30T21:11:44.000Z","size":941,"stargazers_count":360,"open_issues_count":13,"forks_count":51,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-11-07T12:47:29.740Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","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/chasseurmic.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-04-27T16:40:51.000Z","updated_at":"2024-07-09T09:44:38.000Z","dependencies_parsed_at":"2022-08-04T09:30:09.661Z","dependency_job_id":null,"html_url":"https://github.com/chasseurmic/TWRCharts","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chasseurmic%2FTWRCharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chasseurmic%2FTWRCharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chasseurmic%2FTWRCharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chasseurmic%2FTWRCharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chasseurmic","download_url":"https://codeload.github.com/chasseurmic/TWRCharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228178896,"owners_count":17881105,"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-01-05T20:15:32.823Z","updated_at":"2024-12-04T19:32:01.964Z","avatar_url":"https://github.com/chasseurmic.png","language":"Objective-C","funding_links":[],"categories":["Charts","UI"],"sub_categories":["Other free courses","Getting Started"],"readme":"TWRCharts\n=================\n\n## TWRCharts\n\nAn Obj-C wrapper for ChartJS. Easily build animated charts by leveraging the power of native code.\n\nTWRCharts is yet another charting library for iOS. TWRCharts is basically an effort to port the famous ChartJS Javascript library to native Obj-C code; its power lies in the fact that it gives developers the flexibility to choose between loading a ChartJS Javascript file (more on this later) into a TWRChartView, or using native methods to build either a line / bar or circular (pie / doughnut) chart.\n\nLoading the chart from a Javascript file is very easy though little configurable and dynamic, whereas by using the native extension the user can update and refresh data on the fly. The final choice is up to you!\n\nNative code API does not yet support all type of charts provided by ChartJS; only line, bars, pies and doughnuts are currently available.\n\nTWRCharts's main class is ```TWRChartView```, a subclass of ```UIWebView``` backed by an HTML file that the user never has to deal with. The API has been engineered to make it feel like a fully native experience, both from a developer and an end user point of view.\n\n![TWRCharts Demo](http://cocoahunter-blog.s3.amazonaws.com/TWRCharts/twrcharts_optimized.gif)\n\n## Usage\n\nUsage is easy.\n\nAdd the dependency to your `Podfile`:\n\n```ruby\nplatform :ios\npod 'TWRCharts'\n```\n\nRun `pod install` to install the dependencies.\n\nNext, import the header file wherever you want to use the custom view:\n\n```objc\n#import \u003cTWRCharts/TWRChart.h\u003e\n```\n\nIn the Xcode target \"Build Phases\" add the files (index.html and Chart.js) under \"Copy Bundle Resources\".\n\n### Creating the chart view\n\nJust declare a ```TWRChartView``` property in your header file and instantiate it as you would do with a normal view by defining its frame rect. Then just add it to your controller's view hierarchy.\n\n```objc\n// Chart View\n_chartView = [[TWRChartView alloc] initWithFrame:CGRectMake(0, 64, 320, 300)];\n\n// Optionally assign here a JS file (see below)\n\n// Add the chart view to the controller's view\n[self.view addSubview:_chartView];\n```\n\n### Loading a chart from a JS file\n\nDrop in your Xcode project a .js file and make sure it's been added to the resources that are being bundled with the project in the build phases of your project.\n\nThen just get a handle on the file and set its path to the TWRChartView that's being added to the controller's view.\n\n```objc\nNSString *jsFilePath = [[NSBundle mainBundle] pathForResource:@\"file\" ofType:@\"js\"];\n[_chartView setChartJsFilePath:jsFilePath];\n```\n\nYou can use any of the chart types currently supported by [ChartJS](http://www.chartjs.org). Here's an example of how you would load a Polar Chart.\n\n```js\nvar context = document.getElementById(\"canvas\").getContext(\"2d\");\nvar polarData = [\n    {\n        value : 30,\n        color: \"#D97041\"\n    },\n    {\n        value : 90,\n        color: \"#C7604C\"\n    },\n    {\n        value : 24,\n        color: \"#21323D\"\n    },\n    {\n        value : 58,\n        color: \"#9D9B7F\"\n    },\n    {\n        value : 82,\n        color: \"#7D4F6D\"\n    },\n    {\n        value : 8,\n        color: \"#584A5E\"\n    }\n]\n\nvar polarArea = new Chart(context).PolarArea(polarData);\n```\n\nIf you're planning on to use JS files to load your charts, be sure to make the following as the first line of your *.js* file:\n\n```js\nvar context = document.getElementById(\"canvas\").getContext(\"2d\");\n```\n\nThis code retrieves the correct context from the HTML file that backs the TWRChartView.\n\n### Loading a chart using native Obj-C code\n\nDepending on the type of chart you want to plot (bar / line / pie...) you need to instantiate different objects, but mainly you need to follow these steps:\n\n- Instantiate data objects;\n- Instantiate a chart object by passing the data objects along with labels;\n- Load the chart object onto the chart view.\n\nHere's some example code:\n\n```objc\n// Build chart data\nTWRDataSet *dataSet1 = [[TWRDataSet alloc] initWithDataPoints:@[@10, @15, @5, @15, @5]];\nTWRDataSet *dataSet2 = [[TWRDataSet alloc] initWithDataPoints:@[@5, @10, @5, @15, @10]];\n\nNSArray *labels = @[@\"A\", @\"B\", @\"C\", @\"D\", @\"E\"];\n\n// Instantiate the chart object\nTWRLineChart *line = [[TWRLineChart alloc] initWithLabels:labels\n                                                 dataSets:@[dataSet1, dataSet2]\n                                                 animated:NO];\n\n// Load the chart object onto the view\n[_chartView loadLineChart:line];\n```\n\n#### Data Sets\n\nTWRDataSet (which represents the data for bar and line charts) can be instantiated with the following *init* method:\n\n```objc\n- (instancetype)initWithDataPoints:(NSArray *)dataPoints\n                         fillColor:(UIColor *)fillColor\n                       strokeColor:(UIColor *)strokeColor\n                        pointColor:(UIColor *)pointColor\n                  pointStrokeColor:(UIColor *)pointStrokeColor;\n```\n\nYou can customize the fill and stroke colors for either the bar or the line chart. For the latter one you can also choose the point fill and point stroke colors.\n\nAt a minimum you have to provide the data points, which is an array of NSNumbers.\n\n#### Line / Bar Charts\n\nLine and bar charts can be instantiated as such:\n\n```objc\n- (instancetype)initWithLabels:(NSArray *)labels\n                      dataSets:(NSArray *)dataSets\n                      animated:(BOOL)animated;\n```\n\nWhen passing the chart objects to the chart view, you need to call one of the following methods called on your instance of ```TWRChartView``` according to the type of object you are dealing with:\n\n```objc\n- (void)loadBarChart:(TWRBarChart *)barChart;\n- (void)loadLineChart:(TWRLineChart *)lineChart;\n```\n\nA sweet final touch: you even have an option to call the above methods with a completion handler to get a callback whenever the chart animation finishes. You wouldn't even guess that there's a bunch of Javascript code running underneath!\n\n```objc\n- (void)loadBarChart:(TWRBarChart *)barChart withCompletionHandler:(TWRAnimationCompletionBlock)block;\n- (void)loadLineChart:(TWRLineChart *)lineChart withCompletionHandler:(TWRAnimationCompletionBlock)block;\n```\n\n#### Circular Charts\n\nAnd finally, circular charts can be instantiated with the following method:\n\n```objc\n- (instancetype)initWithValues:(NSArray *)values\n                        colors:(NSArray *)colors\n                          type:(TWRCircularChartType)type\n                      animated:(BOOL)animated;\n```\n\nYou even get a chance to choose the chart type, either a pie chart (TWRCircularChartTypePie) or a doughnut (TWRCircularChartTypeDoughnut).\n\nAnd again, once you have the chart object, you can add it to the chart view with one of the following two methods called on your instance of ```TWRChartView```:\n\n```objc\n- (void)loadCircularChart:(TWRCircularChart *)circularChart;\n- (void)loadCircularChart:(TWRCircularChart *)circularChart withCompletionHandler:(TWRAnimationCompletionBlock)block;\n```\n\n## Requirements\n\n`TWRCharts` requires iOS 6.x or greater.\n\n\n## License\n\nUsage is provided under the [MIT License](http://opensource.org/licenses/mit-license.php).  See LICENSE for the full details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchasseurmic%2FTWRCharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchasseurmic%2FTWRCharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchasseurmic%2FTWRCharts/lists"}