{"id":7015,"date":"2019-01-02T18:00:05","date_gmt":"2019-01-02T18:00:05","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=7015"},"modified":"2018-12-27T07:50:21","modified_gmt":"2018-12-27T07:50:21","slug":"custom-wifi-polar-chart-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2019\/01\/02\/custom-wifi-polar-chart-javascript\/","title":{"rendered":"Custom WiFi Polar Chart in JavaScript \u2014 Challenge AnyChart!"},"content":{"rendered":"

\"CustomSolving challenges is a thing that the AnyChart team can\u2019t live without, and we willingly continue to share some of the most interesting customer cases within the framework of Challenge AnyChart!<\/a> on our blog. This feature gives us a great chance to help customers with similar tasks and demonstrate the unlimited data visualization capabilities of our JavaScript charting library<\/a> time after time. The challenge being solved along today\u2019s tutorial is about building a beautiful WiFi polar chart<\/strong> \u2014 a custom interactive JS (HTML5) polar chart<\/a> that displays devices depending on the WiFi signal strength.<\/p>\n

<\/p>\n

Data Visualization Task<\/h2>\n

The question a customer wanted us to answer is:<\/p>\n

How to use AnyChart charting library to create a polar chart showing devices in different reception zones: excellent, good, medium, and bad?<\/strong><\/em><\/p><\/blockquote>\n

To\u00a0illustrate how the chart should look like, the customer attached the following picture:<\/p>\n

\"Customer's<\/p>\n

They also mentioned that the numbers in the picture should be accompanied by icons to visually represent the type of each device.<\/p>\n

Solution Overview<\/h2>\n

The\u00a0polar chart class methods<\/a>\u00a0of the AnyChart API will be a great help in solving this interesting data visualization task.<\/p>\n

To begin with, draw a polar chart and add a color palette for different reception zones.<\/p>\n

Then make the data points look like devices and work on the chart legend a bit more to\u00a0tune up the visualization.<\/p>\n

Creating WiFi Polar Chart<\/h2>\n

Follow the JS polar charts documentation<\/a> to draw\u00a0a chart and add a palette.<\/p>\n

You can set data for the polar chart as follows:<\/p>\n

var data = [\r\n    {x: 0,   value: 0, signal: 0, name: \"WiFi hotspot\", deviceType: \"wifi\", mac: 'BF-AD-3A-36-A4-BE'},\r\n    {index: 1, x: 0,   value: 2, signal: -8, name: \"iPhone X\", deviceType: \"phone\", mac: 'D6-18-CD-D4-DE-D2'},\r\n    {index: 2, x: 90,  value: 4, signal: -35, name: \"Samsung s8\", deviceType: \"phone\", mac: '03-ED-5C-E2-76-F4'}\r\n  ];\r\n<\/code><\/pre>\n
After it\u2019s done, create a function responsible for linking images to the data points using the deviceType<\/code> field already defined in the data:<\/p>\n
function placeImages() {\r\n    var src;\r\n    if (this.getData(\"deviceType\") === \"phone\")\r\n      src = \"https:\/\/image.flaticon.com\/icons\/svg\/65\/65680.svg\";\r\n    if (this.getData(\"deviceType\") === \"wifi\")\r\n      src = \"https:\/\/image.flaticon.com\/icons\/png\/128\/34\/34143.png\";\r\n    return {\r\n      src: src,\r\n      mode: 'fit',\r\n      opacity: 1\r\n    }\r\n  }\r\n<\/code><\/pre>\n
The function is executed when adjusting the series appearance:<\/p>\n
series.normal().fill(placeImages);\r\nseries.selected().fill(placeImages).stroke('#0f4b86', 3);\r\n<\/code><\/pre>\n
The last thing\u00a0you need here is set up a legend for the WiFi polar chart using anychart.standalones.legend()<\/a>:<\/p>\n
var legend = anychart.standalones.legend();\r\n    var legendItems = [\r\n      {\r\n        text: 'Excellent',\r\n        iconType: \"square\",\r\n        iconFill: '#6cd053',\r\n        iconStroke: {color: 'black', thickness: 2}\r\n      },\r\n<\/code><\/pre>\n
And make it interactive on mouse hover by adding the following code:<\/p>\n
legend.listen(\"legendItemMouseOver\", function(e){\r\n      \/\/ highlight the area\r\n      polar.yGrid().palette().itemAt(e.itemIndex + 1, \"White 0.7\");\r\n    });\r\n    legend.listen(\"legendItemMouseOut\", function(e){\r\n        \/\/ reset the grid to default\r\n\t    polar.yGrid().palette(gridPalette);  \r\n    });\r\n<\/code><\/pre>\n
That\u2019s it! The custom JavaScript-based WiFi polar chart is ready. It can be found and modified on the\u00a0AnyChart Playground<\/a>.<\/p>\n