Visifire Silverlight and WPF Charts v3.0 alpha 2 Released!

somnath

Hi,

This release contains fix for the following bugs:

  • In Silverlight, Chart was not behaving as expected if Color property of a DataPoint was set through Style and later on Style was set to null at real-time.
  • Multiple grid lines were getting created while clearing DataPoints of a DataSeries and adding new set of DataPoints.
  • In pie chart, exploded pie slice was animating each time on real-time update.
  • Chart was not behaving as expected while resizing the browser window when it was zoomed to more than 100%.
  • Mouse events were not working as expected for Area chart.
  • Axis was not updating properly on real-time update of Chart.

Current release also contains the following enhancements:

  • Performance has been improved while adding new DataPoints at real-time.
  • Performance has been improved on real-time update of Style of a DataPoint/DataSeries.

Download Visifire v3.0 alpha 2 here.

Cheers,
Team Visifire


Visifire Silverlight and WPF Charts v2.3.3 Released!

somnath

Hi,

This release contains fix for the following bugs:

  • Chart was not behaving as expected while resizing the browser window when it was zoomed to more than 100%.
  • In pie chart, exploded pie slice was animating each time on real-time update.

Download Visifire v2.3.3 here.

Cheers,
Team Visifire


Visifire Silverlight/WPF Charts v3.0 alpha Released

Chirag

Hi,

We are pleased to announce the release of Visifire v3.0 alpha.

If you remember we had introduced support for Realtime Update with Visifire 2.0. This release boasts of drastic performance improvements in Realtime Update. For eg. A line chart in Visifire 2.x with 15,000 DataPoints took 40 secs to update in realtime, whereas in Visifire 3.0 it takes only 3 secs. Internally Visifire 2.x re-drew charts during Realtime Update. Visifire 3.0 redraws only the DataPoints on update (unless the update affects the axis). As of now this performance enhancement has been done only for the chart types: Column, Line, Bar, CandleStick, Stock, Bubble, Scatter, Stacked Column & Stacked Bar. Same enhancements for other chart types will follow soon. In Visifire 2.x the JavaScript API file name was Visifire2.js. Now Visifire2.js has been renamed as Visifire.js in Visifire 3.0.

Animated updates
Once you change the value of DataPoint the chart updates to the new state with animation. In this release animated updates is implemented for all chart types excluding Stock & CandleStick. This feature can be turned on by setting AnimatedUpdate property to True at chart level. Check out the following samples to feel the difference.

Get Microsoft Silverlight

Download the source code for the above sample here.

More to come
The upcoming releases in this series should include features like data binding & zooming. Stay tuned.

We are very excited about this release & can’t wait to have your feedback. Download Visifire 3.0 alpha here.

Cheers,
Team Visifire


Visifire Silverlight and WPF Charts v2.3.2 Released!

vivek

Hi,

This release contains fix for the following bug:

  • In Column and Bar chart, DataPoint label was not appearing if YValue property was set to 0 (zero).

Current release also contains the following enhancement:

  • Exact Width and Height of the Axis will be available once the chart gets rendered.

Download Visifire v2.3.2 here.

Cheers,
Team Visifire


Exporting Visifire Silverlight Chart as Image

Chirag

Exporting Silverlight charts to images has been the most coveted feature. In this tutorial, I am going to show you to export Visifire Silverlight chart as image from managed code. So before we start lets check out the live example below.

Get Microsoft Silverlight

Project Setup

Create a “Silverlight Application” project. Download the latest Visifire binaries from here. Extract the Zip file and add reference for the file named “SLVisifire.Charts.dll”. In this sample, I am going to use WriteableBitmap class in order to extract the pixel wise color information of the chart rendered inside Silverlight content. We will take help of JpegEncoder provided by a third party library called FJ.Core to encode the raster information to file stream.

Please download FJ.Core library from here and add the FJ.Core.dll as reference to the project.

Below are the steps that we are going to follow.

  1. Construct the Chart XAML inside MainPage.xaml.
  2. Exporting Chart as image.

Constructing Chart XAML

Open MainPage.xaml page, add a Chart and a button inside it as shown below:

<UserControl x:Class="SLSave2Image.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
    mc:Ignorable="d" Width="500" Height="480">
    <Grid x:Name="LayoutRoot">
        <StackPanel>
            <vc:Chart Name="MyChart" Width="500" Height="300" Theme="Theme1">

                <vc:Chart.Titles>
                    <vc:Title Text="Visifire Chart"/>
                </vc:Chart.Titles>

                <vc:Chart.Series>
                    <vc:DataSeries RenderAs="Column" LabelEnabled="True">
                        <vc:DataSeries.DataPoints>
                            <vc:DataPoint AxisXLabel="Jan" YValue="35"/>
                            <vc:DataPoint AxisXLabel="Feb" YValue="32"/>
                            <vc:DataPoint AxisXLabel="Mar" YValue="27"/>
                            <vc:DataPoint AxisXLabel="Apr" YValue="17"/>
                            <vc:DataPoint AxisXLabel="May" YValue="16"/>
                        </vc:DataSeries.DataPoints>
                    </vc:DataSeries>
                </vc:Chart.Series>
            </vc:Chart>
            <Button Name="ButtonSave" Height="25" Width="160" Content="Save Chart" ></Button>
        </StackPanel>
    </Grid>
