Visifire 2.2.0 beta 3 Released

somnath

Hi,

This release contains the following enhancements:

  • Property – LinesStyle in DataSeries applies even for Marker that appears in Legend.
  • If property –  MarkerType in DataSeries or DataPoint  is specified for a Line chart, same type of marker will be used to display entries in Legend.

Download Visifire v2.2.0 beta 3 here.

Cheers,
Team Visifire


DateTime Axis with Visifire

Chirag

Current release includes a major feature – DateTime Axis. If the XValue of the DataPoints are of type DateTime, Visifire automatically switches XAxis to Date Axis. For more precision on the visualization following properties can be used.

Two properties have been introduced:

  1. XValueType in DataSeries, and
  2. IntervalType in AxisX.

XValueType can have any of these following values

  • Auto (Default)
  • Numeric
  • Date
  • DateTime, or
  • Time

IntervalType property can have any of these following values

  • (Default) Auto
  • Number
  • Years
  • Months
  • Weeks
  • Days
  • Hours
  • Minutes
  • Seconds, or
  • Milliseconds

By default the XValueType is set to Date, if XValue is of type DateTime. To consider both date & time in the axis, XValueType should be set to DateTime. If you want to consider only the Time part of DateTime, it can be done so by setting XValueType to Time.

IntervalType will be set to the most relevant one internally, according to XValues. However, it can be set manually according to the requirement.

Below are some samples for DateTime Axis.

DateTime Axis Example:

<vc:Chart Name="MyChart" Theme="Theme1" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
          Width="500" Height="300" ScrollingEnabled="False">

    <vc:Chart.Titles>
        <vc:Title Text="DateTime Axis"/>
    </vc:Chart.Titles>

    <vc:Chart.AxesX>
        <vc:Axis IntervalType="Days">
        </vc:Axis>
    </vc:Chart.AxesX>

    <vc:Chart.Series>
        <vc:DataSeries RenderAs="Column" XValueType="DateTime">
            <vc:DataSeries.DataPoints>
                <vc:DataPoint XValue="1/30/2000 12:00:12" YValue="20"/>
                <vc:DataPoint XValue="2/15/2000 10:12:4" YValue="10"/>
                <vc:DataPoint XValue="3/02/2000 23:00:6" YValue="30"/>
                <vc:DataPoint XValue="2/03/2000 18:45:10" YValue="40"/>
                <vc:DataPoint XValue="2/02/2000 12:00:00" YValue="15"/>
                <vc:DataPoint XValue="2/28/2000 12:22:00" YValue="28"/>
            </vc:DataSeries.DataPoints>
        </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

Click to see DateTimeAxis in action

Date Axis Example:

<vc:Chart Name="MyChart" Theme="Theme1" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" ScrollingEnabled="False">

    <vc:Chart.Titles>
        <vc:Title Text="Date Axis"/>
    </vc:Chart.Titles>

    <vc:Chart.AxesX>
        <vc:Axis IntervalType="Months" Interval="1">
        </vc:Axis>
    </vc:Chart.AxesX>

    <vc:Chart.Series>
        <vc:DataSeries RenderAs="Column" XValueType="Date">
            <vc:DataSeries.DataPoints>
                <vc:DataPoint XValue="1/5/2000 12:00:12" YValue="20"/>
                <vc:DataPoint XValue="2/8/2000 10:12:4" YValue="10"/>
                <vc:DataPoint XValue="3/2/2000 23:00:6" YValue="30"/>
                <vc:DataPoint XValue="2/3/2000 18:45:10" YValue="40"/>
                <vc:DataPoint XValue="4/2/2000 12:00:00" YValue="15"/>
                <vc:DataPoint XValue="5/6/2000 12:22:00" YValue="28"/>
            </vc:DataSeries.DataPoints>
        </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

Click to see DateAxis in action

Time Axis Example:

<vc:Chart Name="MyChart" Theme="Theme1" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" ScrollingEnabled="False">

     <vc:Chart.Titles>
         <vc:Title Text="Time Axis"/>
     </vc:Chart.Titles>

     <vc:Chart.AxesX>
         <vc:Axis IntervalType="Seconds">
         </vc:Axis>
     </vc:Chart.AxesX>

     <vc:Chart.Series>
         <vc:DataSeries RenderAs="Column" XValueType="Time">
             <vc:DataSeries.DataPoints>
                 <vc:DataPoint XValue="1/30/2000 1:00:12" YValue="20"/>
                 <vc:DataPoint XValue="2/15/2000 2:2:4" YValue="10"/>
                 <vc:DataPoint XValue="3/02/2000 2:12:6" YValue="30"/>
                 <vc:DataPoint XValue="2/03/2000 2:28:10" YValue="40"/>
                 <vc:DataPoint XValue="8/02/2000 3:12:6" YValue="30"/>
                 <vc:DataPoint XValue="2/04/2000 8:12:10" YValue="40"/>
             </vc:DataSeries.DataPoints>
         </vc:DataSeries>
     </vc:Chart.Series>
 </vc:Chart>

Click to see TimeAxis in action

Cheers,

Team Visfire


Visifire v2.2.0 beta 2 Released

Chirag

Hi,

This release includes a major feature – DateTime Axis. If the XValue of the DataPoints are of type DateTime, Visifire automatically switches XAxis to Date Axis. This post will be followed by a detailed post on DateTime Axis.

Also, contains fixes for the following bugs:

  • ToolTip movement was not smooth if “\n” was used in ToolTipText of any chart element.
  • Chart couldn’t have been included in DataTemplate of a control, due to NameScope specification.
  • Events for DataSeries and DataPoints in multi-series chart fired twice when attached.
  • Visifire2.js: preLoad & loaded events were not cleared (detached) even after the chart was rendered.

