text: $(document).ready(function() {
  
     $(".stats").each(function() {
         debugger
         id = $(this).attr('id').split("_")[1];
         overallAttempts = parseInt($(this).find(".overallAttempts").text().trim());
         wrong_cnt = parseInt($(this).find(".allAttemptsWrongAmount").text().trim());
         data_array_str = $(this).find(".entrys_array").text().trim();
         data_array = data_array_str.substring(1, data_array_str.length - 1).split(",");
         first_success = parseInt($(this).find(".first_success_rate").text().trim());
         firstGraph("first_graph_" + id, first_success);
         totalGraph("total_graph_" + id, overallAttempts, wrong_cnt);
         entrysGraph("entrys_graph_" + id, data_array);
         $(this).find(".plain_text").hide();
     })
  });
  
  var entrysGraph = function(divId, entryChoice) {
      yData = [];
      for (i = 0; i < entryChoice.length; ++i) {
          yData.push({name: "Entry " + (i + 1), data: [parseInt(entryChoice[i].trim())]});
      }
      Highcharts.chart(divId, {
          chart: {
              type: 'column'
          },
          title: {
              text: ''
          },
          yAxis: {
              type: 'category',
              title: {
                  text: 'Attempt Counts'
              }
  
          },
          xAxis: {
              allowDecimals: false,
              min: 0,
              title: {
                  text: 'First Attempt Choices'
              }
          },
  
          series: yData,
  
          dataLabels: {
              enabled: true,
              rotation: -90,
              color: '#FFFFFF',
              align: 'right',
              format: '{point.y:.1f}', // one decimal
              y: 10, // 10 pixels down from the top
              style: {
                  fontSize: '13px',
                  fontFamily: 'Verdana, sans-serif'
              }
          }
      });
  }
  
  var totalGraph = function(divId, overallAttempts, wrong_cnt) {
      Highcharts.chart(divId, {
          chart: {
              type: 'bar'
          },
          title: {
              text: ''
          },
          xAxis: {
              categories: [''],
              title: {
                  text: 'Choices'
              }
          },
          yAxis: {
              allowDecimals: false,
              min: 0,
              max: overallAttempts,
              title: {
                  text: 'Attempts'
              }
          },
          legend: {
              reversed: true
          },
          plotOptions: {
              series: {
                  stacking: 'normal'
              }
          },
          series: [{
              name: 'Correct',
              data: [overallAttempts - wrong_cnt]
          }, {
              name: 'Wrong',
              data: [wrong_cnt]
          }]
      });
  }
  
  var totalGraph = function(divId, overallAttempts, wrong_cnt) {
      Highcharts.chart(divId, {
          chart: {
              type: 'bar'
          },
          title: {
              text: ''
          },
          xAxis: {
              categories: ['']
          },
          yAxis: {
              allowDecimals: false,
              min: 0,
              max: overallAttempts,
              title: {
                  text: 'Overall Attempts Count'
              }
          },
          legend: {
              reversed: true
          },
          plotOptions: {
              series: {
                  stacking: 'normal'
              }
          },
          series: [{
              name: 'Correct',
              data: [overallAttempts - wrong_cnt]
          }, {
              name: 'Wrong',
              data: [wrong_cnt]
          }]
      });
  }
  
  
  var firstGraph = function (divId, success_rate) {
      var gaugeOptions = {
          chart: {
              type: 'solidgauge'
          },
          title: {
              text: ''
          },
          pane: {
              center: ['50%', '85%'],
              size: '130%',
              startAngle: -90,
              endAngle: 90,
              background: {
                  innerRadius: '60%',
                  outerRadius: '100%',
                  shape: 'arc'
              },
          },
  
  
          // the value axis
          yAxis: {
              stops: [
                  [0.1, '#DF5353'], // red
                  [0.5, '#DDDF0D'], // yellow
                  [0.9, '#55BF3B'] // green
              ],
              lineWidth: 0,
              minorTickInterval: null,
              tickAmount: 2,
              title: {
                  y: -70
              },
              labels: {
                  y: 16
              }
          },
  
          plotOptions: {
              solidgauge: {
                  dataLabels: {
                      y: 5,
                      borderWidth: 0,
                      useHTML: true
                  }
              }
          }
      };
  
      Highcharts.chart(divId, Highcharts.merge(gaugeOptions, {
          yAxis: {
              title: {
                  text: "First Attempt Success"
              },
              min: 0,
              max: 100,
          },
  
  
          series: [{
              name: 'First Success',
              data: [first_success],
              dataLabels: {
                  format: '<div style="text-align:center"><span style="font-size:20px;color:' +
                  ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                  '<span style="font-size:10px;color:silver">%</span></div>'
              },
          }]
      }));
  };
  
  