Now that we have a slide-out, let's move on to visualizations. We now want to add an information graphic that displays some statistics about the prices of the products. So, let's use a box plot! D3 offers a nice example at http://bl.ocks.org/mbostock/4061502. We will take this code and adapt it for use with this dashboard. Let's start with the CSS for the box plots. This is located in the index.html
section of the tutorial. Copy all the CSS except for the body
class to the dashboard.css
file in the App. In that same section, find the irq
function, and copy that into the dashboard.js
file. Now, find the box.js
section. Copy the entire function to a file under appserver/static/js
. Download and place a copy of d3.min.js
in appserver/static/js
. Once these files are in place, add them to the RequireJS stack using the methods described in the last section. D3 won't have a dependency but the box plot requires D3. This completes the initial dependency setup for the visualization...
Argentina
Australia
Austria
Belgium
Brazil
Bulgaria
Canada
Chile
Colombia
Cyprus
Czechia
Denmark
Ecuador
Egypt
Estonia
Finland
France
Germany
Great Britain
Greece
Hungary
India
Indonesia
Ireland
Italy
Japan
Latvia
Lithuania
Luxembourg
Malaysia
Malta
Mexico
Netherlands
New Zealand
Norway
Philippines
Poland
Portugal
Romania
Russia
Singapore
Slovakia
Slovenia
South Africa
South Korea
Spain
Sweden
Switzerland
Taiwan
Thailand
Turkey
Ukraine
United States