Das folgende sehr einfache Beispiel zeigt anhand eines Value-Sliders (siehe AddValueSliderField()) das Zusammenspiel zwischen Modell, ControlPanel und Grafik.

#INCLUDE JsGraph.inc
#INCLUDE ControlPanel.inc

<jscript>

var Model = {
  time: 0,
  minutes: 0,
  Update: function() {
    this.minutes = (this.time * 60) % 60;
  }
};

var ClockGraphic = NewGraph2D( { Height: '5%', DrawFunc: DrawClock, AutoScalePix: true } );

function UpdateAll() {
  Model.Update();
  ControlPanels.Update();
  DrawClock( ClockGraphic );
}

function DrawClock( g ) {
  var marginX = 0.1;
  var marginY = 0.2;
  var minutesPos = Model.minutes / 5;

  g.Reset();
  g.SetWindow( -marginX, -marginY, 12 + marginX, 3 + marginY );

  g.SetLineAttr( 'gray', 1 );
  g.Line( 0, 0, 12, 0 );
  g.TicsX( 0, 0.2, 8, 0, false, false );
  g.SetLineAttr( 'black', 3 );
  g.TicsX( 0, 1, 16, 0, false, false );

  g.SetLineAttr( 'red', 8 );
  g.Line( Model.time, 0, Model.time, 2 );
  g.SetLineAttr( 'black', 4 );
  g.Line( minutesPos, 0, minutesPos, 3 );
}

ControlPanels.NewSliderPanel( { 
  ModelRef: 'Model', 
  OnModelChange: UpdateAll 

} ).AddValueSliderField( { 
  Name: 'time', 
  Min: 0, Max: 12 

} ).Render();

</jscript>