designer

designer.html

<link rel="import" href="../chart-js/chart-js.html"><script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById('example1');

  var chart = new google.visualization.Timeline(container);

  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'President' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  dataTable.addRows([
    [ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
    [ 'Adams',      new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
    [ 'Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

  chart.draw(dataTable);
}
</script>


<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #chart_js {
        width: 300px;
        height: 200px;
        left: 460px;
        top: 210px;
        position: absolute;
      }
    </style>
    <chart-js kind="Bar" id="chart_js"></chart-js>
    <div id="example1" style="width: 900px; height: 180px;"></div>
  </template>

  <script>

    Polymer({
      
    });

  </script>

</polymer-element>