Building A Chart With Axes

Follow the steps from first tutorial to load the diagram scripts, and add a "lineChart" DIV element. Now create the JavaScript chart instance:

JavaScript

// create the chart
var lineChart = new Controls.LineChart(document.getElementById('lineChart'));

 If we want to show the zoom buttons, here is how to do it:

JavaScript

lineChart.showZoomWidgets = true;

 For ticks on the axes use these properties:

 

JavaScript

lineChart.showXTicks = true;
lineChart.showYTicks = true;

Each predefined chart type e.g. line, bar, pie, radar etc. has series property, where you can add series. In our sample chart, we'll create two series. They are of type Series2D and can be used with any chart type that needs to draw 2D graphics:

 

JavaScript

// create sample data series
    var labels = new Collections.List([
        "one", "two", "three", "four", "five", "six",
        "seven", "eight", "nine", "ten", "eleven", "twelve"
    ]);

The constructor of the Series2D class requires three arguments. The first two are the data for the X and Y axis, the last one is for the labels. If you don't need labels, you can specify null.

JavaScript

var series1 = new Charting.Series2D(
    new Collections.List([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
    new Collections.List([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
    labels);
lineChart.series.add(series1);

var series2 = new Charting.Series2D(new Collections.List(
    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
    new Collections.List([2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]),
    labels);
lineChart.series.add(series2);

The line chart uses the Cartesian coordinate system. The LineChart class provides properties, which you can use to customize the scale of your axis:

JavaScript

lineChart.xAxis.minValue = 0;
lineChart.xAxis.maxValue = 24;
lineChart.xAxis.interval = 4;

When you are ready with the settings, don't forget to draw the chart:

JavaScript

lineChart.draw();

And here is the chart: