Hi,

This release contains fix for the following bugs:

• In Line Chart, if LightingEnabled property was set to true in DataSeries then lighting was not applied over the symbol of line shown in Legend.
• In CandleStick multiseries Chart, color of the symbol displayed in legend was not as same as PriceUpColor defined in DataSeries.
• StreamLineFunnel and SectionFunnel Chart threw exception if YValue property was set to true for all DataPoints.

Current release also contains the following enhancements:

• Shadow can be applied to CandleStick and Stock Chart by setting the ShadowEnabled Property to true in DataSeries/DataPoint.
• In CandleStick Chart, if PriceUpColor is not defined then default color for PriceUpColor will be applied from the default ColorSet named CandleLight.

Download Visifire v2.2.3 beta 5 here.

Cheers,
Team Visifire

Comments(0)

Hi,

This release contains fix for the following bugs:

• In a Line chart if MovingMarkerEnabled property was set to true for a DataSeries, moving-marker was visible over the first DataPoint. Instead it should be visible only if mouse enters inside the PlotArea.
• Axis was misaligned in a chart with very less height if Title property was set for it.

Download Visifire v2.2.3 beta 4 here.

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,

The wait is over. Visifire 2.0 beta is here! Visifire 2.0 is a complete rewrite of Visifire 1.x, it is a result of complete architectural overhaul. We had to make changes in the XAML structure. The XAML used by Visifire 1.x is incompatible with Visifire 2.0. A notable change in XAML is that similar elements are grouped under an element collection. Visifire 2.0 follows the best practices laid down by Microsoft for component development. In Visifire 2.0 all properties are dependency properties. Dependency properties provide a way to compute the value of a property based on the value of other inputs.

The major features in this release are:-

Visifire works in WPF too
Visifire 2.0 boasts of multi-targeting feature. A single API to draw charts in Silverlight or WPF or WPF Browser Application. Yes, its true, you can start using Visifire in your desktop applications also.

Realtime Update
Any property of Visifire charts can be updated in realtime. No need to redraw the chart. Visifire1.x supported realtime update through Javascript, but not from managed code. We learnt that Visifire is being extensively used in managed code & updating charts in realtime is one of the most coveted feature. Hence, we implemented it. Real time update is showcased both in Chart Designer & Gallery.

Scrollable Charts
The name says it all. You can scroll the datapoints inside the charts. All chart types in the Gallery have an example showcasing this feature.

Styling
Visifire 2.0 charts can be styled. If you want to make the charts look the way you want & still harness the flexibility of Visifire, you can do so by styling the charts globally.

Editable in Blend
Designing requires a good Design Tool. It is true even for Silverlight Apps & that’s why Microsoft has Expression Blend. Visifire charts can now be designed in Microsoft Expression Blend.

Elegant Animation
Currently Visifire2.0 contains only one animation per chart type. The same animation doesn’t look good for all chart types. Hence, for every chart type a specific animation has been handpicked & polished to perfection.

Download Visifire 2.0 beta here.

This blog will be followed by a series of blogs on new features of Visifire2.0 & their implementation, so stay tuned.

PS: Forget not to check out Chart Designer. It updates the chart instantly & no longer requires redraw!

Cheers,

Team Visifire

Comments(5)

Hi,

The following bugs have been fixed in this release

• Chart type StackedArea100 crashed on setting YValue = 0 for any DataPoint.
• In DataPoint, the property MarkerEnabled was being taken true for both boolean values.
• ToolTip and Events were not working with 3D Chart if AnimationType = Type4 and no. of DataPoint > 900.
• Pie and Doughnut Charts threw exception on MouseOver event with Href being set.
• ShadowEnabled threw exception when chart is drawn from managed code.

Enhancements

• Improved Axis Label Placement.
• LineStyle will be reflected on LegendEntry in Legend.

Download the latest release here.

Cheers,
Team Visifire

Comments(0)

Hi,

Visifire now works with Silverlight 2. In fact no changes were required to port Visifire from
Silverlight 2 RC0 (Visifire v1.5.0 was released recently to developers with Silverlight 2 RC0 compatibility).

All live examples in the website are successfully tested against Silverlight 2.
Download your copy of Visifire here.

Thanks for listening,

Team Visifire

Comments(14)

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:

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.

Comments(6)

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:

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.

Comments(3)