Silverlight and WPF Enterprise Dashboard

somnath

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.

Cheers,
Team Visifire


Sparkline Charts using Visifire

admin

In this blog I’ll show how to create Sparkline Charts using Line charts from Visifire.

Let me start by showing a sample of the sparkline chart: image

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:

 image

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.


Real-time Charts using Visifire

admin

With the latest version of Visifire you can re-render the charts from JavaScript. I’ll show how to use this feature to create a real time chart.

To create real-time charts from JavaScript follow these steps:

  1. Create a chart.
  2. Call a function to get updated XML.
  3. Call render function to display the chart.
  4. Repeat from step 2.

It’s that simple, see the JavaScript code below:

<div id="Div1"> 
    <script type="text/javascript">  

        //Create new chart 
        var vChart1 = new Visifire('ClientBin/Visifire.xap',500,300); 

        //An array to store data 
        var data = new Array(50); 

        //Initialize array with default values 
        data = initializeData(data); 

        function update() 
        { 
            //Update array with latest data 
            data = updateData(data); 

            //Generate chart XML using latest data 
            var chartXML = updateChartXML(data); 

            //Set the XML for the chart 
            vChart1.setDataXml(chartXML); 

            //Call render to display the chart 
            vChart1.render("Div1"); 

            //Repeat after every second 
            setTimeout(update,1000); 
        } 

        //update the chart 
        update(); 

    </script> 
</div>

The following image is the screen shot of real-time chart example. Click on the image see it in action:

image

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.