title: PIE CHART - Data Visualization With DataTables and Highcharts
body: <p>I'm binding all my data in the table to a graph chart and would like to add a pie chart..</p>
  
  <p>How do I add my array of data to the pie chart like it is done for the chart?
  I'm trying to show a pie chart that displays countries and their populations?</p>
  
  <p>Thank you!</p>
  
  <p>This will put me on a good path to create more pie charts on my own </p>
  
  <p><strong>Here is my attempted code below:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var draw = false;
  
  init();
  
  /**
   * FUNCTIONS
   */
  
  function init() {
    // initialize DataTables
    var table = $("#table").DataTable();
    // get table data
    var tableData = getTableData(table);
    // create Highcharts
    createHighcharts(tableData);
    // table events
    setTableEvents(table);
  }
  
  function getTableData(table) {
    var dataArray = [],
      countryArray = [],
      populationArray = [],
      densityArray = [];
    ageArray = [];
  
    // loop table rows
    table.rows({
      search: "applied"
    }).every(function() {
      var data = this.data();
      countryArray.push(data[0]);
      populationArray.push(parseInt(data[1].replace(/\,/g, "")));
      densityArray.push(parseInt(data[2].replace(/\,/g, "")));
      ageArray.push(parseInt(data[3].replace(/\,/g, "")));
    });
  
    // store all data in dataArray
    dataArray.push(countryArray, populationArray, densityArray, ageArray);
  
    return dataArray;
  }
  
  function createHighcharts(data) {
    Highcharts.setOptions({
      lang: {
        thousandsSep: ","
      }
    });
  
  
  
    Highcharts.chart("chart", {
      title: {
        text: "Data Chart"
      },
  
      subtitle: {
        text: "fsvfsvvs svsdv"
      },
  
      xAxis: [{
        categories: data[0],
        labels: {
          rotation: -45
        }
      }],
  
  
  
      yAxis: [{
          // first yaxis
          title: {
            text: "Population (2017)"
          }
        },
  
  
        {
          // secondary yaxis
          title: {
            text: "Density (P/Km²)"
          },
  
          min: 0,
          opposite: true
        }
      ],
  
  
      series: [{
          name: "Population (2017)",
          color: "#0071A7",
          type: "column",
          data: data[1],
          tooltip: {
            valueSuffix: " M"
          }
        },
        {
          name: "Med Age",
          color: "#68cc72",
          type: "spline",
          data: data[3]
          // ,
          // tooltip: {
          //   valueSuffix: " M"
          //  } 
        },
  
        {
          name: "Density (P/Km²)",
          color: "#FF404E",
          type: "spline",
          data: data[2],
          yAxis: 1
        }
      ],
  
  
      tooltip: {
        shared: true
      },
  
      legend: {
        backgroundColor: "#ececec",
        shadow: true
      },
  
      credits: {
        enabled: false
      },
  
      noData: {
        style: {
          fontSize: "16px"
        }
      }
    });
  
  
    Highcharts.chart('pie', {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      title: {
        text: 'Report Pie Chart'
      },
      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'
            }
          }
        }
      },
      series: [{
          name: 'PErcentage',
          colorByPoint: true,
          data: [data[2]],
  
        }, {
          name: 'PErcentage',
          colorByPoint: true,
          data: [data[1]],
  
        },
        {
          name: 'PErcentage',
          colorByPoint: true,
          data: [data[3]],
  
        }
      ]
  
    });
  
  }
  
  function setTableEvents(table) {
    // listen for page clicks
    table.on("page", function() {
      draw = true;
    });
  
    // listen for updates and adjust the chart accordingly
    table.on("draw", function() {
      if (draw) {
        draw = false;
      } else {
        var tableData = getTableData(table);
        createHighcharts(tableData);
      }
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Reports&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.highcharts.com/modules/no-data-to-display.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="container"&gt;
      &lt;h1&gt;Reports&lt;/h1&gt;
      &lt;hr&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
            &lt;table id="table" class="table table-striped table-bordered" style="width:100%"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Country&lt;/th&gt;
                  &lt;th&gt;Population (2017)&lt;/th&gt;
                  &lt;th&gt;Density (P/Km²)&lt;/th&gt;
                  &lt;th&gt;Med. Age&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;China&lt;/td&gt;
                  &lt;td&gt;1,409,517,397&lt;/td&gt;
                  &lt;td&gt;150 &lt;/td&gt;
                  &lt;td&gt;37&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;India&lt;/td&gt;
                  &lt;td&gt;1,339,180,127&lt;/td&gt;
                  &lt;td&gt;450&lt;/td&gt;
                  &lt;td&gt;27&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;U.S.&lt;/td&gt;
                  &lt;td&gt;324,459,463&lt;/td&gt;
                  &lt;td&gt;35&lt;/td&gt;
                  &lt;td&gt;38&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Indonesia&lt;/td&gt;
                  &lt;td&gt;263,991,379&lt;/td&gt;
                  &lt;td&gt;146&lt;/td&gt;
                  &lt;td&gt;28&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Brazil&lt;/td&gt;
                  &lt;td&gt;209,288,278&lt;/td&gt;
                  &lt;td&gt;25&lt;/td&gt;
                  &lt;td&gt;31&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Pakistan&lt;/td&gt;
                  &lt;td&gt;197,015,955&lt;/td&gt;
                  &lt;td&gt;256&lt;/td&gt;
                  &lt;td&gt;22&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Nigeria&lt;/td&gt;
                  &lt;td&gt;190,886,311&lt;/td&gt;
                  &lt;td&gt;210&lt;/td&gt;
                  &lt;td&gt;18&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Bangladesh&lt;/td&gt;
                  &lt;td&gt;164,669,751&lt;/td&gt;
                  &lt;td&gt;1,265&lt;/td&gt;
                  &lt;td&gt;26&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Russia&lt;/td&gt;
                  &lt;td&gt;143,989,754&lt;/td&gt;
                  &lt;td&gt;9&lt;/td&gt;
                  &lt;td&gt;39&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Mexico&lt;/td&gt;
                  &lt;td&gt;129,163,276&lt;/td&gt;
                  &lt;td&gt;66&lt;/td&gt;
                  &lt;td&gt;28&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Japan&lt;/td&gt;
                  &lt;td&gt;127,484,450&lt;/td&gt;
                  &lt;td&gt;350&lt;/td&gt;
                  &lt;td&gt;46&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Ethiopia&lt;/td&gt;
                  &lt;td&gt;104,957,438&lt;/td&gt;
                  &lt;td&gt;105&lt;/td&gt;
                  &lt;td&gt;19&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Philippines&lt;/td&gt;
                  &lt;td&gt;104,918,090&lt;/td&gt;
                  &lt;td&gt;352&lt;/td&gt;
                  &lt;td&gt;24&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Egypt&lt;/td&gt;
                  &lt;td&gt;97,553,151&lt;/td&gt;
                  &lt;td&gt;98&lt;/td&gt;
                  &lt;td&gt;25&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Viet Nam&lt;/td&gt;
                  &lt;td&gt;95,540,800&lt;/td&gt;
                  &lt;td&gt;308&lt;/td&gt;
                  &lt;td&gt;30&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Germany&lt;/td&gt;
                  &lt;td&gt;82,114,224&lt;/td&gt;
                  &lt;td&gt;236&lt;/td&gt;
                  &lt;td&gt;46&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;DR Congo&lt;/td&gt;
                  &lt;td&gt;81,339,988&lt;/td&gt;
                  &lt;td&gt;36&lt;/td&gt;
                  &lt;td&gt;17&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Iran&lt;/td&gt;
                  &lt;td&gt;81,162,788&lt;/td&gt;
                  &lt;td&gt;50&lt;/td&gt;
                  &lt;td&gt;30&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Turkey&lt;/td&gt;
                  &lt;td&gt;80,745,020&lt;/td&gt;
                  &lt;td&gt;105&lt;/td&gt;
                  &lt;td&gt;30&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Thailand&lt;/td&gt;
                  &lt;td&gt;69,037,513&lt;/td&gt;
                  &lt;td&gt;135&lt;/td&gt;
                  &lt;td&gt;38&lt;/td&gt;
                &lt;/tr&gt;
  
                &lt;tr&gt;
                  &lt;td&gt;U.K.&lt;/td&gt;
                  &lt;td&gt;66,181,585&lt;/td&gt;
                  &lt;td&gt;274&lt;/td&gt;
                  &lt;td&gt;40&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;France&lt;/td&gt;
                  &lt;td&gt;64,979,548&lt;/td&gt;
                  &lt;td&gt;119&lt;/td&gt;
                  &lt;td&gt;41&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Italy&lt;/td&gt;
                  &lt;td&gt;59,359,900&lt;/td&gt;
                  &lt;td&gt;202&lt;/td&gt;
                  &lt;td&gt;46&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Tanzania&lt;/td&gt;
                  &lt;td&gt;57,310,019&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;17&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;South Africa&lt;/td&gt;
                  &lt;td&gt;56,717,156&lt;/td&gt;
                  &lt;td&gt;47&lt;/td&gt;
                  &lt;td&gt;26&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-12"&gt;
            &lt;div id="chart"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-12"&gt;
            &lt;div id="pie"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
  
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script&gt;
      $(document).ready(function() {
        $('#table').DataTable();
      });
    &lt;/script&gt;
    &lt;script src="./script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>