मैं प्रत्येक पंक्ति को HTML तालिका में हाईचार्ट्स में एक पाई चार्ट कैसे बना सकता हूं?

Question

उदाहरण के लिए मेरी मेज इस तरह होगा:

  agree neutral disagree 
    q1  10  4  4 
    q2  16  1  1 
    q3  18  0  0 
    q4  15  2  1 
    q5  13  5  0 

और मैं सहमत, तटस्थ q1 एक पाई चार्ट बनाने के लिए चाहते हैं, और विभिन्न क्षेत्रों के रूप में सहमत नहीं हैं, और इसी तरह Q2 के लिए, q3..etc।

<script type="text/javascript"> 

     $(function() { 
      var chart; 
     $('#container').highcharts({ 
      data: { 
       table: document.getElementById('datatable') 
      }, 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: '' 
      }, 
      yAxis: { 
       allowDecimals: false, 
       title: { 
        text: 'Persons' 
       } 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
         this.point.y +' individuals said '+ this.point.name.toLowerCase(); 
       } 
      }, 

     }); 
    }); 

    /********************************************** 

    **********************************************/ 


     $(function() { 
      var chart; 
     $('#container2').highcharts({ 
      data: { 
       table: document.getElementById('datatable') 
      }, 
      chart: { 
       type: 'pie' 
      }, 
      title: { 
       text: '' 
      }, 
      yAxis: { 
       allowDecimals: false, 
       title: { 
        text: 'Persons' 
       } 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
         this.point.y +' individuals said '+ this.point.name.toLowerCase(); 
       } 
      }, 

     }); 
    }); 


    /**********************************************/ 

    /**********************************************/ 
    $(function() { 
     var chart; 
     $(document).ready(function() { 
      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'container3', 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false, 
        margin: [0, 0, 0, 0], 
        spacingTop: 0, 
        spacingBottom: 0, 
        spacingLeft: 0, 
        spacingRight: 0    
       }, 
       title: { 
        text: '' 
       }, 
       tooltip: { 
        formatter: function() { 
         return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
        } 
       }, 
       legend: { 
        enabled:true 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         size: '50%', 
         dataLabels: { 
          enabled: false 
         } 
        } 
       }, 
       series: 
       [ 
        { 
        type: 'pie', 
        name: 'testname1', 
        center: [70, 140],//+130 to the x-axis 
        showInLegend:true, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        } 
        ,{ 
        type: 'pie', 
        name: 'testname2', 
        center: [200, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname3', 
        center: [330, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname4', 
        center: [460, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname5', 
        center: [590, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname6', 
        center: [720, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname7', 
        center: [850, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname8', 
        center: [980, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        } 

       ] 

      },function(chart) { 

      $(chart.series[0].data).each(function(i, e) { 
       e.legendItem.on('click', function(event) { 
        var legendItem=e.name; 

        event.stopPropagation(); 

        $(chart.series).each(function(j,f){ 
          $(this.data).each(function(k,z){ 
           if(z.name==legendItem) 
           { 
            if(z.visible) 
            { 
             z.setVisible(false); 
            } 
            else 
            { 
             z.setVisible(true); 
            } 
           } 
          }); 
        }); 

       }); 
      }); 
     }); 
     }); 

    }); 


    </script> 

नोट: पहला चार्ट सफलतापूर्वक उस तालिका से डेटा खींचता है जिसका मैं उपयोग कर रहा हूं।

अन्य दो मेरे प्रश्न का उत्तर देने का प्रयास करने का मेरा प्रयास है।

यहाँ कोड मैं पोस्ट का परिणाम है:

http://tinypic.com/r/11uyj3s/8

Answer 1

उदाहरण: http://jsfiddle.net/4Kn5t/

आप प्रत्येक चार्ट के लिए तीन अतिरिक्त विकल्पों को सेट करने, बताने के लिए कौन-सी पंक्तियां एक के लिए इस्तेमाल किया जाना चाहिए की जरूरत है पाई:

$('#container2').highcharts({ 
    data: { 
     table: document.getElementById('datatable'), 
     switchRowsAndColumns: true, // use rows as points 
     startRow: 1, 
     endRow: 2 // use row == 2 
    }, 
    chart: { 
     type: 'pie' 
    }, 
    title: { 
     text: 'Data extracted from a HTML table in the page' 
    }, 
    yAxis: { 
     allowDecimals: false, 
     title: { 
      text: 'Units' 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>'+ this.series.name +'</b><br/>'+ 
       this.point.y +' '+ this.point.name.toLowerCase(); 
     } 
    } 
});