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