philogb/gist:979085

## gistfile1.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Stack Simulator</title>
    <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../../bootstrap.js"></script>
<script>
Ext.require(['Ext.chart.*', 'Ext.data.*']);

Ext.onReady(function () {
    function generateData(){
        var data = [{
                name: 'x',
                djia: 10000,
                sp500: 1100
            }],
            i;
        for (i = 1; i < 2000; i++) {
            data.push({
                name: 'x',
                sp500: data[i - 1].sp500 + ((Math.floor(Math.random() * 2) % 2) ? -1 : 1) * Math.floor(Math.random() * 7),
                djia: data[i - 1].djia + ((Math.floor(Math.random() * 2) % 2) ? -1 : 1) * Math.floor(Math.random() * 7)
            });
        }
        return data;
    }

    var store = new Ext.data.JsonStore({
        fields: ['name', 'sp500', 'djia'],
        data: generateData()
    });
    store.loadData(generateData());

    var win = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        hidden: false,
        maximizable: true,
        title: 'Stack Simulator',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: 'Reload Data',
            handler: function() {
                store.loadData(generateData());
                //Ext.TaskManager.stop(task);
            }
        }],
        items: {
            id: 'chartCmp',
            xtype: 'chart',
            theme: 'Category1',
            animate: false,
            store: store,
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['djia'],
                title: 'Dow Jones Average',
                label: {
                    font: '11px Arial'
                }
            }, {
                type: 'Numeric',
                position: 'right',
                grid: false,
                fields: ['sp500'],
                title: 'S&P 500',
                label: {
		                font: '11px Arial'
		            }
            }],
            series: [{
                type: 'line',
                lineWidth: 1,
                showMarkers: false,
                fill: true,
                axis: 'left',
                xField: 'name',
                yField: 'djia',
                style: {
                    'stroke-width': 1
                }
            }, {
                type: 'line',
                lineWidth: 1,
                showMarkers: false,
                axis: 'right',
                xField: 'name',
                yField: 'sp500',
                style: {
                    'stroke-width': 1
                }
            }]
        }
    });
});

</script>

</head>
    <body id="docbody">
    </body>
</html>

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Stack Simulator</title>
	<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
	<script type="text/javascript" src="../../../bootstrap.js"></script>
	<script>
	Ext.require(['Ext.chart.', 'Ext.data.']);

	Ext.onReady(function () {
	function generateData(){
	var data = [{
	name: 'x',
	djia: 10000,
	sp500: 1100
	}],
	i;
	for (i = 1; i < 2000; i++) {
	data.push({
	name: 'x',
	sp500: data[i - 1].sp500 + ((Math.floor(Math.random() * 2) % 2) ? -1 : 1) * Math.floor(Math.random() * 7),
	djia: data[i - 1].djia + ((Math.floor(Math.random() * 2) % 2) ? -1 : 1) * Math.floor(Math.random() * 7)
	});
	}
	return data;
	}

	var store = new Ext.data.JsonStore({
	fields: ['name', 'sp500', 'djia'],
	data: generateData()
	});
	store.loadData(generateData());

	var win = Ext.create('Ext.Window', {
	width: 800,
	height: 600,
	hidden: false,
	maximizable: true,
	title: 'Stack Simulator',
	renderTo: Ext.getBody(),
	layout: 'fit',
	tbar: [{
	text: 'Reload Data',
	handler: function() {
	store.loadData(generateData());
	//Ext.TaskManager.stop(task);
	}
	}],
	items: {
	id: 'chartCmp',
	xtype: 'chart',
	theme: 'Category1',
	animate: false,
	store: store,
	axes: [{
	type: 'Numeric',
	position: 'left',
	fields: ['djia'],
	title: 'Dow Jones Average',
	label: {
	font: '11px Arial'
	}
	}, {
	type: 'Numeric',
	position: 'right',
	grid: false,
	fields: ['sp500'],
	title: 'S&P 500',
	label: {
	font: '11px Arial'
	}
	}],
	series: [{
	type: 'line',
	lineWidth: 1,
	showMarkers: false,
	fill: true,
	axis: 'left',
	xField: 'name',
	yField: 'djia',
	style: {
	'stroke-width': 1
	}
	}, {
	type: 'line',
	lineWidth: 1,
	showMarkers: false,
	axis: 'right',
	xField: 'name',
	yField: 'sp500',
	style: {
	'stroke-width': 1
	}
	}]
	}
	});
	});

	</script>

	</head>
	<body id="docbody">
	</body>
	</html>