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.
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:
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!
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!
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.
Fire up your imagination!
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.
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.
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
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.
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.
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.
- 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.
- Default.aspx – Chart is embedded into this page.
Below are the steps that we are going to follow.
- Pull the SQL Data in Data.aspx.cs file.
- Construct the Data XML inside Data.aspx.cs and return.
- 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.
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.
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.
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.
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.
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.
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.
Data can be pulled in from any data source. To keep the example simple let’s store the sales data in an array.
Construct the XML string from the data stored in the array.
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.
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.
In this blog I’ll show how to create Sparkline Charts using Line charts from Visifire.
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.
- Create a chart.
- Call a function to get updated XML.
- Call render function to display the chart.
- Repeat from step 2.
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.
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.
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:
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.
// Attaching events vChart1.attachEvent("DataPoint","MouseLeftButtonUp","callBack");
// 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:
Click on the image to see the live demo:
For more information please have a look at the Visifire Documentation.
You can download the samples here.