SharePoint Charts v1.0.5-1 GA Released!

somnath

Hi,

Visifire for SharePoint now supports Drilldown. This  functionality allows you to get more detailed data when a DataPoint is clicked in the Chart.  For more info please  check out the documentation here.

You can download Visifire for SharePoint 1.0.5-1 GA here.

Cheers,
Team Visifire


Fast Silverlight Charts

Chirag

Hi,

You know that we are working on optimizing the performance of charts. I am happy to share that we are done optimizing the overall performance of the charts – QuickLine chart to start with. Both initial render (drawing chart for the first time) & real-time render (updating chart in real-time) are now blazing fast. With these changes, Visifire is one of the fastest Silverlight charts! This blog contains benchmark figures & samples to corroborate our claim.

You’d feel the need of faster charts only when there is high number of datapoints. For less datapoints any charting component would suffice. Time taken by a component to plot datapoints on a chart for the first time (initial render) is a key metric to decide the performance. We did a small exercise to calculate the number of datapoints a charting component could draw in one second. For comparison we are using Visiblox, a fairly quick chart from Scott Logic. We supplied 10,000 through 50,000 datapoints to both charting components. We repeated the exercise to get 10 sample figures. Later, took an average to find out the number of datapoints that could be drawn in a second. Visifire could draw anywhere between 14,500 to 13,200 datapoints in a second. Whereas Visiblox could draw a maximum of 6,800 datapoints & the performance degraded drastically as the datapoints increased. Below are the benchmark figures:

Visifire, Visiblox - Charting Performance Comparison

Note: More the datapoints per second, faster the chart.

Embedded below is the application used to calculate the benchmark figures. You can play around with it & decide who is fast!

Get Microsoft Silverlight

Get Microsoft Silverlight

Note: Lesser the time taken, faster the chart.

Measuring framerate is a good way of finding the real-time rendering performance of a chart. We have just borrowed some samples from Visiblox post. You can play around with the following sample & decide who is fast!

Get Microsoft Silverlight

Get Microsoft Silverlight

Note: More the frames per second, faster the chart.

The source code of the above samples is available in these archives [sample1, sample2] for you to verify. The samples don’t contain charting libraries & are to be downloaded separately. Feel free to comment on this exercise.

Cheers,
Chirag
Team Visifire
Fire up your imagination!


Windows Phone 7 Mango Ready Charts & Gauges

admin

Microsoft has announced that the forthcoming version of its Windows Phone operating system, code-named Mango, has brought over 500 new features, most notably:

  • Search – location specific, visual voice music search.
  • Dynamic – more control over live tiles.
  • Social – social networking with Linked In and Twitter.
  • Web – better browsing with hardware acceleration and IE9.
  • Groups – group people together friends, colleagues, family.
  • Multitasking – switching between apps is now a breeze.

windows-phone-7-mango-image

Microsoft is accepting and certifying Mango apps through the App Hub, new and existing titles optimized for Mango features will begin publishing soon.

We are happy to inform that our Visifire controls are Mango compatible. This means your WP7 applications using Visifire can make use of new features like multitasking and hardware acceleration, with which they will not only work faster but also make the user experience better.


Gesture support for Visifire WP7 (Windows Phone 7) Charts

Chirag

Hi,

We showcased the use of Visfire in WP7 (Windows Phone 7) way back a year ago. Since then we concentrated much on increasing the chart types & also introduced gauges. Now that the adoption of WP7 is increasing we are getting serious on WP7. This release contains gesture support for WP7. It supports gestures like pinch-zoom, panning and selection.

Embedded below is a short video showcasing gesture support in Visifire for WP7.

This release is just the beginning. Going forward, we are channelizing our energy to make the charting experience on WP7 even smoother & richer. Coming soon are:

  • Selection of a group of DataPoints
  • Tooltips on multi-touch
  • Controls optimized for resource constraint devices like phone
Give it a spin & let us know what you think. Download the latest release here.

Cheers,
Team Visifire


Open Source Silverlight Charts Visifire now supports Silverlight 3!

Chirag

Hi,

Come, exploit the features of Silverlight 3. Visifire now works with Silverlight 3. All we had to do was fixing some glitches in Line Chart to make Visifire compatible with Silverlight 3.

All live examples in the website are successfully tested against Silverlight 3. Download your copy of Visifire 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.


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.


Sparkline Charts using Visifire

admin

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: image

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:

 image

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.


Real-time Charts using Visifire

admin

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:

image

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.


Advanced JavaScript Event Handling in Visifire Charts

admin

Have a look at the previous blog to get an idea of how to attach event. In this blog I’ll be showing the different ways in which events can be attached.


Create a chart using the Chart Designer or refer Documentation on how to create it. You can work on the events from the chart designer itself.

Lets start by attaching an alert to the DataPoint for MouseLeftButtonUp event. JS events have to be attached as shown in the following code. Here I have written the code for the alert box within the attachEvent function itself.

<script type="text/javascript"> 
        var vChart1 = new Visifire('Visifire.xap', 500,300);
        vChart1.setDataUri("Data.xml");
        
        // Event is attached here
        vChart1.attachEvent("DataPoint","MouseLeftButtonUp","alert('Event Fired');");
        
        vChart1.render("VisifireChart0");
</script>

If you save and refresh the HTML page you’ll see the chart. Just click on any DataPoint and you’ll see the alert box.

Click on the image below to see live demo:

image

Let me show few other ways in which the same thing can be achieved. The attachEvent function accepts the callback function code in the form of string or you can pass the function itself.

Other than writing the JS code for the event within the attachEvent function, you can also pass the callback function. The following code shows the callback function that I’ll be using.

<script type="text/javascript">
    function callBack(e)
    {
        alert("Event Fired");
    }
</script>

You can pass the function name while attaching events as shown below:

// Attaching events
vChart1.attachEvent("DataPoint","MouseLeftButtonUp","callBack");

or you can pass the function itself:

// Attaching events
vChart1.attachEvent("DataPoint","MouseLeftButtonUp",callBack);

You can attach the same callback function for multiple elements and multiple times. See the example below. Here I have attached the alert function twice to DataPoint.

// Attaching events
vChart1.attachEvent("DataPoint","MouseLeftButtonUp",callBack1);
vChart1.attachEvent("DataPoint","MouseLeftButtonUp",callBack2);

The functions will be called in the order in which they were attached to the element. There are six elements (AxisX, AxisY, Chart, DataPoint, Legend, Title) to which any of the five supported JS events can be attached (MouseLeftButtonUp, MouseLeftButtonDown, MouseMove, MouseEnter and MouseLeave). You can attach these events to any of the elements in the list in any combination, any number of times.

In the following example, I have attached an alert to DataPoint and for Title and Legend I have attached a callback function.

// Alert is written within the attachEvent function
vChart1.attachEvent("DataPoint","MouseLeftButtonUp","alert('DataPoint');");

// CallBack function name is passed as a string
vChart1.attachEvent("Title","MouseLeftButtonDown","callBack");

// CallBack function is passed as a parameter
vChart1.attachEvent("Legend","MouseLeftButtonUp",callBack);

code for the callback function that I have used in the example:

<script type="text/javascript">
    function callBack(e)
    {
        alert(e.Element);
    }
</script>

Click on the image to see the live demo:

image

For more information please have a look at the Visifire Documentation.

You can download the samples here.


Next Page »