This article is written for users who have never used Code192 Dashboard Platform products. This guide is not intended to be an exhaustive instruction manual or a reference guide.
It’s a walk-through to quickly publish a dashboard using code192 Dashboard Designer and code192 Dashboard server.
In this article, we will connect to a Microsoft SQL Server to get data, create a dashboard using Dashboard Designer and publish it to a server via Dashboard Server. Finally, we will visualize the dashboard in a web browser.
First of all, let’s connect to a Microsoft SQL Server via the Code192 Dashboard Designer
1. Connect to Microsoft SQL Server
After opening the Dashboard Designer, the software invites you to add a data source, let’s do it by clicking Add.
Create the connection to the data source. In our example this will be a database, but it could be Excel, CSV, Wonderware Historian server via our WEB API or a Web data connector.
Let’s use the Microsoft Nothwind Database as sample data. If you want to reproduce this example, don’t hesitate to get it here https://northwinddatabase.codeplex.com/ to restore the database to your SQL Server.
Set the needed information to connect to your server, select the Northwind database.
To ensure the settings are correct, you can click Test Connection, to try to connect to your server. If all the settings are correct, the following window should appear like below.
Click OK to close the confirmation message.
Then, click on the Connect button in New Connection dialog. Now the following view is displayed.
The left pane holds a list of existing Data Connections, including the first one that was added automatically with your DataSource1.
By clicking on a Connection1, it reveals the list of tables and views associated with the connected database.
Click on the + sign next to DBO, + sign next to Tables, then Drag the Orders table from the left pane and drop into the centre pane labelled Drag & drop tables to create a virtual table.
The virtual table Connection1_Orders appears like below.
Now that we have configured our connection and set our data, let’s compose the dashboard.
2. Compose Dashboard
Navigate to the dashboard design view by clicking on Back to dashboard like below.
Now, let’s add a Widget to Design View. For our example, let’s say we want to use a line chart to display the SUM of freight each month depending on our shipped orders through the year.
So, let’s drag the Line Chart Widget.
Once you have dropped the widget, you can resize if required like below, by placing the focus over the widget and dragging its corners.
Let’s display it a bit bigger like here (sample data used at the moment):
Now, let’s assign data. Click on Assign Data.
Now, the widget view opens in a new tab like below.
Let’s drag and drop the freight field to the values field and the ShippedDate field to the columns field like below.
Then, you can change the columns display by clicking on the gear button like below
Let’s change value from Year to Month like below
Then the settings are applied like below and we can go back to the designer window by clicking on the dashboard tab like below
3. Publish to server
a) Connect to dashboard server
If you’re not logged to the server, you can follow these steps or you can jump to the b) section (Publish to server) below.
Click the Server menu and select the Login… menu item to launch the login window.
Then set the values in the following windows to login to the server
Set the server URL depending on your Dashboard server installation. Especially if you use IIS or IIS Express. Here is how to know on which port the service is running.
For IIS express you can get the server URL through the windows task bar by doing a right click on the IIS Express icon and selecting your website like below:
For IIS, In the Administrative Tools window, double-click Internet Information Services (IIS) Manager. Or you can run it directly by doing this:
In the Start Search box, type inetmgr and press ENTER.
The IIS manager opens like below, on the left pane, expand the sites folder, then click on your server’s name site like below.
Then you will have the port information shown below: (browse website in English)
Once you know your server address, fill the username and the password field, and click Login.
b) Publish to server
After being logged to your server, you can publish your dashboard, but before, you will first have to create a category in the Dashboard Server.
If you do already have a category set, you can jump to the next step (Publish server to a category).
Navigate to your Dashboard server in a web browser using its URL then, click on the Create button in the menu and select Category to create a category.
New categories can be added by providing name and description(optional) for the category.
Once it’s done, you will be able to publish your dashboard via the Dashboard Designer.
Now you can publish your dashboard by clicking on Publish > Dashboard like below through the server menu:
You will be prompted with the publish dialog like below.
Select your category, set the Dashboard name, description (optional) and version comment(optional) and click Publish. The following window appears:
The dashboard server may ask you to login like below:
Log into the server, now you can visualize your published dashboard.