MEDIAN HOME PRICE OCTOBER 2017-2018 v2

OCTOBER 2018

by ceebee

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Chart</a>
  </li>
  <li><a href="#tab2" role="tab" data-toggle="tab">Data</a>
  </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="tab1">
    <iframe frameborder="0" height="600" src="https://live.amcharts.com/kNGNl/embed/" width="700"></iframe>
  </div>
  <div class="tab-pane" id="tab2">
    <html>

    <head>
      <style>
        table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          width: 100%;
        }

        td,
        th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
        }

        tr:nth-child(even) {
          background-color: #FFFF66;
        }

      </style>
    </head>

    <body>

      <h2>MEDIAN HOME PRICE OCTOBER 2017-2018</h2>

      <table>
        <tr>
          <th><b>City</b></th>
          <th><b>SFR</b></th>
          <th><b>Townhouse</b></th>
          <th><b>Condo</b></th>
        </tr>
        <tr>
          <td>Palo Alto</td>
          <td>$2,761,000</td>
          <td>$1,751,500</td>
          <td>$1,317,500</td>
        </tr>
        <tr>
          <td>Los Altos</td>
          <td>$2,925,000</td>
          <td>$1,605,000</td>
          <td>$1,465,000</td>
        </tr>
        <tr>
          <td>Mountain View</td>
          <td>$1,880,000</td>
          <td>$1,290,000</td>
          <td>$840,000</td>
        </tr>
       ...

CSS

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

// OBSERVE TAB CHANGE
jQuery(".nav-tabs a").on("shown.bs.tab", function() {
  var data = jQuery(this).data();
  if (data.chart !== undefined) {
    chart.validateSize();
  }
});

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "categoryField": "category",
  "depth3D": 9,
  "minMarginBottom": 2,
  "minMarginRight": -7,
  "startDuration": 1,
  "backgroundAlpha": 0.8,
  "fontSize": 7.5,
  "theme": "default",
  "categoryAxis": {
    "autoWrap": true,
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:$[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-1",
      "tabIndex": 0,
      "title": "SFR",
      "type": "column",
      "valueField": "SFR"
    },
    {
      "balloonText": "[[title]] of [[category]]:$[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-2",
      "title": "Townhouse",
      "type": "column",
      "valueField": "Townhouse"
    },
    {
      "balloonText": "[[title]] of [[category]]:$[[value]]",
      "fillAlphas": 1,
      "fillColors": "#00CC00",
      "id": "AmGraph-3",
      "title": "Condominium",
      "type": "column",
      "valueField": "Condominium"
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "unit": "$",
    "unitPosition": "left",
    "title": "Sales Price, Median"
  }],
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "horizontalGap": -2,
    "top": -5,
    "useGraphSettings": true
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "MEDIAN HOME PRICE SEPTEMBER 2017-2018"
  }],
  "dataProvider": [{
      "category": "Palo Alto",
      "Condominium": "1490000",
      "SFR": "3215000",
      "Townhouse": "1806000"
    },
    {
      "category": "Los Altos",
      "Condominium": "1550000",
      "SFR": "3328000",
      "Townhouse": "1925000"
    },
    {
      "category": "Mountain View",
      "Condominium": "985500",
      "SFR": "2272500",
      "Townhouse": "1500000"
 ...