Configure BarChart

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

This example includes the following points

• BarChart
• 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">
    <styles property="-fx-base" value="#3f474f"/>
    <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">
          <styles property="-fx-background-color" value="purple"/>
          <styles property="-fx-text-fill" value="white"/>
        </children>
        <children xsi:type="tongue:FXButton" onMouseClicked="onButtonClearChart" id="buttonClearChart" text="Clear Chart">
          <styles property="-fx-background-color" value="lightblue"/>
          <styles property="-fx-text-fill" value="white"/>
        </children>
      </children>
      <children xsi:type="tongue:FXBarChart" id="chartBar" title="BarChart Example">
        <xAxis name="values" datatype="//@layout/@center/@children.1/@model/@fields.3"/>
        <yAxis name="categories" datatype="//@layout/@center/@children.1/@model/@fields.1"/>
        <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(chartBar, 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 "+chartBar.getData().size());
				for (int i = 0; i < 50; i++) {
					FXXYData data = FXTongueFactory.eINSTANCE.createFXXYData();
					data.setX(i);
					data.setY(String.valueOf(r.nextInt()));
					fxSeries.getInput().add(data);
				}
				
				controlRenderer.addSerieById(PersonViewControllerIDs.chartBar, fxSeries );
			}
		}
	}
	
	public void onButtonClearChart(MouseEvent e) {
		chartBar.getData().clear();
	}
}