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>