chriddyp/dashboard.html

## dashboard.html
<!DOCTYPE HTML>
<html>
<head>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/base-min.css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

</head>

<body style="font-family: 'Open Sans', serif; background: #edf1f8">
    <div class="loading">
        Initializing data (takes about 5 seconds)...
    </div>
    <div class="left-pane" style="">
        <div>
            Dashboard
        </div>
        <button id="refresh">Load data</button>
    </div>

    <div>
        <iframe id="graph"
                src="https://plot.ly/~chris/4103.embed"
                style="width:100%; height:350px; border:none"
                seamless>
        </iframe>
    </div>

</body>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            function init_graph_obj(id){
                var obj = {
                    graphContentWindow: $('#'+id)[0].contentWindow,
                    id: id
                };
                obj['pinger'] = setInterval(function(){
                    obj.graphContentWindow.postMessage({task: 'ping'}, 'https://plot.ly');
                }, 500);
                return obj;
            }
            var graphs = {
                'graph': init_graph_obj('graph')
            };

            window.addEventListener('message', function(e){
                var message = e.data;
                if (graphs['graph'].graphContentWindow === e.source){
                    var graph = graphs['graph'];
                } else if (graphs['agg'].graphContentWindow === e.source){
                    var graph = graphs['agg'];
                }
                var pinger = graph.pinger;
                var graphContentWindow = graph.graphContentWindow;
                var id = graph.id;

                if('pong' in message && message.pong) {
                    console.log('>> clearing!')
                    clearInterval(pinger);
                    $('.loading').hide();

                } else if (message.type==='hover' ||
                            message.type==='zoom'  ||
                            message.type==='click') {
                    console.log('>> ', message.type);
                    if(message.type !== 'zoom') {
                        for(var i in message.points) {
                            delete message.points[i].data;
                        }
                    }
                }
            });
            window.graphs = graphs;
        });

        // Retrieve data from the server
        $('#refresh').click(function(){
            $.get('/__internal/get_some_data', function(res){
                // pass the message directly into the embedded graph for plotting
                // you can also modify this message, and this data, in javascript
                // before graphing it.
                window.graphs.graph.graphContentWindow.postMessage(res, 'https://plot.ly');
            })
        });

    </script>

</body>
</html>

## views.py
def get_some_data(request):
    import numpy as np
    x = np.random.randn(100)
    y = np.random.randn(100)

    # This message will get passed directly into the iframe
    # in the browser.
    # This format is strict, you can check out different
    # formats here: github.com/plotly/Embed-API
    return json_res(
        {
            'task': 'newPlot',
            'data': [
                {
                    'x': x.tolist(),
                    'y': y.tolist()
                }
            ]
        }
    )
	<!DOCTYPE HTML>
	<html>
	<head>

	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/base-min.css">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

	</head>

	<body style="font-family: 'Open Sans', serif; background: #edf1f8">
	<div class="loading">
	Initializing data (takes about 5 seconds)...
	</div>
	<div class="left-pane" style="">
	<div>
	Dashboard
	</div>
	<button id="refresh">Load data</button>
	</div>

	<div>
	<iframe id="graph"
	src="https://plot.ly/~chris/4103.embed"
	style="width:100%; height:350px; border:none"
	seamless>
	</iframe>
	</div>

	</body>

	<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
	function init_graph_obj(id){
	var obj = {
	graphContentWindow: $('#'+id)[0].contentWindow,
	id: id
	};
	obj['pinger'] = setInterval(function(){
	obj.graphContentWindow.postMessage({task: 'ping'}, 'https://plot.ly');
	}, 500);
	return obj;
	}
	var graphs = {
	'graph': init_graph_obj('graph')
	};

	window.addEventListener('message', function(e){
	var message = e.data;
	if (graphs['graph'].graphContentWindow === e.source){
	var graph = graphs['graph'];
	} else if (graphs['agg'].graphContentWindow === e.source){
	var graph = graphs['agg'];
	}
	var pinger = graph.pinger;
	var graphContentWindow = graph.graphContentWindow;
	var id = graph.id;

	if('pong' in message && message.pong) {
	console.log('>> clearing!')
	clearInterval(pinger);
	$('.loading').hide();

	} else if (message.type==='hover' \|\|
	message.type==='zoom' \|\|
	message.type==='click') {
	console.log('>> ', message.type);
	if(message.type !== 'zoom') {
	for(var i in message.points) {
	delete message.points[i].data;
	}
	}
	}
	});
	window.graphs = graphs;
	});

	// Retrieve data from the server
	$('#refresh').click(function(){
	$.get('/__internal/get_some_data', function(res){
	// pass the message directly into the embedded graph for plotting
	// you can also modify this message, and this data, in javascript
	// before graphing it.
	window.graphs.graph.graphContentWindow.postMessage(res, 'https://plot.ly');
	})
	});

	</script>

	</body>
	</html>
	def get_some_data(request):
	import numpy as np
	x = np.random.randn(100)
	y = np.random.randn(100)

	# This message will get passed directly into the iframe
	# in the browser.
	# This format is strict, you can check out different
	# formats here: github.com/plotly/Embed-API
	return json_res(
	{
	'task': 'newPlot',
	'data': [
	{
	'x': x.tolist(),
	'y': y.tolist()
	}
	]
	}
	)