Introduction | Your first interface | Building a model | Advanced features | Resources

4.1 Building a graph

This part shows you how to build a graph using eSim Builder. The model and interfaces used in this section can be downloaded here: trainingGraph.zip. There are three different types of graph that will be covered (interface in brackets):

  • xy graph (trainingGraphxy.jsm)
  • input graph (trainingGraphInput.jsm)
  • bar graph (trainingGraphBar.jsm)

xy graph

An xy graph displays a 2- or 3-dimensional array of numeric data. This example shows a 2-dimensional array, where the second dimension always has a value of 2, storing the x- and y- coordinates of the points on the graph. So the first point will be plotted at (-10,-99), the second at (-9,-89) and so on until the final point at (10,101).

The applet below uses an xy graph to display two lines. As an example, the equations of these lines are both calculated based a specific number. Move the slider to see how a change in the number leads to a change in the graph.

You can resize a graph by setting the Resize property to true then using the sizing handles. Setting the Transparent property to true will give the graph a transparent background.

More than one array of data can be added to the graph using the Series Editor (Series property). You can also edit the appearance of the graph lines on the Edit Plots tab.

Both the xaxis and yaxis have their own property sheets, from which you can set the maximum and minimum values for each axis (or base these on a model property), set the major and minor units, and customise the look of the axis. The Number Formatter for each axis allows you to set the way in which numbers are displayed.

Input graph

An input graph will accept a 2-dimensional array of (real numeric) data from users by allowing them to click on points on a graph. The graph below shows an example of this - notice that points can be dragged as well as placed. The table on the right shows how the array of numbers defining the graph is being updated dynamically. If you right-click on the graph you can clear the values.

The Order property defines where in the array new data are added. If you set the ShowMouseLocation variable to true another object will be displayed on the interface showing the mouse position - this object again has its own set of properties that can be edited to improve its look.

The inputSeries and series properties allow you to add other lines to the graph, and to edit the look of these lines.

Bar graph

The bar graph is used to display a 2-dimensional series of numeric data. The number of elements in the first dimension tells you how many data points will be on the graph, the number in the second dimension tells you how many bars for each point. In our example there are four data points and two sets of data (January and February) for each point.

In the example below, the bar values are also displayed in a table. You can try changing these values (remember to press 'Enter') to see how this affects the graph.

Changing the MainSeriesX allows you to change which of the array dimensions are mapped on the x-axis. In the example, changing this value to false makes the food type into the main series.

Setting the ShowKeys property to true will display information about the bars on the graph. The Bar Key Editor (BarKeys property) will enable you to set titles for the data sets and change the appearance of the graph.