Created
May 12, 2014 22:51
-
-
Save ktilcu/ce9d5ba8facff696e5c9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Realtime Impressions</title> | |
| <link rel="stylesheet" href="/ui_v2/css/main.css"/> | |
| <style> | |
| .container { | |
| margin-top: 30px; | |
| } | |
| #placeholder { | |
| width: 860px; | |
| height: 300px; | |
| } | |
| .v2-table th:first-of-type { | |
| border-left-color: transparent; | |
| } | |
| .v2-table th:hover { | |
| background-color: #EEEEEE; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header role="banner"> | |
| <div class="page_wrap"> | |
| <a id="site_logo" href="/">Placelocal</a> | |
| </div> | |
| </header> | |
| <div class="page_wrap"> | |
| <section class="container"> | |
| <header class="content"> | |
| <h1>Realtime Information</h1> | |
| </header> | |
| <div class="page_content"> | |
| <h1>Impressions Per Second</h1> | |
| <div id="perSecond"></div> | |
| </div> | |
| <div class="page_content"> | |
| <h1>Top Campaigns</h1> | |
| <canvas width="860" height="400" id="campaign-chart"></canvas> | |
| </div> | |
| <div class="page_content"> | |
| <h1>Tracking Types</h1> | |
| <div id="pyramid"></div> | |
| </div> | |
| </section> | |
| </div> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> | |
| <script src="http://code.highcharts.com/highcharts.js"></script> | |
| <script src="http://code.highcharts.com/modules/funnel.js"></script> | |
| <script type="text/javascript"> | |
| var socket = new WebSocket('ws://localhost:8083'), | |
| subscribers = [], | |
| perSecondChart, | |
| perCampaignChart; | |
| socket.onmessage = function(msg){ | |
| var d = JSON.parse(msg.data); | |
| // Handlers | |
| perSecondChart.series[0].addPoint({x: Date.now(), y: d.impressions.impressionsPerSecond}, true, true); | |
| }; | |
| $(function() { | |
| function init(){ | |
| setupCharts(); | |
| } | |
| function setupCharts(){ | |
| perSecondChart = new Highcharts.Chart(perSecondChartTmpl) | |
| } | |
| init(); | |
| // We use an inline data source in the example, usually data would | |
| // be fetched from a server | |
| // var totalPoints = 100; | |
| // function getImpressionData(defaultValue){ | |
| // if (data.length > 0) | |
| // data = data.slice(1); | |
| // // Do a random walk | |
| // while (data.length < totalPoints) { | |
| // data.push(defaultValue); | |
| // } | |
| // // Zip the generated y values with the x values | |
| // var res = []; | |
| // for (var i = 0; i < data.length; ++i) { | |
| // res.push([i, data[i]]) | |
| // } | |
| // return res; | |
| // } | |
| // var plot = $.plot("#placeholder", [ ], { | |
| // series: { | |
| // lines: {fill: true, fillColor: "#C3D5DE"} | |
| // }, | |
| // xaxis: { | |
| // show: false | |
| // }, | |
| // yaxis: { | |
| // min: 0, | |
| // max: 1000 | |
| // }, | |
| // colors: ["#709aaf"], | |
| // grid: { | |
| // borderWidth: 1, | |
| // borderColor: "#EEE" | |
| // } | |
| // }); | |
| // function reloadPlot(defaultValue){ | |
| // plot.setData([getImpressionData(defaultValue)]); | |
| // var maxValue = _.max(data); | |
| // if(maxValue > 1000){ | |
| // plot.getOptions().yaxes[0].max = maxValue + 10; | |
| // } | |
| // plot.setupGrid(); | |
| // plot.draw(); | |
| // } | |
| // updateBars = _.debounce(function(){ | |
| // var campaignNames = _.keys(topCampaigns); | |
| // campaignNames = _.sortBy(campaignNames, function(campaign){ | |
| // return topCampaigns[campaign]; | |
| // }); | |
| // campaignNames.reverse(); | |
| // chart.Bar({ | |
| // labels: _.map(campaignNames, function(campaign){ | |
| // return '#' + campaign | |
| // }), | |
| // datasets: [ | |
| // { | |
| // fillColor: '#DDD', | |
| // strokeColor: '#AAA', | |
| // data: _.map(campaignNames, function(name){ | |
| // return topCampaigns[name]; | |
| // }) | |
| // } | |
| // ] | |
| // }, { | |
| // animation: false | |
| // }) | |
| // }, 100); | |
| // function update(defaultValue){ | |
| // reloadPlot(defaultValue); | |
| // updateBars(); | |
| // chart3.series[0].update({data: blah}) | |
| // } | |
| // chart3 = new Highcharts.Chart({ | |
| // chart: { | |
| // renderTo: 'pyramid', | |
| // type: 'funnel', | |
| // marginRight: 100 | |
| // }, | |
| // title: { | |
| // text: 'Sales pyramid', | |
| // x: -50 | |
| // }, | |
| // plotOptions: { | |
| // series: { | |
| // dataLabels: { | |
| // enabled: true, | |
| // format: '<b>{point.name}</b> ({point.y:,.0f})', | |
| // color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', | |
| // softConnector: true | |
| // } | |
| // } | |
| // }, | |
| // legend: { | |
| // enabled: false | |
| // }, | |
| // series: [{ | |
| // name: 'Unique users', | |
| // data: [ | |
| // ['Website visits', 15654], | |
| // ['Downloads', 4064], | |
| // ['Requested price list', 1987], | |
| // ['Invoice sent', 976], | |
| // ['Finalized', 9] | |
| // ] | |
| // }] | |
| // }); | |
| // update(); | |
| }); | |
| var perSecondChartTmpl = { | |
| chart: { | |
| renderTo: 'perSecond', | |
| type: 'areaspline', | |
| animation: Highcharts.svg, // don't animate in old IE | |
| marginRight: 10 | |
| }, | |
| title: { | |
| text: 'Impressions Per Second' | |
| }, | |
| xAxis: { | |
| type: 'datetime', | |
| tickPixelInterval: 150 | |
| }, | |
| yAxis: { | |
| title: { | |
| text: 'Value' | |
| }, | |
| plotLines: [{ | |
| value: 0, | |
| width: 1, | |
| color: '#808080' | |
| }] | |
| }, | |
| tooltip: { | |
| formatter: function() { | |
| return '<b>'+ this.series.name +'</b><br/>'+ | |
| Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ | |
| Highcharts.numberFormat(this.y, 2); | |
| } | |
| }, | |
| legend: { | |
| enabled: false | |
| }, | |
| exporting: { | |
| enabled: false | |
| }, | |
| series: [{ | |
| name: 'Impressions per Second', | |
| data: (function() { | |
| // generate an array of random data | |
| var data = [], | |
| time = (new Date()).getTime(), | |
| i; | |
| for (i = -30; i <= 0; i++) { | |
| data.push({ | |
| x: time + i * 1000, | |
| y: null | |
| }); | |
| } | |
| console.log(data); | |
| return data; | |
| })() | |
| }] | |
| }; | |
| var perCampaignChartTmpl = { | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment