Skip to content

Instantly share code, notes, and snippets.

@evandrix

evandrix/index.html

Created October 26, 2013 16:57
Download ZIP

Revisions

  1. evandrix created this gist Oct 26, 2013.
    231 changes: 231 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,231 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Tweets</title>
    <style type="text/css">
    body {
    margin: 0;
    padding: 0
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <!--[if IE]>
    <script type="text/javascript" src="excanvas.compiled.js"></script>
    <![endif]-->
    <script type="text/javascript">
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
    var orgData = [127, 181, 244, 315, 627, 1060, 688866, 2132339, 2480417, 1951959, 0, 0];
    var rawData = orgData.map(Math.sqrt);

    var colors = [
    '#2f7ed8',
    '#0d233a',
    '#8bbc21',
    '#910000',
    '#1aadce',
    '#492970',
    '#f28f43',
    '#77a1e5',
    '#c42525',
    '#a6c96a'
    ];

    var chart, settings;
    $(function() {
    settings = {
    chart: {
    renderTo: 'container',
    defaultSeriesType: 'area'
    },
    title: {text:null},
    xAxis: {
    tickInterval: 1,
    labels: {
    formatter: function() {
    return months[this.value];
    }
    }
    },
    yAxis: {
    min: 0,
    title: {
    text: 'Frequency count'
    },
    labels: {
    enabled: true,
    formatter: function() {
    return parseInt((this.value*this.value));
    }
    }
    },
    tooltip: {
    formatter: function() {
    return months[this.x]+": <b>"+Highcharts.numberFormat(orgData[this.x], 0, null, ' ')+'</b> tweets';
    }
    },
    plotOptions: {
    area: {
    color: colors[0],
    pointStart: 0,
    marker: {
    enabled: true,
    symbol: 'circle',
    radius: 4,
    states: {
    hover: {
    enabled: true
    }
    }
    }
    }
    },
    series: [{
    name: 'Months',
    data: rawData
    }]
    };
    chart = new Highcharts.Chart(settings);

    settings = {
    chart: {
    renderTo: 'container1',
    defaultSeriesType: 'area'
    },
    title: {text:null},
    xAxis: {
    tickInterval: 1,
    labels: {
    formatter: function() {
    return days[this.value];
    }
    }
    },
    yAxis: {
    min: 0,
    title: {
    text: 'Frequency count'
    },
    labels: {
    enabled: true,
    formatter: function() {
    return this.value;
    }
    }
    },
    tooltip: {
    formatter: function() {
    return days[this.x]+": <b>"+Highcharts.numberFormat(this.y, 0, null, ' ')+'</b> tweets';
    }
    },
    plotOptions: {
    area: {
    color: colors[2],
    pointStart: 0,
    marker: {
    enabled: true,
    symbol: 'circle',
    radius: 4,
    states: {
    hover: {
    enabled: true
    }
    }
    }
    }
    },
    series: [{
    name: 'Days of Week',
    data: [970082, 1000245, 970334, 1080828, 1094761, 1047772, 1092113]
    }]
    };
    chart = new Highcharts.Chart(settings);

    var n = function (n){ return n > 9 ? "" + n: "0" + n; };
    settings = {
    chart: {
    renderTo: 'container2',
    defaultSeriesType: 'area'
    },
    title: {
    text: 'Tweets (Singapore/Asia) summary'
    },
    subtitle: {
    text: '7256135 tweets from 2013-01-01 00:01:36 to 2013-10-25 01:16:06'
    },
    xAxis: {
    tickInterval: 1,
    labels: {
    formatter: function() {
    return n(this.value)+":00";//<br/>-"+n(this.value)+":59";
    }
    }
    },
    yAxis: {
    min: 0,
    title: {
    text: 'Frequency count'
    },
    labels: {
    enabled: true,
    formatter: function() {
    return this.value;
    }
    }
    },
    tooltip: {
    formatter: function() {
    return (n(this.x)+":00")+
    " <b>"+Highcharts.numberFormat(this.y, 0, null, ' ')+'</b> tweets';
    }
    },
    plotOptions: {
    area: {
    color: colors[6],
    pointStart: 0,
    marker: {
    enabled: true,
    symbol: 'circle',
    radius: 4,
    states: {
    hover: {
    enabled: true
    }
    }
    }
    }
    },
    series: [{
    name: 'Hours of Day',
    data: [381239, 339455, 292401, 250473, 225050, 213841, 226801, 236846,
    246601, 261536, 267535, 284046, 290193, 290950, 297795, 302934,
    304616, 306306, 329529, 340822, 372687, 390561, 405097, 398821]
    }]
    };
    chart = new Highcharts.Chart(settings);

    var cont = $('<div></div>');
    for (var i = 0; i < colors.length; i++) {
    var str = '<div style="width:16px;height:16px;display:inline-block;text-align:center;background-color:'+colors[i]+';">'+i+'</div>';
    cont.append($(str));
    }
    //$('body').prepend(cont);
    });
    </script>

    <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
    <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
    </head>
    <body>
    <div id="container2" style="width: 1200px; height: 390px; margin: 0 auto;"></div>
    <div style="margin: 0 auto; width: 1200px;">
    <span id="container1" style="width: 600px; height: 390px; float:left;"></span>
    <span id="container" style="width: 600px; height: 390px; float:left;"></span>
    <br style="clear:both" />
    </div>
    </body>
    </html>