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(2)

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)

With this new release we have introduced a feature that allows you to easily re-render charts to give real time effect. It’s amazingly easy to create real-time charts with this new feature. See this blog for more details.

Features:

• Render function in visifire.js is updated, such that it can re-render charts.

Bug Fixes:

• LabelAngle property in AxisX was not functional.
• Cursor property in DataSeries was not being applied to 3D charts.

Thanks for you attention,

Team Visifire

Comments(0)

Hi,

Visifire has been successfully ported to Silverlight 2 Beta 2.

Below are the few changes done to achieve compatibility :

1. Explicit typecasting of constants while setting dependency properties like TopProperty, LeftProperty etc.
2. Resources are now added with a key element and resource object reference , instead of passing just the reference.
3. The Target property for animations has been changed from String to PropertyPath object.

Hey, there is more to add, Visifire now supports the most coveted feature : Secondary Y - Axis. Check this post for more info.

Thanks for listening,

Team Visifire

Comments(1)

Visifire v1.0.11 Beta is released with the most coveted feature: Secondary Y Axis. Visifire is now compatible with Silverlight 2 Beta 2. You can download the latest release from the download page. 

New Feature:

• Secondary Y Axis - In the DataSeries use AxisYType="Secondary" to specify the reference axis for the DataSeries and Visifire automatically creates the secondary axis. To change the settings of the Secondary Y Axis just create a regular AxisY and set the attribute as AxisType="Secondary". If this attribute is not set then the default axis type will be "Primary". Have a look at the Visifire Gallery for charts having Secondary Y Axis.

Bug Fixes / Enhancements:

• ToolTipEnabled property for trend line was redundant, as providing ToolTipText enables it automatically. Hence it was removed.
• ScalingEnabled property for AxisX/AxisY was redundant, as providing ScalingSets enables it automatically. Hence it was removed.
• Exception was being thrown in Area Charts if there was only one DataPoint in a DataSeries.

Thanks for your attention,

Team Visifire

Comments(1)

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:

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:

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

You can download the samples here.

Comments(3)

Visifire 1.0.10 beta comes with JavaScript Event handling feature. If you don’t have the latest version of the Visifire, download it here.

In the tutorial below, I will explain how to handle Visifire events in JavaScript. For simplicity, I have chosen MouseLeftButtonDown for this exercise. We are going to attach an event handler for MouseLeftButtonDown and  whenever we click on a DataPoint, event handler function pops up an alert box  displaying some of the event arguments.

Step 1:

Create an HTML page named JsEventTest.html which contains the code to creates a chart. Code looks as below.

<html>
<head>
    <title>Visifire Test Page</title>
    <script type="text/javascript" src="Visifire.js"></script>
</head>
<body>
    <div id="VisifireChart0">
        <script type="text/javascript">
        // Create new Visifire Chart
        var vChart1 = new Visifire('Visifire.xap', 500,300);
        // Set Data.xml file source
        vChart1.setDataUri("Data.xml");
        // Render Chart
        vChart1.render("VisifireChart0");
        </script>
    </div>
</body>
</html>

Step 2:

Now create an XML file in the same directory where HTML page is present. Name the XML file as Data.xml. The XML file contains data required for creating the chart. Below is the chart XML.

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts" >

  <vc:Title Text="Sample Chart"></vc:Title>

  <vc:DataSeries RenderAs="Column" >
    <vc:DataPoint AxisLabel="A" YValue="80"/>
    <vc:DataPoint AxisLabel="B" YValue="86"/>
    <vc:DataPoint AxisLabel="C" YValue="70"/>
    <vc:DataPoint AxisLabel="D" YValue="80"/>
    <vc:DataPoint AxisLabel="E" YValue="95"/>
  </vc:DataSeries>

</vc:Chart>

Step 3:

Lets write an event handler for the MouseLeftButtonDown event and name it as onDataPointMouseLeftButtonDown.  

Bellow is the code for the Event handler. Add the following JavaScript script code block inside the <head> tag in “JsEventTest.html".

<script type="text/javascript">
    // Function to be called on mouse left button down over any DataPoint.
    function onDataPointMouseLeftButtonDown(e)
    {
        var str;
        str =  "Element = " + e.Element + "\n";
        str += "Name =" + e.Name + "\n";
        str += "Index =" + e.Index + "\n";
        str += "AxisLabel = " + e.AxisLabel + "\n";
        str += "YValue = " + e.YValue + "\n";
        alert(str);
    }
</script>

Whenever the event is fired, an event argument “e” is passed to  onDataPointMouseLeftButtonDown. It contains information about DataPoint like DataPoint Index, Name, AxisLabel, XValue, YValue etc. So that we can easily identify which DataPoint has been clicked. Each of the chart elements sends different set of arguments. For more information regarding argument list you can look into the Visifire documentation.

