To create piechart in highcharts

Question

Below is my JSON format of data from which I want to create a pie chart in highcharts..

{
  "title": {"text": "Pie"},

  "series": 
  [
    {
        "type": "pie",
        "name": "Actual",
        "data": 
         [
            [
                "Salesgrowth",
                45
            ],
            [
                "marketshare",
                26.8
            ]
         ]
    }
  ]
}

This is valid JSON , I am getting this output from Web Service, when I call this service and evoke this method to run this JSON output to create pie then I get the error as follows,

Uncaught TypeError: Cannot set property 'renderTo' of undefined 

Below is the JQuery function that I make use to call my file where I stored this JSON output from my web service,

function loadJson() {
       $(document).ready(function () {
           //alert("inside");
           var chart;
           var seriesData;
           $.getJSON("val1.json", function (data) {
               var chartoptions = data;
               chartoptions.chart.renderTo = 'container';
               chart = new Highcharts.Chart(chartoptions);

           });

       });
   },

and this function runs well with other kind of charts like bar graph,line graph and column graph...tested with all kinds of graphs, I am facing problem only with pie chart...any help will be greatly appreciated

---------Updated question------ Below is my JSON output I have changed in order to get values

{
   "title":{"text":"Financial"},
   "chart":{"type":"pie"},
   "series":
     [ {"name":"Actual-Market Share","data":["Market Share",30]},{"name":"Actual-Market Share","data":["Sales Growth",70]}]}

and below is the output I am getting,

I am not able to identify what I am exactly messing with...Any idea will be of great help...

----------Updated output-----------

  {
    "legend":{"enabled":"true"},
    "title":{"text":"Financial"}, 
    "chart":{"type":"pie"},
    "series":[{"name":"Actual","data":[{"str":"Market Share","flo":20}]},
              {"name":"Actual","data":[{"str":"Sales Growth","flo":30}]},
              {"name":"Actual","data":[{"str":"Operating Profit","flo":40}]},
              {"name":"Actual","data":[{"str":"Gross Margin %","flo":10}]}]}

Answer 1

Your json doesn't include a chart object, so setting chart.renderTo won't work.

If you can change the webservice, get it to add the following to your json:

 chart: {
    },

If you can't change the back end, you can change your javascript to add the chart object before setting renderTo:

$.getJSON("val1.json", function (data) {
           var chartoptions = data;
           if (typeof chartoptions.chart === 'undefined')  {
               chartoptions.chart = {};
           }
           chartoptions.chart.renderTo = 'container';
           chart = new Highcharts.Chart(chartoptions);
       });