HTML Chart Control

Add a click event to a chart

Technologies > User Interface Add-Ins > HTML Chart Views > Console View with a Chart

To add a click-event, such as zooming or opening a form, to an HTML chart:

  1. Add the event handler clickGraphItem in the view’s controller.

    afterViewLoad: function(){
    this.chartConsole_chart.chartControl.addEventListener("clickGraphItem", this.onClickItem);
    }

  2. Add the corresponding handler in the same controller.

    onClickItem: function (event) {
    var restriction = new Ab.view.Restriction();
    restriction.addClause('bl.bl_id',
    event.item.dataContext["bl.bl_id"]);

    View.openDialog('ab-ex-htmlchart-console-report.axvw',restriction, true, {
    width:400,
    height:450})
    }

For example, below, the user clicked to zoom into the chart to show data just for a few buildings. The user can click "Show All" in the upper right corner to return the chart to showing all data.

click_event.gif

Example view : http://localhost:8080/archibus/schema/ab-products/solutions/parts/htmlchart/ab-ex-htmlchart-console.axvw