Methods

In Graphane we can include Javascript code if we need it. In many occasions the declarative system of the templates and the data contained in g-composer will be enough to build the graph. If we want to respond to user interactions by events, or we need to transform the data, we can use Javascript code inside Graphane. If we want to respond to user interactions via events, or need to perform calculations or transform data, we can use Javascript code within Graphane.

You can add Javascript code with a simple <script type="methods"></script>. All functions defined into this tag are available into the template. Additionally, you can define several variables or constants or global code into the script, but the template only can access to functions define as function.

In the defined functions we can access the $ object with which we can access the SVG ($.svg) or the data ($.data), facilitating the manipulation of both the generated graphic and the data used.

Event handling

To associate events to functions defined within the script type="methods", you can use the directive g-on:, or the shorthand @, follow the event name for event handling. In the previous example, the directive g-on:click="update" link the event click to the function update.

In this other example the click event on all SVG content, updates the circles data value.

Data transformation

If you create a function with the name data it is automatically called when data is loaded or modified. The function receives the initial data and returns the new data values. You can include the data function to perform the filtering and transformation before the template evaluation, add calculated values, etc.