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)

We just released Visifire 2.2.3 beta 3 which implements few features along with two new Financial Charts. Financial Charts were one of the most popular requests from our users. In the first phase we have implemented CandleStick Charts and Stock Charts. We’ll continue to implement new features / improvement in future releases.

Note: This version of Visifire is also compatible with Silverlight 3.

Below is the summary of this release.

New Features / Charts:

1. CandleStick Chart
2. Stock Chart
3. Moving Marker which moves along the line chart when you move the mouse on PlotArea – Use MovingMarkerEnabled property.

Enhancements:

1. Visifire is now compatible with Silverlight 3

Bug Fixes:

1. Interval was getting set as 1 for values ranging within 0 to 1 while it should be less than 1.
2. In some extreme cases Column Chart DataPoints were not getting aligned properly.

Below is a screenshot of newly implemented CandleStick Chart.

You can see live charts in our gallery.

Here is the download link.

Comments(2)

Hi,

This release contains few bug fixes and a new feature. We have implemented DataPointWidth property in Chart. Now you will be able to control the width of a Column/Bar by setting the DataPointWidth property in Chart. Width of DataPoint is calculated as a percentage of PlotArea viewport width.

Bug Fixes:

• Once the chart is rendered using JavaScript, if new DataXML is set, the Chart was not rendering for the first time. Second time onwards it was rendering properly.
• If a blank chart is rendered using JavaScript, it was not possible to update with a new Data XML. Chart threw exception if tried to do so.
• While using JavaScript, if AnimationEnabled property was set to false, Chart was flickering while doing live update. Now this flickering issue has been fixed.

Current release also contains the following enhancements:

• Label Placement for Funnel Chart has been optimized to overcome DataPoint label overlap.

New Features:

• New property DataPointWidth has been introduced at the Chart level which allows the user to control DataPoint width in case of Column and Bar Chart types.

Download Visifire v2.2.3 beta 2 here.

Cheers,
Team Visifire

Comments(2)

Hi,

We have just released Visifire 2.2.3 beta. In this release we have implemented Funnel Charts. You can see them here. You can create two kinds of Funnel Charts namely, StreamLineFunnel and SectionFunnel. You can go through Visifire Documentation to learn more about funnel charts.

Below is a summary of this release.

New Features:

• Funnel Chart
• In a single series Chart, each DataPoint takes different colors from ColorSet. Previously there was no option to override this behaviour. In this release UniqueColors property has been implemented in Chart to achieve it. If UniqueColors property in Chart is set to false, all DataPoints under the DataSeries take same color.

Enhancements:

• Line chart with 5000 or more no of DataPoints took longer time to render. Now it has been optimized.

Bug fixes:

• In line chart if MarkerEnabled property of a DataSeries/DataPoint is set to false, the corresponding legend entry was still displaying the marker while it shouldn’t.

Below is a screenshot of newly implemented Funnel Chart.

Click here to see the live demo.

Download Visifire v2.2.3 beta here.

Cheers,
Team Visifire

Comments(2)

Hi,

We have just released Visfire 2.2.2. This release contains fix for the following bugs

• Left most gap and right most gap was not equal for some cases in DateTime Axis.
• If SelectionEnabled property of DataSeries was set to true for chart type Pie/ Doughnut, selected pie or Doughnut segment was not exploding automatically.
• Grids were not aligned properly for some cases in DateTime Axis.
• In case of Pie/Doughnut chart, if LabelText property was not defined for DataPoint/DataSeries, percentage symbol (%) was not appearing in label displayed beside each Pie/Doughnut segment.

Also we have updated Visifire documentation extensively in this release.

Download Visifire v2.2.2 here.

Cheers,
Team Visifire

Comments(0)

Introduction

In this tutorial am going to show you how to pull SQL data and create a nice chart out of it using Visifire. It just takes few minutes!!

In order to create this sample, I chose Microsoft SQL Server Sample database Northwind.mdf. You can download it here.

