title: highcharts issues in pie chart with gradient fill
body: <p>I am a new to <a href="http://www.highcharts.com/" rel="nofollow">Highcharts</a> and <code>json</code> and I'm using the <strong>pie chart with gradient</strong> fill. I have been facing issues for the past few days with ajaxing in  json data from an external file to populate a pie chart with gradient fill using the library. I have already tried all the suggestions of StackOverflow and Google search though I'm unable to find a particular solution for this. </p>
  
  <p>In my console my json data shows like </p>
  
  <pre><code>   [{"name":{"MOZILA":45.0}},{"name":{"IE":26.8}},{"name":{"CHROME":12.8}},{"name":{"OPERA":6.2}},{"name":{"OTHERS":9.2}}]
  </code></pre>
  
  <p>Here is my AJAX call (I omitted unrelated data)</p>
  
  <pre><code>    $(function () {
  
    // Radialize the colors
     Highcharts.getOptions().colors =   Highcharts.map(Highcharts.getOptions().colors, function(color) {
  return {
       radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
      stops: [
          [0, color],
          [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
      ]
      };
  
      $.getJSON("pie.php", function(json) {  
      // call createChart passing the data to be used 
  
      options.series[0].data = json;     
      createChart(json);
     });
  
    });
     }
    function createChart(chartData) {
     // Build the chart
    $('#container').highcharts({
      chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
  },
  title: {
      text: ' Rate of a specific project'
  },
  tooltip: {
      pointFormat: '{series.name}: &lt;b&gt;{point.percentage:.1f}&lt;/b&gt;'
  },
  plotOptions: {
      pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
              enabled: true,
              format: '&lt;b&gt;{point.name}&lt;/b&gt;: {point.percentage:.1f}',
              style: {
                  color: (Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || 'black'
              },
              connectorColor: 'silver'
          }
      }
     },
    series: [{
      type: 'pie',
      name: 'Total without cost',
      data: chartData
     }]
    });
   }
  </code></pre>
  
  <p>Here is my <strong>pie.php</strong>:</p>
  
  <pre><code> $sql="SELECT mozila,ie,chrome,opera,safari,torch FROM webmarketing";
   $resultSql = mysql_query($sql);
    $result = array();
    while($rows=mysql_fetch_array($resultSql)) {
     $result[] = array('name' =&gt; 'MOZILA', 'y' =&gt; $rows['mozila']);
  $result[] = array('name' =&gt; 'IE', 'y' =&gt; $rows['ie']);
  $result[] = array('name' =&gt; 'CHROME', 'y' =&gt; $rows['chrome']);
  $result[] = array('name' =&gt; 'OPERA', 'y' =&gt; $rows['opera']);
  $result[] = array('name' =&gt; 'OTHERS', 'y' =&gt; $rows['safari']+$rows['torch']);
    }
    print json_encode($result, JSON_NUMERIC_CHECK);
  </code></pre>
  
  <p>Data shows on console but graph does not display on the browser. </p>