</UserControl>

Exporting Chart as image

Now open MainPage.xaml.cs page and add the following namespaces.

using FluxJpeg.Core;
using FluxJpeg.Core.Encoder;
using System.Windows.Media.Imaging;
using System.IO;
using Visifire.Charts;

Now attach an event handler for Click event of Button inside the Page constructor.

public MainPage()
{
    InitializeComponent();

    ButtonSave.Click += new RoutedEventHandler(ButtonSave_Click);
}

void ButtonSave_Click(object sender, RoutedEventArgs e)
{
    SaveToImage(MyChart);
}

Inside the ButtonSave event handler declare a function called SaveToImage() which will accept Chart as parameter as shown above.

Now inside the function definition, create a WriteableBitmap out of a Chart and collect the raster information from it. Then encode the raster information to file stream using JpegEncoder present in FJ.Core library as shown below. Finally save the file stream as image into hard drive.

/// <summary>
/// Save Visifire chart as Image
/// </summary>
/// <param name="Chart">Visifire.Charts.Chart</param>
private void SaveToImage(Chart chart)
{
    try
    {
        WriteableBitmap bitmap = new WriteableBitmap(chart, null);

        if (bitmap != null)
        {
            SaveFileDialog saveDlg = new SaveFileDialog();
            saveDlg.Filter = "JPEG Files (*.jpeg)|*.jpeg";
            saveDlg.DefaultExt = ".jpeg";

            if ((bool)saveDlg.ShowDialog())
            {
                using (Stream fs = saveDlg.OpenFile())
                {
                    MemoryStream stream = GetImageStream(bitmap);

                    //Get Bytes from memory stream and write into IO stream
                    byte[] binaryData = new Byte[stream.Length];
                    long bytesRead = stream.Read(binaryData, 0, (int)stream.Length);
                    fs.Write(binaryData, 0, binaryData.Length);
                }
            }
        }
    }
    catch(Exception ex)
    {
        System.Diagnostics.Debug.WriteLine("Note: Please make sure that Height and Width of the chart is set properly.");
        System.Diagnostics.Debug.WriteLine(ex.Message);
    }
}

/// <summary>
/// Get image MemoryStream from WriteableBitmap
/// </summary>
/// <param name="bitmap">WriteableBitmap</param>
/// <returns>MemoryStream</returns>
public static MemoryStream GetImageStream(WriteableBitmap bitmap)
{
    byte[][,] raster = ReadRasterInformation(bitmap);
    return EncodeRasterInformationToStream(raster, ColorSpace.RGB);
} 

/// <summary>
/// Reads raster information from WriteableBitmap
/// </summary>
/// <param name="bitmap">WriteableBitmap</param>
/// <returns>Array of bytes</returns>
public static byte[][,] ReadRasterInformation(WriteableBitmap bitmap)
{
    int width = bitmap.PixelWidth;
    int height = bitmap.PixelHeight;
    int bands = 3;
    byte[][,] raster = new byte[bands][,];

    for (int i = 0; i < bands; i++)
    {
        raster[i] = new byte[width, height];
    }

    for (int row = 0; row < height; row++)
    {
        for (int column = 0; column < width; column++)
        {
            int pixel = bitmap.Pixels[width * row + column];
            raster[0][column, row] = (byte)(pixel >> 16);
            raster[1][column, row] = (byte)(pixel >> 8);
            raster[2][column, row] = (byte)pixel;
        }
    }

    return raster;
}

/// <summary>
/// Encode raster information to MemoryStream
/// </summary>
/// <param name="raster">Raster information (Array of bytes)</param>
/// <param name="colorSpace">ColorSpace used</param>
/// <returns>MemoryStream</returns>
public static MemoryStream EncodeRasterInformationToStream(byte[][,] raster, ColorSpace colorSpace)
{
    ColorModel model = new ColorModel { colorspace = ColorSpace.RGB };
    FluxJpeg.Core.Image img = new FluxJpeg.Core.Image(model, raster);

    //Encode the Image as a JPEG
    MemoryStream stream = new MemoryStream();
    FluxJpeg.Core.Encoder.JpegEncoder encoder = new FluxJpeg.Core.Encoder.JpegEncoder(img, 100, stream);
    encoder.Encode();

    // Back to the start
    stream.Seek(0, SeekOrigin.Begin);

    return stream;
}

You can download the complete solution here

(Hat tip to Visifire user Sagi Karni, Intel Corp)

Cheers,
Team Visifire


Visifire 2.3.1 Released!

vivek

Hi,

This release contains fix for the following bugs:

  • In Column and Bar chart types, sometimes Animation was not behaving as expected.
  • If MarkerScale property in DataSeries or DataPoint was set to 1, it was not getting applied.

Download Visifire v2.3.1 here.

Cheers,
Team Visifire