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.


Comments

  1. June 16th, 2008 | 10:26 am

    [...] real time effect. It’s amazingly easy to create real-time charts with this new feature. See this blog for more [...]

  2. Florian P.
    July 30th, 2008 | 7:46 am

    Hi,

    I have some trouble using this feature. It is not able to render more that one xaml change at once. In my case, I want to add a new dataseries containing 10 values to an existing chart.

    now I have to call “ReRenderChart()” 10 times to see my changes to the chart object.

    Could you please fix this in a later version? Your “queue” should be worked off at once, when ReRenderChart() is called.

    Thanks

    Regards,

    Florian

  3. Karthik
    July 30th, 2008 | 8:54 am

    Hi Florian,

    I think the following forum topic will help you:
    http://www.visifire.com/forums/index.php?showtopic=149

    Regards,

    Karthik

  4. August 24th, 2009 | 7:44 pm

    I am having a number of problems with this chart and others. Firstly, clicking the image of the chart – to hyperlink to your demonstration – it works. If I build a VS2008 project with all the HTML code per example, it runs but nothing displays – what is likely to be stopping me seeing the chart (no errors are displayed – just a blank page)?

    Secondly, it refers to the Visifire.xap but the download files only contain a SL.Visifire.Charts.xap – where do I get the other XAP?

  5. Lena
    March 17th, 2010 | 7:54 am

    Hi, I have downloaded the Live Update Sample in Silverlight and instead of random values I have a slider value.
    Now I want to add more lines to the linechart.
    Could you help me, please.
    /Lenic

Leave a reply