Campbell

SEPT 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">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/BlNTQ/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>Campbell Median Home Price</h2>

<table>
  <tr>
    <th><b>Year</b></th>
    <th><b>Single Family Home</b></th>
    <th><b>Townhouse</b></th>
    <th><b>Condominium</b></th>
  </tr>
  <tr>
    <td>2002</td>
    <td>$560,000</td>
    <td>$415,000</td>
    <td>$296,000</td>
  </tr>
  <tr>
    <td>2003</td>
    <td>$556,000</td>
    <td>$418,750</td>
    <td>$312,250</td>
  </tr>
  <tr>
    <td>2004</td>
    <td>$650,000</td>
    <td>$490,000</td>
    <td>$343,500</td>
  </tr>
  <tr>
    <td>2005</td>
    <td>$738,944</td>
    <td>$596,000</td>
    <td>$415,000</td>
  </tr>
  <tr>
    <td>2006</td>
    <td>$776,000</td>
    <td>$565,000</td>
    <td>$440,000</td>
  </tr>
  <tr>
    <td>2007</td>
    <td>$800,000</td>
    <td>$602,000</td>
    <td>$426,500</td>
  </tr>
  <tr>
    <td>2008</td>
   ...

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":...