This page demonstrates a simple use of the KavaChart JavaScript object. It simply creates a chart definition and loads it from a KavaChart server installation. Until you modify the "generator" property (either in your script or in kavachart.js), this server is located at kavachart.com. The KavaChart server there will periodically add information to your chart identifying it as a sample or a demo, so you should point to your own server for production and testing purposes.

The process of building a chart is quite simple:

  • Create an element ID on your page (we're using "chart" here) for an IMG element.
  • Add a script that creates a chart object and assigns that element ID to the chart.
  • Set the chart properties up, and call chart.generate();

    The script looks like this: 

        var chart = new Chart();
    chart.init();
    chart.image = document.getElementById('chart');
    chart.useToolTips = false;
    chart.setProperty('titleString', 'Hello, World');
	...
    chart.generate();

    Note that we called "chart.init()" after creating our new instance. This is an important step that users sometimes forget.

    We purposely set "useToolTips" to "false" to avoid JavaScript restrictions on retrieving data from a foreign server. You may have to bypass some warnings to run this page, but it should work OK, even if you don't have a KavaChart server installed, since it only requests chart images from KavaChart.com.

    A more elegant way to build a chart would be to create a KavaChart XML data source, which looks like this. You can check this data source periodically and automatically generate your changes. The script updates the chart image within the page without refreshing the entire page. The sample code is in this directory. Since this technique requires that you retrieve your XML data from the same source as the page, we've created a working version of the sample here. You can get the full DTD for this XML here.

    A DataProvider is opened using Microsoft's XMLHTTP object or XMLHttpRequest for other code bases. That request is passed to the chart object's setDataProvider function for processing. The chart object converts the XML data into a chart plus the appropriate tooltips and hyperlinks. The source code to the on-line sample is provided here, as "weather.html".