JSFiddle - React, Tailwind, and code Playground

by psharm57

HTML

<h4>Symbol list</h4>
<ul id="lists"></ul>
<input type="text" id="sym">
<input type="submit" value="submit" id="submit" class="btn btn-primary"/>
<br>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="chart">
</div>

JavaScript

google.charts.load('current', {
   'packages': ['bar']
 });
 google.charts.setOnLoadCallback(drawChart);

 function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ['Symbol', 'Value'],
     ['FAF', 1000], //testing
     ['DIS', 1170], //testing
   ]);
   var options = {
     bars: 'horizontal',
     hAxis: {
       format: 'decimal'
     },
     height: 400,
   };

   var chart = new google.charts.Bar(document.getElementById('chart'));

   chart.draw(data, google.charts.Bar.convertOptions(options));

   var btns = document.getElementById('btn-group');

   btns.onclick = function(e) {

     if (e.target.tagName === 'BUTTON') {
       options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
       chart.draw(data, google.charts.Bar.convertOptions(options));
     }
   }
 }
function addItemgraph()
{
    $('ul#lists').append("<li>" + $('#sym').val() + "</li>");
      $.ajax({
    type: 'GET',
    dataType: 'jsonp',
    cache: true,
    jsonp: false,
    jsonpCallback: 'graph',
    url: 'http://chartapi.finance.yahoo.com/instrument/1.1/goog/chartdata;type=close;range=6m/json/?callback=graph',
    processData: false
  }).success(function (data) {
 
 
  });
}

$(function() {
    $('#submit').click(function () {addItemgraph()})
})