graphController.js

MyApp.graphController = SC.ArrayController.create(
/** @scope MyApp.graphController.prototype */ {
	
	content: [
		SC.Object.create({label: 'set1', data:[[0,0]]}) ,
		SC.Object.create({label: 'set2', data:[[0,0]]})	
	] ,
	options: SC.Object.create({}) ,
	
	
	addRandomData: function() {
		var content = this.get('content'), data = [content.objectAt(0), content.objectAt(1)];
		data.objectAt(0).get('data').pushObject([data.objectAt(0).getPath('data.length') + 1, Math.random()*10]);
		data.objectAt(1).get('data').pushObject([data.objectAt(1).getPath('data.length') + 1, Math.random()*10]);
		this.set('content', data) ;
	}
	
	

}) ;

main_page.js

// ==========================================================================
// Project:   MyApp - mainPage
// Copyright: ©2010 My Company, Inc.
// ==========================================================================
/*globals MyApp */

sc_require ('views/box_list');
// This page describes the main user interface for your application.  
MyApp.mainPage = SC.Page.design({

  // The main pane is made visible on screen as soon as your app is loaded.
  // Add childViews to this pane for views to display immediately on page 
  // load.
  mainPane: SC.MainPane.design({
    childViews: 'mainView header'.w(),
    
	header: SC.View.design ({
		classNames: 'globalHeader',
		layout: {top: 10,
				left: 0},
				childViews: 'globalText'.w(),
				
				globalText: SC.LabelView.design ({
					classNames: 'globalHeadera',
					layout: { left: 40, top: 0},
					value: 'Blah'
				})
	}),

    mainView: SC.ScrollView.design({
		classNames: 'bodyMiddle',
        hasHorizontalScroller: NO,
        layout: {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0
        },
        backgroundColor: 'white',

		contentView: SC.View.design({
			classNames: 'bodyContent',
			layout: { top: 70,
					left: 20},
            childViews: 'top graph project view1 view2 bottom'.w(),

				top: SC.View.design ({
						classNames: 'contentTop'
				}),
				
				graph: Flot.GraphView.design({
					layout: { top: 50, right: 40, bottom: 100, left: 440},
					dataBinding: 'MyApp.graphController.arrangedObjects',
					optionsBinding: 'MyApp.graphController.options'
				}),
				
				project: MyApp.BoxListView.design({
					layout: {top: 30,
						 	left: 20 },
						headerTitle:'Project',
						contentBinding: 'MyApp.projectTreeController.arrangedObjects',
						selectionBinding: 'MyApp.projectTreeController.selection',
						contentValueKey: 'title'
					
				}),
				
				view1: MyApp.BoxListView.design({
					layout: { top: 240,
							left: 20 },
							headerTitle:'Something',
							contentBinding: 'MyApp.projectController.arrangedObjects',
							selectionBinding: 'MyApp.projectController.selection',
							contentValueKeyPath: 'title'
				}),
				
				view2: MyApp.BoxListView.design({
					layout: { top: 450,
							left: 20 },
							headerTitle:'Something 2',
							contentBinding: 'MyApp.projectController.arrangedObjects',
							selectionBinding: 'MyApp.projectController.selection',
							contentValueKeyPath: 'title'
				}),
				
				bottom: SC.View.design ({
						classNames: 'contentBottom',
						layout: {top: 914 }
				})
  			})
		})
	})
});

projectController.js

MyApp.projectController = SC.ArrayController.create(
/** @scope MyApp.projectsController.prototype */ {


	selectionDidChange: function(){
		MyApp.graphController.addRandomData();
		console.log("selection did change");
	}.observes('selection')

}) ;