Online demo: DevExpress Election Results Demo
The demo is built using the Angular 2 framework and DevExtreme widgets. Last week, we released the WinForms Election Results Demo that uses our WinForms Map and Grid controls. We designed this new web demo with DevExtreme Data Visualization widgets to show you that DevExpress helps you to create stunning apps across different platforms.
How it's made?
The full source code and data for this demo is available on Github. To run the demo on your local machine, execute these steps:
- Download or
git clonethe respository
- Navigate to http://localhost:4200/ (if your browser is not launched automatically)
Let's dive into how this demo is built.
The data for this demo is the same data that we used in the WinForms Election Demo. The state and county map data comes from the U.S. Census Bureau. The election data from the Federal Election Commission and The Guardian. Election data was normalized and stored in JSON format.
Step 1 - Create the App
The best way to create new Angular 2 application is to use Angular CLI. Install it globally using the
npm install -g angular-cli console command. Then execute the
ng new dx-election to create an application. You only need to do this command once.
Step 2 - Generate Components and Services
Each UI part of the demo's user interface is a component in the Angular 2 app model. Therefore the 'year switcher' or the bar chart with vote totals are Angular 2 components using DevExtreme Data Visualization.
To create a new component, we use the ng generate component console command. For example,
ng generate component map generates the ".html", ".ts", and ".css" files in '/src/app/map' directory. Then three services were generated using command
ng generate service. Each service provides the following data: states, counties, and votes.
Step 3 - Add DevExtreme to the App
Using DevExtreme widgets with Angular 2 requires that the appropriate npm package are installed. The
npm install devextreme-angular --save command adds all necessary files and includes the devextreme-angular package in the package.json file.
Theme stylesheet files should be included in the 'angular-cli.json' file. The widgets used in the app should be imported in the 'src/app/app.module.ts' file. Then all imported widgets can be used as application components.
Step 4 - Work with Binary Data in DevExtreme VectorMap
DevExpress.viz.vectormaputils.parse. Next we added election data to the object to colorize the map according to vote results.
Then the '<dx-vector-map>' tag is added to the component markup file. The [layers] attribute describes states and counties layers and binds the resulting data source with map and election data to the vector map widget. This provides the Vector Map to drill down by state and counties:
Step 5 - Use DevExtreme Charts
A DevExtreme Bar Chart is used to show vote percentages by state (or county). A DevExtreme Full Stacked Bar Chart shows national results of electoral and total votes. Both app components get the data from the VotesService. Component markup contains tag with widget options and data bindings.
Try it today
Candidate photos courtesy of Gage Skidmore