Last active
May 6, 2017 17:45
-
-
Save ramiroaznar/72ffa4a01128378e99d581e8115e009a to your computer and use it in GitHub Desktop.
How to add a formula, histogram & category widget to a dashboard using deepinsights.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Deep-Insights.js | Highest Mountains</title> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <meta name=viewport content="width=device-width initial-scale=1"> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/di.js/v0/themes/css/deep-insights.css" /> | |
| <script src=" http://libs.cartocdn.com/di.js/v0/deep-insights.uncompressed.js"></script> | |
| <style type="text/css"> | |
| html, body { | |
| position:relative; | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="dashboard"></div> | |
| | |
| <script> | |
| window.onload = function() { | |
| // set vizJson | |
| var vizJSON = "https://team.cartodb.com/u/ramirocartodb/api/v3/viz/6396c6b2-1c47-11e6-9401-0e674067d321/viz.jsonn"; | |
| // create dashboard | |
| cartodb.deepInsights.createDashboard('#dashboard', vizJSON, { | |
| no_cdn: false, | |
| cartodb_logo: false | |
| },function(err,dashboard){ | |
| // get map object | |
| var map = dashboard.getMap(); | |
| // set widgests parameters | |
| var histo = { | |
| "type": "histogram", | |
| "title": "Elevation Histogram", | |
| "column": "elevation", | |
| "bins": 10 | |
| }; | |
| var avg = { | |
| "type": "formula", | |
| "title": "Elevation Average", | |
| "column": "elevation", | |
| "operation": "avg" | |
| }; | |
| var region = { | |
| "type": "category", | |
| "title": "Region Category", | |
| "column": "region" | |
| }; | |
| var name = { | |
| "type": "category", | |
| "title": "Name Category", | |
| "column": "name" | |
| }; | |
| // add a widgets to the layer | |
| dashboard.createFormulaWidget(avg,map.getLayer(3)); | |
| dashboard.createHistogramWidget(histo,map.getLayer(3)); | |
| dashboard.createCategoryWidget(region,map.getLayer(3)); | |
| dashboard.createCategoryWidget(name,map.getLayer(3)); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment