Every developer wants to create an application that’s  innovative and in line with the latest technology trends, that is why in this blog we are going to see how to build a Windows 8 application using WinJS.  Relying on the Windows Library and Infragistics Windows UI Data Chart and Grid HTML controls we are going to create a dashboard. For the purpose of our sample we are going to use OData Northwind resources .

You can download the HTML Sample Browser from Windows Store directly to your Window 8-powered device and thus you can look through the features and functionality of  Infragistics Windows UI controls.

Adding references

Generally, when we create a Blank App, Visual Studio creates for us default.html, default.js and default.css files. The WinJS references are already included in the default.html file, so the only thing we need to add are the Infragistics scripts after them just like that:

Don’t forget to add the Infragistics UI Library for JavaScript to the references. The reference will be visible in Visual Studio after you install the Infragistics Windows UI package.

Now we are ready to get started with our dashboard.

The Data Chart

To begin with, we must mention that both of the controls we are using are build over the Ignite UI controls and of course they have the same options. You can find more about those controls in the API documentation.

The Data Chart control for Windows UI allows you to display the data in an interactive and attractive way. The HTML Data Chart control offers a full set of dynamic business charts right out of the box. You can choose between different chart designs such as: Line, Spline, Area, Waterfall and other. To initialize the chart control you will need the following lines:

As you can see from the code in the type option you can set the chosen control. The spline chart looks like this:

type: Line                                                                         

type: Waterfall

type: Area

You may have noticed that we are not setting the data source option, that is because we are doing it dynamically. Later in the blog you can see how.

Grid initialization

The HTML grid control with all of its options and events allows you to get more interactivity out of your static HTML tables and data. In our project we will use two tables. The first one will be the main table, which will visualize the products – their name, price and units on order and the second table will visualize the details of a particular product (selected by the user). Let’s start with the basic initialization of the grid and then we will see how to handle the selection event.

To get the information for our tables we will use OData Northwind resources. Use the following code to implement your Grid.

This is how we are creating our main table.

When it comes to the second one the only difference is that like in the data chart we are not setting the dataSource option. The code for it  looks like this:

 

 

It wasn’t so hard, right? So now that we have all elements needed for our dashboard let’s make it work. We want the user to be able to select a particular product and in result of that action we want the detail table to display more information about that product and additionally we want the chart to display updated data. In our case the chart will display the quantity of the product for each order. The grid control  has a lot of events, but the one we need is rowSelectionChanged. As you can see from the documentation the initialization of that event take place in the feature option.

In the default.js file we are going to define a namespace called for example “IgUtility” in which we are going to initialize the data source and the event handler. This part is tricky because we want both of the controls to share the same data source, that is why when we create a standalone data source, we use data bind function and apply the received data to both controls. We also define a function called setData for changing the data source.

As you saw earlier in the rowSelectionChanged event we use a function called rowClick. This function is used for data-win-options so it must be marked manually by calling theWinJS.Utilities.markSupportedForProcessing()  which returns the given function marked as compatible with declarative processing.  In our handler we need the grid and the chart to load the information about the selected item that is why we call setData with the appropriate value as shown:

If you follow the preceding steps you will be able to create a simple basic WinJS dashboard. You can see more about the options and features of data chart control and grid control in the API documentation. 

Sample for the WinJS dashboard.

 

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!