New font properties in Visifire v1.0.13

vivek

With this new release we have introduced few new features.

  • Embedding fonts in Visifire - With this new feature you can embed fonts which can be applied to the FontFamily of any Text element. Let’s take a look at the example below

<vc:Title Text="Visifire Charts" FontFamily="Mtcorsva.ttf#Monotype Corsiva" />

Here FontFamily is set in the Title element, the font file that I have used is "Mtcorsva.ttf". This file is located  in ClientBin folder. It can be present anywhere in the same application domain. The font file can be a " *.ttf " or " *.zip " file.

The format followed to specify the font has two parts : font file name followed by a hash (#) and the comma separated list of fonts.

FontFamily="<font_file> # <font_name_1>,< font_name_2>"

Until the font file gets downloaded default font will be applied. You can also put an archived font file with the same syntax:

<vc:Title Text="Visifire Charts" FontFamily="Mtcorsva.zip#Monotype Corsiva" />

This format is applicable where ever FontFamily is used. Have a look at the Documentation for more details.

The following is the screenshot of "Embedded Font" example.

EmbeddedFontImage 

 

  • Multi-Line Text - This feature will help you to display text in multiple lines. All you need to do is just put "\n" in the text property of any Text attribute of an element as shown below:

<vc:Title Text="Athens 2004 \n Olympics"/>

Multi-Line text is applicable to all text content in Visifire. Have a look at the Documentation for more details.

The following is the screenshot of "Multi-Line Text" example.

MultiLineImage


Sparkline Charts using Visifire

karthik

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

karthik

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

karthik

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.


Working with JavaScript Events in Visifire Charts

somnath

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.

jsevents2

 

You can download the source from here.


Creating Visifire Charts With Managed Code

Sunil

After having a hands on experience with our Chart Designer and following examples in our documentation it will be very obvious that  Visifire can be used with any server side technology including ASP, ASP.Net, PHP, ColdFusion, JSP or just Simple HTML. But what is not so obvious is that, Visifire can be used very easily within Silverlight Applications too : ) Currently we are in the process of testing it within managed code and hence we have not given examples on that in our documentation. Soon we’ll update the documentation with tutorials and examples.

Because many users are eager to use within managed code and have asked for samples, today I’ll explain about how to create a simple chart within managed code using Visifire.

Before starting with this, please download the latest build of Visifire from the download section.

In order to use Visifire within managed code, first you need to reference the Visifire assemblies in your project. Visifire assemblies are packaged within the Visifire.xap file. Visifire.xap file is actually a zip file whose extension has been changed to xap. So you can rename it as Visifire.zip and extract the contents. Inside you’ll find:

  1. Visifire.Charts.dll
  2. Visifire.Commons.dll
  3. VisifireCharts.dll
  4. AppManifest.xaml

Among the four files, we are interested in the first two.

Now that you have the required files, lets start creating a sample application. I assume that you’ve installed Silverlight tools for Visual Studio 2008. You can download it from here.

Now we are going to create a simple Silverlight Chart within managed code. The chart gets refreshed with random data each time you click on the chart.

In Visual Studio 2008, create a Silverlight Application project. Let the Visual Studio create a web site to host your app.

Visual Studio creates App.xaml , Page.xaml and code behind files for the xaml files.

Now add reference to Visifire assemblies, Visifire.Charts.dll and Visifire.Commons.dll.

Open the Page.xaml. You will see

<UserControl x:Class="Sample1.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>
</UserControl>

We are going to create a Chart within the Grid named LayoutRoot

Now open the code behind file, Page.xaml.cs and attach an event handler for Loaded event.

       public Page()
       {
           InitializeComponent();

           this.Loaded += new RoutedEventHandler(Page_Loaded);
       }
       void Page_Loaded(object sender, RoutedEventArgs e)
       {
           CreateChart();// We are going to write this function next.
       }


Now lets write a function "CreateChart" which will create a new chart each time you call it and add it to the LayoutRoot. Before adding a Chart to the LayoutRoot each time, one needs to clean up the previous Chart present within the Grid.

Note: Visifire still doesn’t have "Live Charts". That means, just by changing the DataPoint present within an already existing chart will not update the Chart. You need to create a new Chart. In future versions we may support Live Charts.

        public void CreateChart()
        {
            Visifire.Charts.Chart visiChart = new Visifire.Charts.Chart();
            Visifire.Charts.DataSeries dataSeries = new Visifire.Charts.DataSeries();
            Visifire.Charts.DataPoint dataPoint;
            Visifire.Charts.Title title = new Visifire.Charts.Title();

            title.Text = "Click On Chart To Refresh";
            visiChart.Children.Add(title);

            visiChart.Width = 500; // Width and Height are required for the Chart.
            visiChart.Height = 300;

            Random rand = new Random(DateTime.Now.Millisecond);

            for (int i = 0; i < 9; i++)
            {
                dataPoint = new Visifire.Charts.DataPoint();
                dataPoint.YValue = rand.Next(100, 1000);
                dataSeries.Children.Add(dataPoint);
            }

            dataSeries.RenderAs = "Column";
            visiChart.Children.Add(dataSeries);

            LayoutRoot.Children.Clear(); // So that Chart objects don't build up each time we add one.
            LayoutRoot.Children.Add(visiChart);
        }

In the above code, first I’ve created 4 objects Chart, DataSeries, DataPoint and Title.

DataSeries and Title should be added to Children Collection of Chart and DataPoint should be added to Children Collection of DataSeries.

I’ve set the Title of the Chart through "Text" property. Next am setting the Width and Height of the Chart.

Note: Visifire requires the width and height of the Chart to be set before it is added into any element. This is because the Chart starts rendering as soon as it is Loaded. If you want to change the size later, you can scale it. Scaling the chart will not reduce the quality as Silverlight uses Vector Graphics.

Am using a Random object to create random data for the chart each time it is called.

Inside the loop, am creating DataPoint and assigning it a random data within the range of 100 to 1000. Then add DataPoint into the Children collection of DataSeries. Set the RenderAs property of DataSeries to "Column" so that the series is rendered as Column Chart. Then add the DataSeries to Children collection of Chart.

Note: You can change the RenderAs property to Bar, Line, Area and get other Chart Types.

Next clear the Children of LayoutRoot so that it cleans up any existing Chart object. This ensures that, Chart objects don’t build each time you call CreateChart.

Then finally add visiChart to the LayoutRoot.

The Chart gets rendered as soon as it is loaded.

Now lets add an event handler for MouserLeftButtonUp and create a new chart each time the Chart is clicked. Add the below code into Page constructor.

        this.MouseLeftButtonUp += new MouseButtonEventHandler(Page_MouseLeftButtonUp);

Now write the event handler for MouseLeftButtonUp as follows

        void Page_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            CreateChart();// This creates a new chart each time you click.
        }

Now your can run the chart application and see the output. Below is a snapshot of the chart.

Chart

 

You can download the source from here.