One neat thing about Physlets is that there are many different kinds, you can use more than one at a time, and they can share information. Here we'll look at how to add a graph to a motion situation.

We have to do some work, of course, to add a graph. This includes:

• Adding the DataGraph applet with a new "applet" section.
  
  
• making sure that the ARCHIVE sections of both "applet" sections are identical and include all Physlets used on the page. For instance, here they both look like:
  ARCHIVE="DataGraph4_.jar,Animator4_.jar,STools4.jar"
  
  
• If you don't have the DataGraph4_.jar file in your classes directory you should get that from the Davidson College site.
  
  
• We need to add several lines to the program to set up the graph properly. These include:
  document.datagraph.setAutoRefresh(false);
  This tells the graph not to draw anything until we've run the program.

  document.datagraph.setAutoscaleX(true);
  document.datagraph.setAutoscaleY(true);
  Here we're telling the graph to automatically scale both the x and y axes to match the data.

  document.datagraph.clearSeries(1);
  document.datagraph.setSeriesStyle(1,true,2);
  document.datagraph.setMarkerSize(1,0.1);
  document.datagraph.setLastPointMarker(1,true);

  First we set up a data set, 1, for the data, and the "1" in each of the lines that follow means we're referring to that data set. In the second line the "true" tells the graph to draw a line connecting the points, and the 2 tells it that each point drawnn should be a square. They don't look like squares because their size is set to such a small value in the third line. Finally, the fourth line gives us a marker to follow on the graph as the data is plotted.

  document.datagraph.setLabelY("x");
  document.datagraph.setLabelX("t");
  document.datagraph.setTitle("X-position vs. time");

  Here we're adding labels for the y and x axes and then putting an appropriate title on the graph.

  g1id=document.datagraph.getGraphID();
  s1id=document.datagraph.getSeriesID(1);
  document.datagraph.setRGB(s1id,250,0,0);

  Here we're assigning an identifier, g1id, to the graph. We then assign an identifier to data set 1, and use it to set the color to red.

  document.Animator.makeDataConnection(c1id,g1id,1,"t","x");
  document.Animator.updateDataConnections();

  This is where we make the connection between c1id, the ball in the Animator window, and the graph, stating that data set 1 is associated with t (time) on the x-axis and the ball's x-position on the y-axis. We then update the connection.

  document.datagraph.setAutoRefresh(true);
  Finally we well the graph to go ahead and draw itself on the screen.

In the second graph, showing the y-velocity as a function of time, we added a grid to the graph with the line:
document.datagraph.setDrawGrid(true);

In the third graph, plotting Y vs. X, we've turned off the autoscale feature on both axes and specified what each of the axes should run from with the lines:

document.datagraph.setAutoscaleX(false);
document.datagraph.setAutoscaleY(false);
document.datagraph.setMinMaxX(-5,5);
document.datagraph.setMinMaxY(-5,3);