Configure AreaChart

This page briefly explains how to create a AreaChart with randomized values. This example can be find in here

This example includes the following points

• AreaChart
• Textfield for count of series
• Button to create the series
• Button to clear the chart

Tongue File content

<?xml version="1.0" encoding="UTF-8"?>
<tongue:FXTongue xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:tongue="http://www.frateranatis.org/fx/tongue" packageUri="de.dc.fx.tongue.demo.person" controllerName="PersonViewController" modelName="PersonViewModel" tonguePath="./resources/de/dc/fx/tongue/demo/person/PersonView.tongue">
  <layout xsi:type="tongue:FXBorderPane" id="paneRoot">
    <center xsi:type="tongue:FXVBox" id="hboxChart">
      <children xsi:type="tongue:FXHBox">
        <children xsi:type="tongue:FXLabel" text="Count of Series"/>
        <children xsi:type="tongue:FXTextField" id="textCountOfSeries" text="1"/>
        <children xsi:type="tongue:FXButton" onMouseClicked="onButtonAddSeries" id="buttonAddSeries" text="Add Series"/>
        <children xsi:type="tongue:FXButton" onMouseClicked="onButtonClearChart" id="buttonClearChart" text="Clear Chart"/>
      </children>
      <children xsi:type="tongue:FXAreaChart" id="chartArea" title="Person Area Chart">
        <xAxis name="Average" datatype="//@layout/@center/@children.1/@model/@fields.0"/>
        <yAxis name="Values" datatype="//@layout/@center/@children.1/@model/@fields.3"/>
        <model uri="de.dc.fx.tongue.demo.person.model" name="Person">
          <fields name="name" datatype="String"/>
          <fields name="familyname" datatype="String"/>
          <fields name="isMan" datatype="boolean"/>
          <fields name="age" datatype="int"/>
        </model>
      </children>
    </center>
  </layout>
</tongue:FXTongue>

Controller class

package de.dc.fx.tongue.demo.person.controller;
	
import java.util.Random;

import de.dc.fx.tongue.FXSeries;
import de.dc.fx.tongue.FXTongueFactory;
import de.dc.fx.tongue.FXXYData;
import de.dc.fx.tongue.demo.person.model.PersonViewControllerIDs;
import de.dc.fx.tonque.core.TongueControlRenderer;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
public class PersonViewController extends BasePersonViewController{

	private Random r = new Random();
	
	@Override
	public void initializeDatabinding() {
		super.initializeDatabinding();
		VBox.setVgrow(chartArea, Priority.ALWAYS);
	}
	
	public void onButtonAddSeries(MouseEvent e) {
		if (renderer instanceof TongueControlRenderer) {
			TongueControlRenderer controlRenderer = (TongueControlRenderer) renderer;
			int seriesCount = Integer.parseInt(model.getTextCountOfSeries());
			for (int j = 0; j < seriesCount; j++) {
				FXSeries fxSeries = FXTongueFactory.eINSTANCE.createFXSeries();
				fxSeries.setName("Test "+chartArea.getData().size());
				for (int i = 0; i < 50; i++) {
					FXXYData data = FXTongueFactory.eINSTANCE.createFXXYData();
					data.setX(String.valueOf(i));
					data.setY(String.valueOf(r.nextInt()));
					fxSeries.getInput().add(data);
				}
				
				controlRenderer.addSerieById(PersonViewControllerIDs.chartArea, fxSeries );
			}
		}
	}
	
	public void onButtonClearChart(MouseEvent e) {
		chartArea.getData().clear();
	}
}