Download Visifire v2.2.0 beta 2 here.

Note: Visifire v2.2.0 beta 1 was never released for public.

Cheers,
Team Visifire


Drilldown Silverlight Charts using Visifire

Chirag

Creating Drilldown chart is a common requirement in any RIA dashboard. Drilldown charts give rich user experience. In this blog let’s see how we can create drilldown charts using Visifire.

In this sample application, chart can be drilled down till 2 levels. The default chart would show yearly sales of a fictitious company for the period 2006-2008. On click of column representing the sales for an year, monthly sales for that year is shown up. Further it can be drilled down to find product wise sales for the selected month.

This sample uses Javascript API to generate charts. The complete application can be downloaded from here. The code is completely commented & explained wherever necessary. Refer the rest of the blog if you need more help.

Click to see the sample in action

Data can be pulled in from any data source. To keep the example simple let’s store the sales data in an array.

var sales;
// Create array for the Sales data
sales = [{year: 2006, month: "Jan", ProductX: 20000, ProductY: 25000, ProductZ: 15000},
         {year: 2006, month: "Feb", ProductX: 10000, ProductY: 23000, ProductZ: 25000},
         {year: 2006, month: "Mar", ProductX: 22000, ProductY: 38000, ProductZ: 83000},
         {year: 2006, month: "Apr", ProductX: 23456, ProductY: 32435, ProductZ: 24223},
         {year: 2006, month: "May", ProductX: 25142, ProductY: 32415, ProductZ: 10923},
         {year: 2006, month: "Jun", ProductX: 18254, ProductY: 15342, ProductZ: 10934},
         {year: 2006, month: "Jul", ProductX: 18562, ProductY: 19832, ProductZ: 10293},
         {year: 2006, month: "Aug", ProductX: 28376, ProductY: ..............

Construct the XML string from the data stored in the array.

function getYearlySales()
{
    isChart1Added = true;
    var myXAML;
    // Constructing Data XAML
    myXAML = '<vc:Chart Theme="Theme2" Width="650" Height="450" ColorSet="Visifire1" Background="Black" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" >' + "\n" + "\n";
    myXAML = myXAML + '<vc:Chart.Titles>' + "\n";
    myXAML = myXAML + '<vc:Title Text= "Yearly Sales" />' + "\n";
    myXAML = myXAML + '</vc:Chart.Titles>' + "\n";
    myXAML = myXAML + '<vc:Chart.PlotArea>' + "\n";
    myXAML = myXAML + '<vc:PlotArea Background= "#0A0A0A" />' + "\n";
    myXAML = myXAML + '</vc:Chart.PlotArea>' + "\n";
    myXAML = myXAML + '<vc:Chart.AxesX>' + "\n";
    myXAML = myXAML + '<vc:Axis Title="Year" />' + "\n";
    myXAML = myXAML + '</vc:Chart.AxesX>' + "\n";
    myXAML = myXAML + '<vc:Chart.AxesY>' + "\n";
    myXAML = myXAML + '<vc:Axis Title="Amount" Prefix="$" />' + "\n" + "\n";
    myXAML = myXAML + '</vc:Chart.AxesY>' + "\n";
    myXAML = myXAML + '<vc:Chart.Series>' + "\n";
    myXAML = myXAML + '<vc:DataSeries RenderAs="Column">' + "\n";
    myXAML = myXAML + '<vc:DataSeries.DataPoints>' + "\n";
    sales.sort(sortByYear);
    var totalSales = 0;
    currYear = sales[0].year;
    for (var arrayIndex = 0; arrayIndex < sales.length; arrayIndex++)
    {
        if(sales[arrayIndex].year == currYear)
        {
            currYear = sales[arrayIndex].year;
            totalSales += sales[arrayIndex].ProductX + sales[arrayIndex].ProductY + sales[arrayIndex].ProductZ;
        }
        else
        {
            myXAML = myXAML + '<vc:DataPoint AxisXLabel="' + currYear + '" YValue="' + totalSales + '"/>' + "\n";
            totalSales = 0;
            currYear++;
        }
    }
    myXAML = myXAML + '<vc:DataPoint AxisXLabel="' + currYear + '" YValue="' + totalSales + '"/>' + "\n";
    myXAML = myXAML + '</vc:DataSeries.DataPoints>' + "\n";
    myXAML = myXAML + "\n" + '</vc:DataSeries>' + "\n";
    myXAML = myXAML + '</vc:Chart.Series>' + "\n";
    myXAML = myXAML + '</vc:Chart>';
    return myXAML;
}

First, create the chart for yearly sales. Next, attach an event handler for “MouseLeftButtonUp” event to the DataSeries. On fire of this event, this chart is replaced with a chart with monthly sales for the year represented by the selected DataPoint in that DataSeries. Event handler can be attached as shown in the code snippet below.

// Attaching event handler for MouseLeftButtonUp event
vChart1.preLoad = function(args) {
    chart1 = args[0];
    chart1.Series[0].MouseLeftButtonUp = function(e) {
        onMouseUpMonthlySales(e.AxisXLabel); //Calling the function to replace the chart
    };
};

Use the same logic to replace this chart with a chart with product wise sales for the selected month. The crux of a drilldown chart is to attach an event handler to update the chart on fire of some event. I think we have accomplished the same swiftly in this sample. A link/button to return back to the previous state of the chart would give a holistic user experience.

You can see the sample in action here. The complete solution can be downloaded from here.

Cheers,

Team Visifire.