Enterprise dashboards provide rich data visualization for analyzing data. A dashboard – for eg. sales dashboard is a vital tool for C-level executives, business managers and sales persons. This sales dashboard is a demo application using rich set of Visifire controls to analyze product wise monthly revenue of a fictitious company. It also shows sales conversion ratio showing how successful the sales team is in converting the leads to sales. Based on several parameters shown in the dashboard the decision makers can make informed decisions.
This dashboard application is built based on MVVM pattern and best practices. MVVM follows three basic blocks called Model, View and ViewModel. The figure below shows basic blocks of the dashboard application.
Model: The Model is also called DataModel which contains business objects and model classes. It is independent of the View(UI).
View: The View contains visual elements displayed to the user and allows the user to interact with it.
ViewModel: The ViewModel represents the “Model of the View” which is also a mediator between View and the Model. It exposes the model’s data that is needed by the View.
In this Sales dashboard, the model represents business objects which include Model classes (Order and SalesConversion classes). View mainly represents user interface (XAML) and handles user interaction. “ProductWiseSalesView” contains chart controls to display product wise monthly revenue distribution, sales in volumes like sales conversion ratio, number of licenses sold with or without support and new licenses vs upgrades. The “ProductWiseSalesView” also contains two Gauge controls which displays annual revenue for a particular product. User interacts with the View. Content of the View is handled in the ViewModel through binding. The binding between View and ViewModel is done by setting ViewModel as the DataContext of the View. The ViewModel is derived from ModelBase class which in turn implements INotifyPropertyChanged interface to support DataBinding. Hence when ViewModel properties are changed, new changes are automatically reflected in the View.
Click here to view the dashboard.
You can download the source code from here.
In this blog I’ll show how to create Sparkline Charts using Line charts from Visifire.
The following XML is a bare bone XML required to create sparkline charts:
<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts" AnimationEnabled="False" Padding="1" BorderThickness="0" Watermark="False"> <vc:AxisX Enabled="False"/> <vc:AxisY Enabled="False" StartFromZero="False"/> <vc:DataSeries RenderAs="Line" LabelEnabled="False" MarkerEnabled="False" > . . . </vc:DataSeries> </vc:Chart>
Highlighting of the various points has to be done by selecting the color for the marker.
To highlight any point you have to enable the marker for the point and set the color. If color is not selected then default color will be applied. Also set the marker size as per requirement. Have a look at the example below, it shows how to highlight the start and end points.
<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts" Theme="Theme1" AnimationEnabled="False" Padding="1" BorderThickness="0" Watermark="False"> <vc:AxisX Enabled="False"/> <vc:AxisY Enabled="False" StartFromZero="False"/> <vc:DataSeries RenderAs="Line" LabelEnabled="False" MarkerEnabled="False" MarkerSize="5" LineThickness="0.5" Color="Black"> <vc:DataPoint YValue="44.01" MarkerEnabled="True" Color="Blue" /> . . . <vc:DataPoint YValue="44.5" MarkerEnabled="True" Color="Blue" /> </vc:DataSeries> </vc:Chart>
Any point can be highlighted to show its importance
The screen shot below shows a HTML table containing Visifire sparkline charts, click on the image below to see silverlight example:
The code for this example can be downloaded from the here.
Visifire sparkline charts support all events that are supported by line charts and hence can be easily used for creating drill down charts.
- Create a chart.
- Call a function to get updated XML.
- Call render function to display the chart.
- Repeat from step 2.
The following image is the screen shot of real-time chart example. Click on the image see it in action:
You can download the source for this example here.
The re-rendering process can also be used if the updated XML is stored in files, by using the chart.setDataUri function.