Step 4:

Now we shall attach the event handler with DataPoint for the MouseLeftButtonDown event. So that whenever we click on DataPoint, function onDataPointMouseLeftButtonDown will be invoked.

Lets add the following code just before calling render function of the chart.  

// Attach MouseLeftButtonDown event with DataPoint.
vChart1.attachEvent('DataPoint','MouseLeftButtonDown', onDataPointMouseLeftButtonDown); 

Now the final HTML in JsEventTest.html looks like this.

<html>
<head>
    <title>Visifire Test Page</title>
    <!-- Helper files for initializing and creating the Silverlight plug-in -->

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

    <script type="text/javascript">

    // Function to be called on mouse left button down over any DataPoint.
    function onDataPointMouseLeftButtonDown(e)
    {
        var str;

        str =  "Element = " + e.Element + "\n";
        str += "Name =" + e.Name + "\n";
        str += "Index =" + e.Index + "\n";
        str += "AxisLabel = " + e.AxisLabel + "\n";
        str += "YValue = " + e.YValue + "\n";

        alert(str);
    }
    </script>

</head>
<body>
    <div id="VisifireChart0">

        <script type="text/javascript"> 

                // Create new Visifire Chart
                var vChart1 = new Visifire('Visifire.xap', 500,300);

                // Set Data.xml file source
                vChart1.setDataUri("Data.xml");

                // Attach MouseLeftButtonDown event with DataPoint.
                vChart1.attachEvent('DataPoint','MouseLeftButtonDown', onDataPointMouseLeftButtonDown);

                // Render Chart
                vChart1.render("VisifireChart0");

        </script>

    </div>
</body>
</html>

Step 5:

Make sure that Visifire.xap and Visifire.js are present in the same directory where JsEventTest.html is present.

Step 6:

Now browse JsEventTest.html from web server. In my case the address is http:/ /localhost/myproject/JsEventTest.html

Click on the image below  to see live demo.

You can download the source from here.

Comments(1)

We have released Visifire 1.0.10 Beta with some major features and bug fixes. With this release we have introduced JavaScript based event handling support. This was one of the most requested feature. You can download the latest release from the download page.

Visifire now supports MouseEvents like  MouseLeftButtonDown, MouseLeftButtonUp, MouseMove, MouseEnter, MouseLeave. You can refer to our documentation for further details. Below is a summary of this release.

Bug Fixes:

• ToolTip was not appearing on the beveled region of DataPoint. Now it has been fixed.
• Whenever relative path is used in Href, XAP file path was getting used as the base URI. Now the path of web page in which the chart is embedded is taken as base URI. So all paths are relative to the web page.
• When all values are negative in 100% stacked charts the Axis would take the limit as 150 to -100 instead of 0 to -100.
• In order to create step chart, users had to write the DataPoints with same XValue in Reverse order.
• TitleBackground and TitleFontColor for the Legend Title were not working.
• In Stacked charts if all YValues are zero then AxisManager used to throw exception. Now it is handled properly.
• If animation was type4 and if the Pie/Doughnut was clicked before the Type4 animation was complete, then it would cause an improper positioning of Pie/Doughnut.

New Features:

• Event handling support in JavaScript.
• Cursor Property for all Chart elements - Sets the mouse cursor type when it moves over an element
• MarkerImageStretch property in DataSeries and DataPoint - Sets how the image should be stretched inside the marker to fill it.
• StartFromZero property for AxisX. In previous version, it was applicable only for AxisY.

Thanks for your attention,

Team Visifire

Comments(0)

Visifire v1.0.9 beta has been released. We have fixed a few minor bugs. Below is a summary of this release.

Bug Fixes:

• Animation duration had a bug where, if duration is less than a particular value, animation used to fail.
• Zero valued DataPoint for Pie or Doughnut were causing exception. Now they are valid inputs.
• In some cases, on click of a sector in 2D Pie/Doughnut Charts, Label used to move out of the plot area as the Pie Explodes.
• In managed code, mouse events on DataPoint used to send canvas or path as parameter (sender) rather than sending DataPoint.
• If there were two or more charts in the same Data XML, Legend used to appear only for the first chart.

Thanks for your attention,

Team Visifire

Comments(6)

Visifire has been using dual licensing scheme since it was launched.

1. Open Source License under GPL 3.0
2. Commercial License for companies which are considering Visifire for their non-GPL applications.

Initially we had not made the commercial licensing options public and we were responding to individual queries. But due to the volume of requests that we started receiving, we felt the need to make it public so that the companies and individuals who are considering Visifire for their non-GPL applications can know the commercial licensing options quickly.

You can get more information in the license page.

Thanks for your attention,

Team Visifire

Comments(0)