Hi,

This release contains fix for the following bugs:

• In WPF, style couldn’t have been applied from Dynamic Resource in XAML. (In Silverlight it is not possible yet)
• Rendered event of Chart was firing only for the first time render of the Chart. Now, it fires on each render.

Current release also contains the following enhancements:

• DataPoint and DataSeries references are attached to Tag property of its corresponding visual elements. So, DataPoint can be identified using Tag property under which it belongs.
• In WPF, Theme can be changed at realtime. Any of the available 3 Themes or Custom Theme can be applied.
  For example: Chart.Theme =”MyTheme”, where MyTheme is the file name of the Theme file with out .xaml extension. Please find a sample project illustrating this here.

Download Visifire v2.2.0 beta 8 here.

Cheers,
Team Visifire

Comments(1)

Hi,

This release contains fix for the following bugs:

• On mouse button events of PlotArea, XValue returned only Date instead of DateTime when XValueType was set to DateTime.
• ScrollBarOffset property could have been set only at the first time render.
• In WPF, FlowDirection property didn’t behave as expected.

Current release also contains the following enhancements:

• Removing the chart from the UIElement took longer time. Now it has been optimized.

Download Visifire v2.2.0 beta 7 here.

Note: Visifire v2.2.0 beta 5 & 6 were never released for the public.

Cheers,
Team Visifire

Comments(0)

Hi,

This release contains fix for the following bugs:

• For DateTime Axis XValue property of a DataPoint was not formatted according to the culture used by current thread.
• ScrollBarOffset didn’t return correct value if ScrollBar position was changed manually using mouse.
• If Line, Point or Bubble charts are combined, some of the DataSeries went missing, when similar chart types are not grouped together.

Current release also contains the following enhancements:

• Events for MouseLeftButtonDown and MouseLeftButtonUp on PlotArea, are provided. Event arguments will provide XValue for the corresponding point. So, one should be able to find out the selected region and DataPoints within by using XValue.
• Once the chart renders completely, Rendered event fires. As soon as chart is fully rendered and DataPoints are visible on the screen only then the Rendered event of the chart will be fired. Please note that Rendered Event does not wait for the Animation to be complete.

Download Visifire v2.2.0 beta 4 here.

Cheers,
Team Visifire

Comments(1)

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

Comments(0)

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>

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>

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>

Cheers,

Team Visfire

Comments(11)

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

Comments(0)

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.

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.

Comments(4)

Hi,

This is a moment of joy! Visifire 2.x is officially shedding its beta tag today. After keeping Visifire 2.x for reasonably longer period under beta, we are able to bring out a much stable version of it. During this period, we have made it undergo tests under extreme limits & with wide range of input data. Visifire users, you guys rock! Without your input, we could have never tested Visifire under such panoptic variety of data. Feature seekers, thanks for hanging on. We should start working on your requests soon.

As usual, below is the list of changes since last release.

• The property - Cursor & ZIndex can be changed in real-time.
• Default Angle will be 90 degree anti-clockwise if HorizontalAlignment property of Title is set to Right & VerticalAlignment property is set to Center.

Download Visifire v2.1.0 here.

Cheers,
Team Visifire

Comments(2)

Hi,

Release of Visifire v2.x Final is imminent. One should find very less changes from the current release to the final one. The notable change in this release is completely re-factored code. This release contains fix for the following bugs:

• If the title was aligned to left/right, window stopped responding while resizing.
• Chart did not render as expected if Margin & Padding were set for Title.
• Newline Character “\n” did not work in the property - ToolTipText of any element.
• Chart threw exception, if it was added into a stackpanel without specifying Height & Width.

This release also contains the following changes:

• The Property - Color, has been renamed to Background, only for the elements - PlotArea & Axis.
• Default value for the property - Orientation of element - TrendLine has been changed from Vertical to Horizontal.

And the following enhancements:

• The property - Opacity can be changed in real-time.
• Handling of empty DataPoints in chart type - Line has been optimized. If one wants the points on the either side of the empty DataPoint to be connected, she has to set Enabled property of DataPoint to “False”. If set to “True” the line would break.

Download Visifire v2.0.10 beta here.

Cheers,
Team Visifire

Comments(0)

Comments(4)