ChartCanvasSerie.addPoint

Syntax

addPoint(options: Object, redraw: Boolean);

Parameters

options. JSON object that contains settings of the chart data series.

redraw. Indicates whether the chart is redrawn. Available values:

Description

The addPoint method adds a point to the chart data series.

Example

Executing the example requires that the HTML page contains the Chart component named chart (see Example of Creating a Line Chart). Add a dummy point to the first data series of the chart:

function defineEvents(serie) {
    // Process the PointAdd event
    serie.PointAdd.add(function(sender, args) {
        console.log("Added a point with the value %s", args);
        setMarkersRadius(serie, 15);
        sender.redrawConnectors()
    });
    // Process the RemovePoint event
    serie.RemovePoint.add(function(sender, args) {
        console.log("Removed the point with the value %s", args);
    });
};
// Sets size of data series markers
function setMarkersRadius(serie, radius) {
    // Get settings of the chart data series
    var states = serie.getStates();
    states.Normal.Marker.Radius = radius;
}
// Creates a data series point
function createPoint(serie) {
    // Create a new series point
    var point = {
        Color: "#ff0000",
        Id: "customPoint",
        Name: "custom",
        Parent: serie,
        X: serie.getPoints().length,
        Y: 15,
    };
    // Add this point
    serie.addPoint(point, true);
    serie._pointsToDraw[serie.getPoints().length - 1].setIsFictive(true);
    serie.PointAdd.fire(serie, point.Y);
};
// Remove data series point
function removePoint(index) {
    var points1 = serie.getPoints().length;
    // Get series point
    var removePoint = serie.getPoint(index);
    // Remove series point
    serie.removePoint(serie.getPoints().length - 1, true);
    var points2 = serie.getPoints().length;
    if (points2 < points1) {
        serie.RemovePoint.fire(serie, removePoint.getY());
    }
};
// Get the first data series
var serie = chart.getSeries()[0];
// Determine event
defineEvents(serie);
// Create a point
createPoint(serie);

After executing the example a point is added to the first chart data series:

The browser console shows appropriate message:

Added a point with the value 15

Now remove the series point:

removePoint(serie.getPoints().length - 1);

After executing the example the last point in the first data series of the chart is removed. The browser console displays appropriate message:

Removed the point with the value 15

See also:

ChartCanvasSerie