JSFiddle - React, Tailwind, and code Playground

ETRAC 2015 daily response counts

by roedema

HTML

<script src="//code.highcharts.com/4.1.9/highcharts.js"></script>
<script src="//code.highcharts.com/4.1.9/modules/data.js"></script>
<script src="//code.highcharts.com/4.1.9/modules/exporting.js"></script>

<div id="daily-chart"></div>

<table id="daily-counts">
	<thead>
		<tr><th>Date</th><th>Count</th></tr>
	</thead>
    <tbody>
        <tr><td>2/9/2015</td><td>16</td></tr>
        <tr><td>2/10/2015</td><td>36</td></tr>
        <tr><td>2/11/2015</td><td>17</td></tr>
        <tr><td>2/12/2015</td><td>13</td></tr>
        <tr><td>2/13/2015</td><td>23</td></tr>
        <tr><td>2/14/2015</td><td>74</td></tr>
        <tr><td>2/15/2015</td><td>55</td></tr>
        <tr><td>2/16/2015</td><td>16</td></tr>
        <tr><td>2/17/2015</td><td>39</td></tr>
        <tr><td>2/18/2015</td><td>30</td></tr>
        <tr><td>2/19/2015</td><td>97</td></tr>
        <tr><td>2/20/2015</td><td>74</td></tr>
        <tr><td>2/21/2015</td><td>31</td></tr>
        <tr><td>2/22/2015</td><td>33</td></tr>
        <tr><td>2/23/2015</td><td>93</td></tr>
        <tr><td>2/24/2015</td><td>19</td></tr>
        <tr><td>2/25/2015</td><td>92</td></tr>
        <tr><td>2/26/2015</td><td>46</td></tr>
        <tr><td>2/27/2015</td><td>49</td></tr>
        <tr><td>2/28/2015</td><td>76</td></tr>
        <tr><td>3/1/2015</td><td>39</td></tr>
        <tr><td>3/2/2015</td><td>22</td></tr>
        <tr><td>3/3/2015</td><td>39</td></tr>
        <tr><td>3/4/2015</td><td>53</td></tr>
        <tr><td>3/5/2015</td><td>48</td></tr>
        <tr><td>3/6/2015</td><td>97</td></tr>
        <tr><td>3/7/2015</td><td>35</td></tr>
        <tr><td>3/8/2015</td><td>99</td></tr>
        <tr><td>3/9/2015</td><td>89</td></tr>
        <tr><td>3/10/2015</td><td>17</td></tr>
        <tr><td>3/11/2015</td><td>81</td></tr>
        <tr><td>3/12/2015</td><td>47</td></tr>
        <tr><td>3/13/2015</td><td>19</td></tr>
        <tr><td>3/14/2015</td><td>36</td></tr>
        <tr><td>3/15/2015</td><td>66</td></tr>
       ...

CSS

#daily-counts td {
    text-align: right;
}

JavaScript

$(function() {
    Highcharts.setOptions({
        chart: {
            style: {
                fontFamily: 'Arial',
                fontSize: '16px'
                //fontFamily: '[template("base font family")]',
                //fontSize: '[template("base font size")]'
            }
        }
    });

    $('#daily-chart').highcharts({
        title: {
            text: 'Faculty Survey Responses'
        },
        subtitle: {
            text: 'Click and drag in the plot area or pinch to zoom'
        },
        data: {
            table: 'daily-counts'
        },
        chart: {
            type: 'column',
            zoomType: 'x'
        },
        xAxis: {
            dateTimeLabelFormats: {
                day: '%b. %e',
                week: '%b. %e',
                month: '%b. %e'
            },
            labels: {
                style: {
                    fontSize: '16px'
                    //fontSize: '[template("base font size")]'
                },
                rotation: -45
            }
        },
        yAxis: {
            title: {
                enabled: false
            },
            labels: {
                style: {
                    fontSize: '16px'
                    //fontSize: '[template("base font size")]'
                }
            }
        },
        colors: ['#00AA00'],
        legend: {
            enabled: false
        },
        credits: {
            enabled: false,
        }
    });
});