Table-generated Highcharts Graph

v2

by bizamajig

HTML

<script src="http://www.gingahmail.com/economics/highcharts.js"></script>
<div id="container"></div>
<form id="formulario" name="formulario">
<input type="submit" id="submit" /><br />
</form>

CSS

body {
    background: #6e3009;
}
table.tablesorter {
    font-family: arial;
    background-color: #cdcdcd;
    margin: 10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
    color: #000000;
}
table.tablesorter thead th {
    background-color: #e6eeee;
    border: 1px solid #ffffff;
    padding: 4px;
}
table.tablesorter tbody th {
    background-color: #dadede;
    border: 1px solid #ffffff;
    padding: 4px;
}
table.tablesorter tbody td {
    color: #3d3d3d;
    padding: 4px;
    background-color: #ffffff;
}
table.tablesorter tbody tr.odd td {background-color:#f0f0f6;}

JavaScript

var chart;
$(document).ready(function() {
    options ={ 
        chart: {
         renderTo: 'container',
         defaultSeriesType: 'line',
         zoomType: 'xy'
      },
               title : { text : 'Foo' },
                xAxis: { title: { text: 'x label'  } },
    yAxis: { title: { text: 'y label' } },

      series: []
              };

   chart = new Highcharts.Chart(options);

   series2 = [{
         name: '1042',
         color: "rgba(255,139,0,0.5)",
         data: [[ 146,55.8 ],[150,60.9]]
      }, {
         name: '10403',
          color: "rgba(255,255,0,0.5)",
         data: [[ 130,25.8 ],[150,54.9]]
      }];
    $( "#formulario" ).submit(function() {
    options.series = series2;
    var chart = new Highcharts.Chart(options);
        return false;
    });


});