From raw data to an embedded solution

Here you'll learn how to create a simple voting application with a real-time dashboard that will be embedded into a website.


Understanding the application

The example you’ll see on this tutorial is a voting application which the user will choose between what color is better for him - green or blue. Users are presented with a choice and have to input their email in a field, so their vote is registered. This means you can collect whatever type of data you want - email, name, country, age - and send it directly to SlicingDice.

This framework could be used for user ratings, for example. It can be used internally in companies, for end users on their websites and even in mobile apps. Below you can check the voting application that will be created and the dashboard to visualize the computed votes.

Email
Each email can vote once.
Vote!


  • Registering and creating a database

    To follow each step of this tutorial you need to have a SlicingDice account. If you already have one, just log in, otherwise, you can register a new account on SlicingDice's control panel using your email and password. SlicingDice offers free test databases and no credit card is needed.

    After that you should create a database that will be used to store the data collected by the application. To create it, access the Databases section on the Data Warehouse Module and click on Create New Database where a 5-step wizard will appear. On wizard Step 1 you'll need to provide the basic database configuration defining its name as Tutorial, deploying it on OVH and selecting its type as Test.

    Screenshot of Step 1 of Creating a database

    Now click on Save & Continue to go to the next step. On the wizard Step 2 you'll model your database, creating columns to store the data from the application. For this use case we'll have only two columns:

    Column Name Column Type Dimension Description
    entity-id Unique ID default Already created by default on the dimension. This column will contain the user email.
    color String default Should be created by you on the dimension. This column will contain the chosen color for a given user - green or blue.

    As you can see, the entity-id column is created by default and it'll store the emails from users. The color column should be created clicking on Create New Column, defining its name as color and its type as String. Also, choose the dimension default to contain this column and define the storage type as latest inserted value as you can see on the image below.

    Screenshot of Step 2 of Modeling a database

    After that, click on Create Column and the new color column should appear on the schema tree. Now click on Save & Continue until the end of the wizard where you can Submit your database creation request. Notice that the next two ignored steps on the wizard are used to secure your database, which isn't the focus of this tutorial so you can skip them for now.


  • Inserting data

    Now that you've created the database to be used on this application you'll have to insert some sample data so you can be able to create a dashboard on the next step. Access the SlicingDice workbench, select the appropriate database and paste the following SQL code to execute a insertion on the database you've created before.

    INSERT INTO
      default ([entity-id], color)
    VALUES
      ('1fake@mail.com', 'green');
    INSERT INTO
      default ([entity-id], color)
    VALUES
      ('2fake@mail.com', 'blue');
    
    Inserting data using SQL on the Tutorial database

    Click on Run Command and you'll receive a message confirming that the insertion occurred with success. You can also confirm if the data was correctly inserted executing a SELECT * FROM default query. Now you're able to create the dashboard to visualize the inserted data.


  • Creating a dashboard

    Now you'll create a dashboard to visualize the data stored on your database. Access the Data Visualization Tool, click on the database you've created (Tutorial) and click on Browse datasets. Write a SQL query to select the columns and data you want to be shown on the dashboard you'll create. You can use a simple SELECT * FROM Tutorial.default to select all data stored and filter it using the Visualization tool itself. Click on Run and then, click on Done to choose a name for this dataset created. Check how to do it below:

    Creating dataset on the Data Visualization tool

    You'll see that a dataset with the name you chose is now created on your library. Click on this dataset and select the Create dashboard option to start defining it. The first chart we'll add to this dashboard is a viewer that shows the total number of votes (records) stored. To do it click on the Tutorial dataset created before, choose the Chart Type as Single Value and Add the measure as Number of records. You can add filters or format the chart elements as you prefer on the Filter and Format tabs.

    Creating number of records viewer on the Data Visualization tool

    After that, you'll add a Donut chart to your dashboard to visualize how many users voted on green and how many users voted on blue. Click on Insert and choose the Donut chart to be created. Add color as your dimension and number of records as your measure.

    Creating donut chart on the Data Visualization tool

    Now you can customize the charts as you prefer exploring the Filter and Format tabs while editing them. Feel free to explore the tool trying to get to the result we've made here:

    Final dashboard

    You can click on Save and define a name to your dashboard. Now you're ready to embed your dashboard on your voting application from your website.


  • Embedding the dashboard into a website

    To embed the dashboard on your application you should just use the iframe provided by SlicingDice. To retrieve this Iframe code you should access the Data Visualization Tool, click on Dashboards on the menu and access the dashboard you have just created.

    Click on the options menu, select Share & Export and then click on Get link. This way you'll be able to see the Embed code to be used on your application.

    Creating dataset on the Data Visualization tool

    The voting application code we built for this tutorial is available to download on the link below. Notice that the only thing you need to change on it is you API Key that should refer to your created database and the Iframe code that should be changed to use the one you build: http://download.slicingdice.com/voting-application.zip


  • EXTRA: Adding interactions between charts

    On this step you'll add an interaction to your charts, so when you click on some slice of the Donut chart the Number of records viewer will be updated showing the quantity of records stored for the color you have clicked.

    To configure it double click on the Donut chart you have created, go to the Format tab and access the Chart section. Click on Actions, select the Selection option and choose the Number of Votes Cast viewer that you already have in your dashboard. Then, click on Done and Done again. After that save your dashboard and test if the interaction is working disabling the edition mode and clicking on the donut chart slices.

    Creating dataset on the Data Visualization tool

    Notice that when saving a dashboard, all changes are immediately applied to it, so you don't have to change anything in your embedded code. Everything will be updated automatically.


  • Visualizing the results

    Below you'll be able to see the dashboard results you created on this tutorial. We've created a simple application that receives an email address and you can vote to blue or green. To try out this application, insert an e-mail on the field shown on the Understanding the application section and wait for one minute to check if your vote was counted (the created dashboard was configured to check for updates every minute).