Visifire is available in two flavors. One in the form of an assembly which you can use within Silverlight applications and another one packaged as .xap file which you can embed within any webpage. Am using the latter one.

Visifire requires the Data to be furnished in the form of XML through a JavaScript API (Visifire2.js). You can either pass an XML string or specify the URI where XML data is available. In this example am using the latter method. In order to understand the basic XML structure required by Visifire, you can refer the documentation.

Project Setup

Create an “ASP.Net Web Application” project and add a new folder “Visifire”. Download the latest Visifire binaries from here. Extract the Zip file and add two files named “SL.Visifire.Charts.xap” and “Visifire2.js” to the folder. Now, add NORTHWND.MDF file into App_Data folder in the solution.

Am using two aspx pages in this sample.

1. Data.aspx – One which pull the Data from SQL and creates required XML structure out of it. Am using aspx page just to keep it simple.
2. Default.aspx – Chart is embedded into this page.

Below are the steps that we are going to follow.

1. Pull the SQL Data in Data.aspx.cs file.
2. Construct the Data XML inside Data.aspx.cs and return.
3. Embed the Chart into Default.aspx page and set the DataUri to Data.aspx.

Pulling the Data From SQL Server DataBase

Just to keep it simple, am going to pull the Data in an aspx page (Data.aspx.cs), build XML out of it and return.

Open Data.aspx file and remove all the html code except for Page directive. So the page should have only one line of code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Data.aspx.cs" Inherits="Data" %>

Now open Data.aspx.cs file and add the following code to setup a SQL Server DataBase connection inside the Page_Load event handler as shown below.

// Set the NORTHWND.MDF file path

String path = Server.MapPath("App_Data/NORTHWND.MDF");

// Set the connection string

String connectionString = "Data Source=.\\SQLEXPRESS;AttachDbFilename=" + path + ";Integrated Security=True;User Instance=True";

// Query DataBase

String query = "SELECT CategoryName, SUM(ProductSales) AS CategorySales" 

               + " FROM [Product Sales for 1997] " 

               + "GROUP BY CategoryName";

// Initialize the Sql connection

SqlConnection con = new SqlConnection(connectionString);

// Open connection

con.Open();

// Initialize DataTable class

DataTable dt = new DataTable();

// Initialize SqlDataAdapter class

SqlDataAdapter da = new SqlDataAdapter();

// Set the Sql command

da.SelectCommand = new SqlCommand(query, con);

// Fill DataSet with rows

da.Fill(dt);

// Close connection

con.Close();

Creating the XML Data

Now am going to build the Data XML that needs to be passed over to Visifire Chart control. Sample XML Data Looks like below.

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

    <vc:Chart.AxesY>        

        <vc:Axis Prefix="$"></vc:Axis>

    </vc:Chart.AxesY>

    <vc:Chart.Titles>

        <vc:Title Text="Category wise Sales for the year 1997" FontSize="14"/>

    </vc:Chart.Titles>

    <vc:Chart.Series>

        <vc:DataSeries RenderAs="Column">

            <vc:DataSeries.DataPoints>

                <vc:DataPoint AxisXLabel="Beverages" YValue="102074.3100"/>

                <vc:DataPoint AxisXLabel="Condiments" YValue="55277.6000"/> 

                <vc:DataPoint AxisXLabel="Confections" YValue="80894.1400"/> 

                <vc:DataPoint AxisXLabel="Dairy Products" YValue="114749.7800"/>

                <vc:DataPoint AxisXLabel="Grains/Cereals" YValue="55948.8200"/>

                <vc:DataPoint AxisXLabel="Meat/Poultry" YValue="81338.0600"/> 

                <vc:DataPoint AxisXLabel="Produce" YValue="53019.9800"/>   

                <vc:DataPoint AxisXLabel="Seafood" YValue="65544.1800"/> 

            </vc:DataSeries.DataPoints> 

        </vc:DataSeries> 

    </vc:Chart.Series>

