JSFiddle - React, Tailwind, and code Playground

by Mike Zavarello

HTML

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- moved the Highcharts scripts AFTER the jQuery scripts are called -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<link  href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link  href="/resources/demos/style.css">
<input type="button" ID="search_data" runat="server" class="sear_btn"  value="Search Data" OnServerClick="search_data_Click" />

<select id="regiondrop">  <!-- added id here; needed in your first function call  -->
  <option value="UK">UK</option>
  <option value="France">France</option>
  <option value="London">London</option>
  <option value="Paris">Paris</option>
</select>
<p>fromDate: <input type="text" id="fromdate"></p>
<p>tpDate: <input type="text" id="todate"></p>

JavaScript

$(function () {
  $("#fromdate").datepicker();
  $("#todate").datepicker();
});

// removed quotes from this line to make it a regular array, not a string
var strArray = [['sfdsdfLi', 9],['Kiwsdfi', 3],['Mixesdfd nuts', 1],['Oranges', 6],['Grapes (bunch)', 1]];

$(function () {
  $('[ID*=search_data]').on('click', function () {
    var from = $('[ID*=fromdate]').val();
    var to = $('[ID*=todate]').val();
    var reg = $('[ID*=regiondrop]').val();		// changed this to .val()
    var obj = {};
    obj.fdate = from;
    obj.tdate = to;
    obj.region = reg;
    GetData(obj);
    return false;
  });
});
function GetData(obj) {
  /* removed ajax call for now since the URL is not complete and can't be retrieved here
  
  
  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "WebForm1.aspx/GetVo",
    data: JSON.stringify(obj),

    dataType: "json",
    async: true,
    cache: false,
    success: function (result) {

      alert(result.d);
      alert('u');
      //start
      strArray = result.d;
      var myarray = eval(strArray);


      $.getJSON( strArray, function( data ) {
        var items = [];
        $.each( data, function( key, val ) {
          console.log(key + ", " + val);
        });
      });*/


      //alert('u');

      $('#container').highcharts({
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45
          }
        },
        title: {
          text: 'Contents of Highsoft\'s weekly fruit delivery'
        },
        subtitle: {
          text: '3D donut in Highcharts'
        },
        plotOptions: {
          pie: {
            innerSize: 100,
            depth: 45
          }
        },
        series: [{
          name: 'Delivered amount',
          data: strArray//myarray
        }]
      });

    }/*,
    error: function (Result) {
      alert("Error");
    }
  });
}*/