Test the application

First, clear our local storage data once again.

Type and run the following code in the console:

localStorage.clear()

Now, refresh the page and the chart and grid should be empty.

We are going to add some users to the application, but first we need to take a look at something. Click on the add button for the pop up. Move the pop-up window over the chart by dragging the header. In the current version, at the time of writing this book, the chart has a higher z-index than the pop-up window, which doesn't allow us to use the pop up correctly. This can be fixed with a small CSS change.

If you are having this issue, let's fix it by going into our index.html CSS and adding the following CSS to the end of our styles:

.dhx_chart{ z-index: 1; }

Now, refresh the page and try using the pop up once again. Everything works and the pop-up window is on top once again.

Let's start adding some data. Use the pop-up window to add the following users:

• John Smith, [e-mail], 1-1-1963

• Tim Smith...