</vc:Chart>

You can play around with the Chart Designer to get a better picture of Visifire’s basic features.

Below is the code which generates the required XML.

// Initialize StringBuilder class

StringBuilder chartXml = new StringBuilder();

// Append chart XML data

chartXml.Append("<vc:Chart xmlns:vc=\"clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts\" Width=\"500\" Height=\"300\" Theme=\"Theme1\" >");

chartXml.Append("<vc:Chart.AxesY>");

chartXml.Append("<vc:Axis Prefix=\"$\"></vc:Axis>");

chartXml.Append("</vc:Chart.AxesY>");

chartXml.Append("<vc:Chart.Titles>");

chartXml.Append("<vc:Title Text=\"Category wise Sales for the year 1997\" FontSize=\"14\"/>");

chartXml.Append("</vc:Chart.Titles>");

chartXml.Append("<vc:Chart.Series>");

chartXml.Append("<vc:DataSeries RenderAs=\"Column\" >");

chartXml.Append("<vc:DataSeries.DataPoints>");

foreach (DataRow dataRow in dt.Rows)

    chartXml.Append("<vc:DataPoint AxisXLabel=\"" + dataRow["CategoryName"].ToString() + "\" YValue=\"" + dataRow["CategorySales"].ToString() + "\"/>");

chartXml.Append("</vc:DataSeries.DataPoints>");

chartXml.Append("</vc:DataSeries>");

chartXml.Append("</vc:Chart.Series>");

chartXml.Append("</vc:Chart>");

// Write object to an HTTP response stream

Response.Write(chartXml);

Create Chart

Now open Default.aspx page and add the following code. First we need to add a reference to Visifire2.js file inside the Head section of Default.aspx page.

<head runat="server">

    <script type="text/javascript" src="./Visifire/Visifire2.js"></script>

</head>

Then inside the body, create a div element and add the JavaScript code which renders the Chart.

<div id="VisifireChart0">

    <script type="text/javascript">

        // Create Visifire object

        var vChart = new Visifire2('Visifire/SL.Visifire.Charts.xap', "MyChart", 500, 300);

        // Set Chart Data xml source

        vChart.setDataUri("Data.aspx?reqtime=" + (new Date()).getTime());

        // Render the chart

        vChart.render("VisifireChart0");

    </script>

</div>

Make sure that the path for Visifire2.js and SL.Visifire.Charts.xap files are correct. Set Default.aspx as Start Page and run the application.

Below is a snapshot of the chart.

You can download the complete solution here.

Comments(1)

Today we are releasing 2.2.1 with one new feature. As mentioned in the previous blog, Visifire 2.2.0 allows one to select a DataPoint using mouse or programmatically from Managed Code/JavaScript. But it is limited to one DataPoint per DataSeries. Now Visifire 2.2.1 gives you the ability to select multiple DataPoints.

In order to be able to select multiple DataPoints, you need to set the “SelectionMode” property to “Multiple” in DataSeries. By default SelectionMode will be set to “Single”.

Below is the XAML that I used.

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
                    Width="500" Height="300" Theme="Theme1" BorderBrush="Gray"
                    Padding="8" View3D="True">

            <vc:Chart.Titles>
                <vc:Title Text="Product Sales - 2008"/>
            </vc:Chart.Titles>

            <vc:Chart.Series>
                <vc:DataSeries RenderAs="Pie" SelectionEnabled="True"
                               SelectionMode="Multiple" Bevel="False"
                               LabelText="#AxisXLabel, #YValue" LabelStyle="Inside"  >
                    <vc:DataSeries.DataPoints>
                        <vc:DataPoint AxisXLabel="USA" YValue="320"/>
                        <vc:DataPoint AxisXLabel="UK" YValue="260"/>
                        <vc:DataPoint AxisXLabel="Germany" YValue="180"/>
                        <vc:DataPoint AxisXLabel="France" YValue="120"/>
                        <vc:DataPoint AxisXLabel="Others" YValue="158"/>
                    </vc:DataSeries.DataPoints>
                </vc:DataSeries>
            </vc:Chart.Series>

