nccenter/stateemploymentdata.html at master · NCSUUXClass/nccenter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html>
  <head>
    <link rel="stylesheet" href="County_css.css" type="text/css">

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      var rtime = new Date(1, 1, 2000, 12,00,00);
      var timeout = false;
      var delta = 200;
      window.addEventListener('resize', resizeFunc);

      var _GET = getURLVars();
      var sector_name = _GET["sector"].replace(/_/g," ");


      if(!sector_name || sector_name.length === 0) // providing a default value
        sector_name = "Hospitals";


      google.load('visualization', '1', {'packages':['motionchart']});
      google.setOnLoadCallback(drawChart);


      function display_loading_indicator(){
         document.getElementById("title_div").innerHTML = "<h2>" + "NC employment data 1990-2012, NAICS subsector: " + sector_name + "</h2>";
         document.getElementById("chart_div").innerHTML = "<img src='images/loading1.gif' alt='loading...'/>"
           + "<h2>NOTE: Please wait. Motion charts take a while to load. If you see a query timeout warning, press OK. Visualization will still load, promise!</h2>";
      }

      function drawChart() {
        display_loading_indicator();
        var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdGJDUG0tTDh3WTNVZjZ3TmQ1RGZUUGc&usp=sharing');
        query.setQuery("WHERE E LIKE '" + sector_name.split(" ")[0] +"%'");
        query.send(handleQueryResponse);
      }


      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }

        var chartWidth = getWindowSize()["x"];
        var chartHeight = getWindowSize()["y"];
        if (chartWidth >= chartHeight * 2){
          chartHeight *= 08;
          chartWidth = chartHeight * 2;
        }
        else {
          chartWidth *= 0.8;
          chartHeight = chartWidth / 2;
        }

        document.getElementById('chart_div').setAttribute("style","width:" + chartWidth + "px");
        document.getElementById('chart_div').setAttribute("style","height:" + chartHeight + "px");

	      var data = response.getDataTable();
	      var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
	      var options = {};
	      options['state'] = '{"duration":{"multiplier":1,"timeUnit":"Y"},"nonSelectedAlpha":0.4,"yZoomedIn":false,"xLambda":1,"colorOption":"8","yZoomedDataMax":36.497391,"sizeOption":"6","iconKeySettings":[],"xZoomedDataMax":-75.997744,"playDuration":10.0,"xZoomedDataMin":-84.009698,"orderedByY":false,"iconType":"BUBBLE","dimensions":{"iconDimensions":["dim0"]},"xAxisOption":"2","yZoomedDataMin":34.024762,"yAxisOption":"3","yLambda":1,"time":"1990","orderedByX":false,"xZoomedIn":false,"uniColorForNonSelected":false,"showTrails":true}';

        options['showChartButtons'] = false;
        options['showXMetricPicker'] = false;
        options['showYMetricPicker'] = false;
        options['showXScalePicker'] = false;
        options['showYScalePicker'] = false;
        options['width'] = chartWidth;
        options['height'] = chartHeight;


        chart.draw(data, options);
      }

    function resizeFunc() {
    // http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac
      rtime = new Date();
      if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
      }
    }

    function resizeend() {
      if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
      } else {
        timeout = false;
        //alert('Done resizing');
        drawChart();
      }
    }

	  function getURLVars() {
	      // http://papermashup.com/read-url-get-variables-withjavascript/
	      var vars = {};
	      var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
	          vars[key] = value;
	      });

	      return vars;
	  }

    function getWindowSize(){
      var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth,
      y = w.innerHeight|| e.clientHeight|| g.clientHeight;
      //alert(x);
      var result = {};
      result["x"] = x;
      result["y"] = y;
      return result;
    }

    </script>
  </head>

  <body>
    <center>
      <table>
        <tr>
          <td><div id="navigation_div"></div></td>
          <td><div id="title_div" style="width: 1000px; height: 50px;"></div></td>
        </tr>
      </table>
      <div id="chart_div" style="width: 1000px; height: 500px;"></div>
      <p><button onclick="window.history.back()">&laquo; back to visualization selector</button>
         <br>
         Data source: <a href="https://docs.google.com/spreadsheet/ccc?key=0Am6F8HNNN1PBdDZ4N1BhWVpaS1pZMGNadVQ4aFk0RXc&usp=sharing">
         NC_counties_employment_data</a> spreadsheet in Google Docs.
         Raw data sourced from <a href="http://esesc23.esc.state.nc.us/d4/QCEWSelection.aspx">http://esesc23.esc.state.nc.us/d4/QCEWSelection.aspx</a>
      </p>
    </center>
  </body>
</html>