To create piechart in highcharts

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}]}]}

Answers


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);
       });

Need Your Help

Phonegap Internet Connectivity State

android ios mobile cordova phonegap-build

My app needs to know whether the device has internet connectivity or not - if it does, the application will show data from a server, and if it doesn't, the app will display previously cached data.

How do I define xaml content (stackpanel with content) as an application resource?

silverlight windows-phone-7 control app.xaml application-resource

I'm sure this question is elementary understanding of Silverlight and has probably been asked several times before, but I'm having trouble finding search terms for what I'm looking for.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.