{"id":32235669,"url":"https://github.com/morwalz/angular.spidergraph","last_synced_at":"2026-02-21T03:33:24.855Z","repository":{"id":58234160,"uuid":"33068844","full_name":"morwalz/angular.spidergraph","owner":"morwalz","description":"A directive library for interactive HTML5,jquery spider graph Angular module","archived":false,"fork":false,"pushed_at":"2015-03-29T14:53:49.000Z","size":512,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-23T09:16:39.842Z","etag":null,"topics":["angular","graph","jquery-spider-graph","spider","spiderchart"],"latest_commit_sha":null,"homepage":"http://morwalz.github.io/angular.spidergraph/","language":"JavaScript","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/morwalz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-29T10:18:18.000Z","updated_at":"2020-07-23T08:34:11.000Z","dependencies_parsed_at":"2022-08-31T03:30:15.393Z","dependency_job_id":null,"html_url":"https://github.com/morwalz/angular.spidergraph","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/morwalz/angular.spidergraph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morwalz%2Fangular.spidergraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morwalz%2Fangular.spidergraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morwalz%2Fangular.spidergraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morwalz%2Fangular.spidergraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morwalz","download_url":"https://codeload.github.com/morwalz/angular.spidergraph/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morwalz%2Fangular.spidergraph/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29672704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T03:11:15.450Z","status":"ssl_error","status_checked_at":"2026-02-21T03:10:34.920Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["angular","graph","jquery-spider-graph","spider","spiderchart"],"created_at":"2025-10-22T13:00:56.162Z","updated_at":"2026-02-21T03:33:24.847Z","avatar_url":"https://github.com/morwalz.png","language":"JavaScript","readme":"Angular Spidergraph - Dynamic, interactive spidergraphs in HTML5\r\n========================================================================\r\n\r\nAngular spidergraph is a directive library module that creates nice looking, interactive spidergraphs in HTML5, using the canvas element.\r\nIt is using https://github.com/jmstriegel/jquery.spidergraph internally.\r\nFor more information visit https://github.com/jmstriegel/jquery.spidergraph\r\n\r\nWhat are spidergraphs good for?\r\n---------------------------------\r\n\r\n- illustrating scaled quantitative data for several subjective attributes\r\n- overlaying multiple data measurements for attribute comparison\r\n- visualizing the intersection of several data measurements\r\n\r\n\r\nHow do I use it?\r\n----------------\r\n\r\nMinimum use:\r\n----------------\r\nInclude https://github.com/jmstriegel/jquery.spidergraph jquery spider graph then \r\n\r\nDownload it from here or download via bower \r\n```\r\n    bower install angular-spider-graph\r\n```\r\nangular spider graph\r\n\r\nInclude the module in your app like \r\n```\r\n    angular.module('myApp', ['morwal.spiderGraph'])\r\n```\r\nFirst make a div to contain your graph:\r\n```\r\n    \u003cspider-map labels=\"labels\" ng-model=\"activeData\" active-data=\"activeData\"\u003e\u003c/spider-map\u003e\r\n```\r\nin your controller set active data\r\n```\r\n        $scope.labels =[ \"Designing\", \"Coding\", \"Cycling\", \"Running\"];\r\n        $scope.activeData = [0,1,4,0];\r\n```\r\n\r\nThere is two way binding in model activeData\r\nThats it.\r\n\r\nAdvanced uses\r\n----------------\r\nChange grid color \r\nin controller \r\n```\r\n    $scope.gridColor='rgba(20,20,20,0.2)'\r\n```\r\nIn view \r\n```\r\n    \u003cspider-map labels=\"labels\" ng-model=\"activeData\" active-data=\"activeData\" grid-color=\"gridColor\"\u003e\u003c/spider-map\u003e\r\n```\r\n\r\nChanging configurtion for active data=\r\n```\r\n  $scope.activeConfig={\r\n 'strokecolor': 'rgba(0,204,230,0.8)',\r\n 'fillcolor': 'rgba(0,204,230,0.6)',\r\n 'linear':true\r\n };\r\n```\r\n It is options to set these parameters. linear is default true. You can set it to false on need. \r\n```\r\n \u003cspider-map labels=\"labels\" ng-model=\"activeData\" active-data=\"activeData\" active-config=\"activeConfig\"\u003e\u003c/spider-map\u003e\r\n```\r\nAdd static layers to your data set. Opacity can be used to see through multiple layers.\r\n```\r\n    \u003cspider-map labels=\"labels\" ng-model=\"activeData\" active-data=\"activeData\" grid-color=\"gridColor\" layers=\"layers\"\u003e\u003c/spider-map\u003e\r\n```\r\nThis model will be array. Here only data is complusary paramater.\r\n```\r\n$scope.layers=[\r\n {\r\n 'strokecolor': 'rgba(230,204,0,0.8)',\r\n 'fillcolor': 'rgba(230,204,0,0.6)',\r\n 'data': [5, 4, 9, 8, 1]\r\n }\r\n ];\r\n```\r\n\r\nCan I see an example?\r\n-----------------------\r\n\r\nYes you can. Right over here:\r\n\r\nWho created this\r\n-----------------------\r\nShankar Morwal (https://github.com/morwalz)\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorwalz%2Fangular.spidergraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorwalz%2Fangular.spidergraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorwalz%2Fangular.spidergraph/lists"}