US__HighchartsViz.html

<html>
<head>
    <title>Highcharts Viz of US Twitter Sentiment</title>
    <style type="text/css">
        .chart div {
            font: 15px Rokkitt;
            background-color: steelblue;
            text-align: right;
            padding: 3px;
            margin: 1px;
            color: white;
        }

        .chart rect {
            stroke: white;
            fill: steelblue;
        }

        .chart text {
            fill: white;
        }

        button {
            font-family: Rokkitt;
            text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8);
        }
    </style>
    <link rel='stylesheet' type='text/css' href="assets/css/bootstrap.min.css"/>
    <script src="assets/js/jquery-2.1.0.min.js"></script>
    <script src="assets/js/highcharts.js"/>
    <script src="assets/js/bootstrap.min.js"/>
    <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Rokkitt'>

    <script type='text/javascript'>
    </script>
</head>
<body style="font-family: Rokkitt; font-size: 1em; text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8);">
    <center>
    <h1 style="font-family: Rokkitt; color: black;"><b>Real-time Visualization of US Twitter Sentiment</b></h1>
        <h3 style="font-family: Rokkitt; color: black; text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8);">
        <u>Stack</u>: Storm Topology, Twitter Streaming API, Bing Maps API, JMS, ActiveMQ, Camel, WebSockets and Highcharts</h3>
        <div id="btns" style="width:700px;">
            <button value="Start" id="start" class="btn btn-primary btn-large"
                    style="font-size: 18px; font-family: Rokkitt; text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8); color:#000000"><span
                    class="glyphicon glyphicon-play"></span> Start Viz
            </button>
            &nbsp;&nbsp;&nbsp;
            <button value="Stop" id="stop" class="btn btn-warning btn-large"
                    style="font-size: 18px; font-family: Rokkitt; text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8); color:#000000"><span
                    class="glyphicon glyphicon-stop"></span> Stop Viz
            </button>
        </div>
    <div id="chart" style="width:800px; height:500px;"></div>
    <div id="raw"></div>
        </center>

    <script>

        if (!window.WebSocket) {
            alert("WebSocket not supported by this browser");
        }

        var data = new Array();
        function newDataReceived(newData) {
            var jsonData = JSON.parse(newData);

            var found = -1;
            for (var i = 0; i < data.length; i++) {
                if (data[i].x == jsonData.stateCode) {
                    found = i;
                    break;
                }
            }
            if (found < 0) {
                var graphData = {};
                graphData.x = jsonData.stateCode;
                graphData.y = jsonData.sentiment;
                data.push(graphData);

                redraw(found, graphData);
            } else {
                data[found].y = jsonData.sentiment;
                redraw(found, data[found]);
            }

//            redraw(data);
        }
        var socket = {
            start: function () {
                var location = "ws://localhost:9292/storm";
                this._ws = new WebSocket(location);
                this._ws.onmessage = this._onmessage;
                this._ws.onclose = this._onclose;
            },

            _onmessage: function (m) {
                if (m.data) {
                    newDataReceived(m.data);
                }
            },

            _onclose: function (m) {
                if (this._ws) {
                    this._ws.close();
                }
            }
        };

        function stop() {
            socket._onclose(null);
        }

        function start() {
            socket.start();
        }

        $(function () {
            $('#start').on('click', function (e) {
                start();
            });
            $('#stop').on('click', function (e) {
                stop();
            });
        });
        function redraw(index, data) {
            if (index < 0) {
                var series = {
                    id: data.x,
                    name: data.x,
                    data: [data.y]
                };
                chart.addSeries(series);

            } else {
                for (var i = 0; i < chart.series.length; i++) {
                    if (chart.series[i].name == data.x) {
                        chart.series[i].setData([data.y]);
                        break;
                    }
                }
            }
        }

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart',
                type: 'column'
            },
            title: {
                text: null
            },
            xAxis: {
                title: {
                    text: null
                }
            },
            yAxis: {
                title: {
                    text: 'Sentiment',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
	                    // formatter:function() {
	                    //     return this.point.stateCode + ":" + this.point.sentiment;
	                    // }
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [
            ]
        });
    </script>
</body>
</html>