San Mateo Nov

NOV 2018

by ceebee

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//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"> Median Home Price </a>
  </li>
  <li><a href="#tab2" role="tab" data-toggle="tab">Median Price and Appreciation</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/EyMjc/embed/" width="950"></iframe>
  </div>

  <div class="tab-pane" id="tab2">
 <a href="https://drive.google.com/uc?export=view&id=1ZwOUNpEeB-Q3SWhvQ1KuZ1Hoz20MvrVr"><img src="https://drive.google.com/uc?export=view&id=1ZwOUNpEeB-Q3SWhvQ1KuZ1Hoz20MvrVr" style="width: 950px; max-width: 950; height: 500" title="Click for the larger version." />

</a>


  </div>

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();
  }
});
// CREATE CHART
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "pathToImages": "http://www.amcharts.com/lib/3/images/",
  "dataDateFormat": "YYYY-MM-DD",
  "valueAxes": [{
    "id": "v1",
    "axisAlpha": 0,
    "position": "left"
  }],
  "graphs": [{
    "id": "g1",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value"
  }],
  "chartScrollbar": {
    "graph": "g1",
    "scrollbarHeight": 30
  },
  "chartCursor": {
    "cursorPosition": "mouse",
    "pan": true,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "position": "top"
  },
  exportConfig: {
    menuRight: '20px',
    menuBottom: '50px',
    menuItems: [{
      icon: 'http://www.amcharts.com/lib/3/images/export.png',
      format: 'png'
    }]
  },
  "dataProvider": [{
    "date": "2012-07-27",
    "value": 13
  }, {
    "date": "2012-07-28",
    "value": 11
  }, {
    "date": "2012-07-29",
    "value": 15
  }, {
    "date": "2012-07-30",
    "value": 16
  }, {
    "date": "2012-07-31",
    "value": 18
  }, {
    "date": "2012-08-01",
    "value": 13
  }, {
    "date": "2012-08-02",
    "value": 22
  }, {
    "date": "2012-08-03",
    "value": 23
  }, {
    "date": "2012-08-04",
    "value": 20
  }, {
    "date": "2012-08-05",
    "value": 17
  }, {
    "date": "2012-08-06",
    "value": 16
  }, {
    "date": "2012-08-07",
    "value": 18
  }, {
    "date": "2012-08-08",
    "value": 21
  }, {
    "date": "2012-08-09",
    "value": 26
  }, {
    "date":...