</vc:Chart>

Apart from SelectionMode property, we have made one more enhancement. Now Selecting/Deselecting a DataPoint programmatically or by mouse causes the DataPoint to Explode/Implode in turn. But it doesn’t work the other way around. As a result of which, Exploded property works independently.

Below is the summary of this release:

New Features:

1. SelectionMode property has been added at the DataSeries level – which allows you to make multiple selection.

Enhancements:

1. Selecting/Deselecting a DataPoint in turn causes the DataPoint to Explode/Implode.

Bug Fixes:

1. Chart used to throw exception whenever there is no DataPoint in the DataSeries.

You can download 2.2.1 here.

- Team Visifire

Comments(1)

Hi,

Visifire 2.2.0 is out of beta. Now Visifire supports DateTime values in AxisX. Exposing itself to wide variety of user data, with numerous bug fixes, Visifire 2.2.0 is emerging out of beta with triumph! Thanks users for pushing Visifire to the limits, with such a wide variety of data. We dedicate this release to you.

This release also comes with one more new feature. DataPoint in a series can be selected on click. A selected DataPoint can be deselected by clicking again on it. On selection the DataPoint stands out visually from the rest & the Selected Property sets to True. Only one DataPoint in a Series can be selected at a Time. In multiple series chart, one DataPoint in each DataSeries can be selected at a time. SelectionEnabled Property in DataSeries is the one which defines if a DataPoint is selectable in that Series. A Chart can be rendered with a DataPoint already selected, by setting Selected to True.

This release contains fix for the following bugs:

• In few cases for Chart types Column & Bar, DataPoint clipped at the either ends.
• If the first DataPoint was close to Axis’s Minimum value, then all DataPoints became small. Now it changes the starting point of Axis accordingly.
• ColorSet couldn’t have been applied from XAML.
• For Chart types Line & Area, gap to the left & right of the chart was more compared to other chart types.
• For Chart types Column & Bar DataPoint Width was dependent on Interval, where as Width should be independent of Interval.
• If Interval was given such that first DataPoint XValue was not a multiple of it, first DataPoint’s Value didn’t appear in Axis Labels at all.
• Scrollbar appeared if there were more number of DataPoints with same XValue.
• In few cases Scrollbar appeared for 2-3 datapoints and not for 5 DataPoints and above.
• In few cases for DateTime values, DataPoints became wider than normal when ScrollBar appeared.
• For DateTime values, DataPoints did not appear, if all of them had same XValue.
• If AxisMinimum was set to a value higher than the lowest of XValues, then AxisY shifted to the right.
• Chart with DateTime values accepted Interval even if IntervalType was not specified.

Current release also contains the following enhancements:

• AxisMinimum and AxisMaximum can now be set for DateTime.
• Now, TrendLine works with DateTime Values.
• Previously, Tag property of visual elements was holding the reference of DataPoint/ DataSeries. Now onwards Tag will hold the information as ElementData, which in turn holds the details of Element (DataPoint / DataSeries) with which it is associated.

DataPoint can be accessed from a Visual element as shown below

void
Chart_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
ElementData eData = (e.OriginalSource as FrameworkElement).Tag as ElementData;
DataPoint dataPoint = eData.Element as DataPoint;
}

Here’s how one of our user was able to use Tag property to make Chart interactive in Microsoft Surface Table with its native events.

Download Visifire v2.2.0 here.

Cheers,
Team Visifire

Comments(0)

Hi,

This release contains fix for the following bugs:

• In Href, ‘?’ character before QueryString was getting replaced by ‘%3F’.
• In BarChart AxisX labels were wrapping automatically into two rows when string length went beyond 15.

Download Visifire v2.2.0 beta 9 here.

Cheers,
Team Visifire

Comments(0)

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)