Visifire 2.2.2 released

somnath

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


Creating Silverlight Charts from SQL Data using ASP.Net and Visifire

vivek

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.

solutionexplorer

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.

blogimage

 

You can download the complete solution here.


Visifire 2.2.1 released with one new feature

admin

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”.

image

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


Visifire 2.2.0 Released!

Chirag

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


Visifire 2.2.0 beta 9 Released

Chirag

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