// Create the chart
Highcharts.chart('column-drlldown', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Total number of innovations across interactions and  use-cases'
  },
  subtitle: {
    text: 'Click the columns to view data.'
  },
  accessibility: {
    announceNewData: {
      enabled: true
    }
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: '# of innovations'
    }
  },
colors: [
    '#6fa8dc',
    '#c27ba0',
    '#c27ba0',
    '#6fa8dc',
    '#c27ba0',
    '#c27ba0',
    '#f6b26a',
    '#f6b26a',
    '#c27ba0',
],
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        format: '{point.y}'
      }
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:13px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
  },
//#6fa8dc -blue 
  series: [
    {
      name: "Innovations",
      colorByPoint: true,
      data: [
        {
          name: "Self Learning",
          y: 102,
          drilldown: "Self Learning"
        },
        {
          name: "Lesson Delivery",
          y: 65,
          drilldown: "Lesson Delivery"
        },
        {
          name: "Lesson Preparation",
          y: 41,
          drilldown: "Lesson Preparation"
        },
        {
          name: "Doubt Resolution",
          y: 33,
          drilldown: "Doubt Resolution"
        },
        {
          name: "Teacher Professional Development",
          y: 23,
          drilldown: "Teacher Professional Development"
        },
        {
          name: "Assessments",
          y: 20,
          drilldown: "Assessments"
        },
        {
          name: "Parent-Teacher Communication",
          y: 18,
          drilldown: "Parent-Teacher Communication"
        },
        {
          name: "Parent Participation",
          y: 16,
          drilldown: "Parent Participation"
        },
        {
          name: "Homework",
          y: 10,
          drilldown: "Homework"
        }
      ]
    }
  ],
  drilldown: {
    series: [
      {
        name: "Self Learning",
        id: "Self Learning",
        data: [
          [
            "SL-A: Pre-set content",
            4
          ],
          [
            "SL-B: Interactive content",
            54
          ],
          [
            "SL-C: Personalized content",
            44
          ],
        ]
      },
      {
        name: "Lesson Delivery",
        id: "Lesson Delivery",
        data: [
          [
            "LD-A: One-way lesson delivery",
            39
          ],
          [
            "LD-B: Interactive lesson delivery",
            12
          ],
          [
            "LD-C: Personalized lesson delivery",
            14
          ],
        ]
      },
      {
        name: "Lesson Preparation",
        id: "Lesson Preparation",
        data: [
          [
            "LP-A: Text-based lesson plans ",
            3
          ],
          [
            "LP-B: Multimedia-based lesson plans",
            33
          ],
          [
            "LP-C: Personalized lesson plans ",
            5
          ],
        ]
      },
      {
        name: "Doubt Resolution",
        id: "Doubt Resolution",
        data: [
          [
            "DR-A: Person-dependent",
            11
          ],
          [
            "DR-B: Community-dependent",
            7
          ],
          [
            "DR-C: Independent",
            14
          ],
        ]
      },
      {
        name: "Teacher Professional Development",
        id: "Teacher Professional Development",
        data: [
          [
            "TPD-A: Focus for teacher professional development",
            13
          ],
          [
            "TPD-B: Delivery of teacher professional development",
            10
          ],
        ]
      },
      {
        name: "Assessments",
        id: "Assessments",
        data: [
          [
            "AS-A:Text-based assessments",
            3
          ],
          [
            "AS-B: Multimedia-based assessments",
            17
          ],
        ]
      },
    {
        name: "Parent-Teacher Communication",
        id: "Parent-Teacher Communication",
        data: [
          [
            "PTC-A: One-way information sharing ",
            1
          ],
          [
            "PTC-B: Two-way information exchange",
            17
          ],
        ]
      },
     {
        name: "Parent Participation",
        id: "Parent Participation",
        data: [
          [
            "PP-A: Content broadcast",
            2
          ],
          [
            "PP-B: One-way content sharing",
            3
          ],
          [
            "PP-C: Two-way communication to facilitate engagement with content",
            3
          ],
          [
            "PP-D: Homeschooling platforms for parent to engage with child's learning",
            5
          ],
          [
            "PP-E: Content to build parents' capacity to drive child's learning",
            3
          ],
        ]
      },
        {
        name: "Homework",
        id: "Homework",
        data: [
          [
            "HW-A: Dissemination of homework",
            2
          ],
          [
            "HW-B: Compliance for homework",
            4
          ],
          [
              "HW-C: Creation of homework ",
              1
           ],
            [
                "HW-D: Holistic homework platforms",
                4
            ],            
        ]
      },
    
    ]
  }
});
//bar graph q2
Highcharts.chart('bar-interactions', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Total number of innovations across interactions over time '
  },
  xAxis: {
    categories: [
      'Assessments',
      'Doubt Resolution',
      'Homework',
      'Lesson Delivery',
      'Lesson Preperation',
      'Parent Participation',
      'Parent-Teacher Com...',
      'Self Learning',
      'Teacher Perfessional...',
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: '# of innovations'
    }
  },
    colors: [
    '#351c75',
    '#8e7cc3',
    '#d9d2e9',
],
  tooltip: {
    headerFormat: '<span style="font-size:13px">{point.key}</span><table>',
    pointFormat: '<tr><td style="font-size:13px;color:#351c75;padding:0">{series.name}: </td>' +
      '<td style="padding:0;font-size:13px;" ><b>{point.y}</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Pre-2000',
    data: [0,1,1,11,2,2,0,7,6]

  }, {
    name: '2000-2010',
    data: [6,7,2,11,10,1,1,16,2]

  }, {
    name: '2010-2020',
    data: [14,24,8,42,29,13,17,78,16]
  }]
});

//column shadow
    var dataPrev = {
  2020: [
    ['Assessments', 98.9],
    ['Doubt Resolution', 163.7],
    ['Homework', 7.4],
    ['Lesson Delivery', 437.3],
    ['Lesson Preparation', 47.4],
    ['Parent Participation', 0],
    ['Parent-Teacher Communication', 137.5],
    ['Self Learning', 12.4],
    ['Teacher Professional Development', 12.3]
  ],
  2010: [
    ['Assessments', 0],
    ['Doubt Resolution', 78],
    ['Homework', 7.7],
    ['Lesson Delivery', 342.1],
    ['Lesson Preparation', 0],
    ['Parent Participation', 20],
    ['Parent-Teacher Communication', 0],
    ['Self Learning', 136.7],
    ['Teacher Professional Development', 0]
  ],
  2000: [
    ['Assessments', 0],
    ['Doubt Resolution', 0],
    ['Homework', 0],
    ['Lesson Delivery', 0],
    ['Lesson Preparation', 0],
    ['Parent Participation', 0],
    ['Parent-Teacher Communication', 0],
    ['Self Learning', 0],
    ['Teacher Professional Development', 0]
  ],
};

var data = {
  2020: [
    ['Assessments', 317.2],
    ['Doubt Resolution', 100.8],
    ['Homework', 181.2],
    ['Lesson Delivery', 169.6],
    ['Lesson Preparation', 36.8],
    ['Parent Participation', 11.18],
    ['Parent-Teacher Communication', 25.5],
    ['Self Learning', 78.7],
    ['Teacher Professional Development', 1.2]
  ],
  2010: [
    ['Assessments', 99],
    ['Doubt Resolution', 163.7],
    ['Homework', 7.4],
    ['Lesson Delivery', 437.3],
    ['Lesson Preparation', 47.4],
    ['Parent Participation', 0],
    ['Parent-Teacher Communication', 137.5],
    ['Self Learning', 12.4],
    ['Teacher Professional Development', 12.3]
  ],
  2000: [
    ['Assessments', 0],
    ['Doubt Resolution', 78],
    ['Homework', 7.7],
    ['Lesson Delivery', 342.1],
    ['Lesson Preparation', 0],
    ['Parent Participation', 20],
    ['Parent-Teacher Communication', 0],
    ['Self Learning', 136.7],
    ['Teacher Professional Development', 0]
  ],
};

var countries = [{
  name: 'Assessments',
  color: '#c27ba0'
}, {
  name: 'Doubt Resolution',
  color: '#6fa8dc'
}, {
  name: 'Homework',
  color: '#c27ba0'
}, {
  name: 'Lesson Delivery',
  color: '#c27ba0'
}, {
  name: 'Lesson Preparation',
  color: '#c27ba0'
}, {
  name: 'Parent Participation',
  color: '#f6b26a'
}, {
  name: 'Parent-Teacher Communication',
  color: '#f6b26a'
}, 
{
  name: 'Self Learning',
  color: '#6fa8dc'
},
{
  name: 'Teacher Professional Development',
  color: '#c27ba0'
}
];


function getData(data) {
  return data.map(function (country, i) {
    return {
      name: country[0],
      y: country[1],
      color: countries[i].color
    };
  });
}

var chart = Highcharts.chart('column-shadow', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Average funding per product over time ($M)'
  },
  subtitle: {
    text: 'Comparing to results from 2010'
  },
  plotOptions: {
    series: {
      grouping: false,
      borderWidth: 0
    }
  },
    colors: [
    '#6fa8dc',
    '#c27ba0',
    '#c27ba0',
    '#6fa8dc',
    '#c27ba0',
    '#c27ba0',
    '#f6b26a',
    '#f6b26a',
    '#c27ba0',
],
  legend: {
    enabled: false
  },
  tooltip: {
    shared: true,
    headerFormat: '<span style="font-size: 15px">{point.point.name}</span><br/>',
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y} ($M)</b><br/>'
  },
  xAxis: {
    type: 'category',
  },
    
  yAxis: [{
    title: {
      text: 'Average funding per product ($M)'
    },
    showFirstLabel: false
  }],
  series: [{
    color: 'rgb(158, 159, 163)',
    pointPlacement: -0.2,
    linkedTo: 'main',
    data: dataPrev[2020].slice(),
    name: '2010'
  }, {
    name: '2020',
    id: 'main',
    dataSorting: {
      enabled: true,
      matchByName: true
    },
    dataLabels: [{
      enabled: true,
      inside: true,
      style: {
        fontSize: '16px'
      }
    }],
    data: getData(data[2020]).slice()
  }],
  exporting: {
    allowHTML: true
  }
});

var years = [2020, 2010, 2000];
var activeButton = document.getElementById(2020);
    activeButton.className = 'active';
years.forEach(function (year) {
  var btn = document.getElementById(year);

  btn.addEventListener('click', function () {

    document.querySelectorAll('.buttons button.active').forEach(function (active) {
      active.className = '';
    });
    btn.className = 'active';

    chart.update({
      title: {
        text: 'Average funding per product over time ($M)'
      },
      subtitle: {
        text: 'Comparing to results from ' + (year - 10)
      },
      series: [{
        name: year - 10,
        data: dataPrev[year].slice()
      }, {
        name: year,
        data: getData(data[year]).slice()
      }]
    }, true, false, {
      duration: 800
    });
  });
});

 // q3
Highcharts.chart('column-drlldown-q3', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Number of innovations by device used'
  },
  subtitle: {
    text: 'Click on cloumn to see distribution per use case'
  },
  accessibility: {
    announceNewData: {
      enabled: true
    }
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: '# of innovations'
    }

  },
colors: [
    '#6fa8dc',
],
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        format: '{point.y}'
      }
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:13px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color};font-size:13px;">{point.name}</span>: <b style="font-size:13px;font-weight:500;">{point.y}</b><br/>'
  },
//#6fa8dc -blue 
  series: [
    {
      name: "Innovations",
      colorByPoint: true,
      data: [
        {
          name: "TV",
          y: 6,
          drilldown: "TV"
        },
        {
          name: "Radio",
          y: 4,
          drilldown: "Radio"
        },
        {
          name: "Feature Phone",
          y: 27,
          drilldown: "Feature Phone"
        },
        {
          name: "Internet-enabled device",
          y: 319,
          drilldown: "Internet-enabled device"
        },
      ]
    }
  ],
  drilldown: {
    series: [
      {
        name: "TV",
        id: "TV",
        data: [
          [
            "Assessments",
            0
          ],
          [
            "Doubt Resolution",
            0
          ],
          [
            "Homework",
            0
          ],
            [
            "Lesson Delivery",
            2
          ],
            [
            "Lesson Preparation",
            0
          ],
            [
            "Parent Participation",
            0
          ],
            [
            "Parent-Teacher Communication",
            1
          ],
            [
            "Self Learning",
            2
          ],
            [
            "Teacher Professional Development",
            1
          ],
        ]
      },
      {
        name: "Radio",
        id: "Radio",
        data: [
          [
            "Assessments",
            0
          ],
          [
            "Doubt Resolution",
            0
          ],
          [
            "Homework",
            0
          ],
            [
            "Lesson Delivery",
            2
          ],
            [
            "Lesson Preparation",
            0
          ],
            [
            "Parent Participation",
            1
          ],
            [
            "Parent-Teacher Communication",
            0
          ],
            [
            "Self Learning",
            1
          ],
            [
            "Teacher Professional Development",
            0
          ],
        ]
      },
      {
        name: "Feature Phone",
        id: "Feature Phone",
        data: [
          [
            "Assessments",
            0
          ],
          [
            "Doubt Resolution",
            1
          ],
          [
            "Homework",
            0
          ],
            [
            "Lesson Delivery",
            5
          ],
            [
            "Lesson Preparation",
            0
          ],
            [
            "Parent Participation",
            4
          ],
            [
            "Parent-Teacher Communication",
            1
          ],
            [
            "Self Learning",
            4
          ],
            [
            "Teacher Professional Development",
            0
          ],
        ]
      },
      {
        name: "Internet-enabled device",
        id: "Internet-enabled device",
        data: [
          [
            "Assessments",
            20
          ],
          [
            "Doubt Resolution",
            33
          ],
          [
            "Homework",
            10
          ],
            [
            "Lesson Delivery",
            62
          ],
            [
            "Lesson Preparation",
            41
          ],
            [
            "Parent Participation",
            13
          ],
            [
            "Parent-Teacher Communication",
            18
          ],
            [
            "Self Learning",
            100
          ],
            [
            "Teacher Professional Development",
            23
          ],
        ]
      },
      
    
    ]
  }
});
//q4
Highcharts.chart('radial', {
  colors: ['#FFD700', '#C0C0C0', '#CD7F32','#6fa8dc'],
  chart: {
    type: 'column',
    inverted: true,
    polar: true
  },
  title: {
    text: 'Number of studies available across interactions'
  },
  tooltip: {
    outside: true
  },
  pane: {
    size: '85%',
    innerSize: '20%',
    endAngle: 270
  },
  xAxis: {
    tickInterval: 1,
    labels: {
      align: 'right',
      useHTML: true,
      allowOverlap: true,
      step: 1,
      y: 3,
      style: {
        fontSize: '12px'
      }
    },
    lineWidth: 0,
    categories: [
        "Self Learning",
        "Doubt Resolution",
        "Lesson Delivery",
        "Lesson Preparation",
        "Teacher Professional Development",
        "Parent-Teacher Communication",
        "Assessments",
        "Parent Participation",        
        "Homework"
    ]
  },
  yAxis: {
    crosshair: {
      enabled: true,
      color: '#333'
    },
    lineWidth: 0,
    tickInterval: 25,
    reversedStacks: false,
    endOnTick: true,
    showLastLabel: true
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      borderWidth: 0,
      pointPadding: 0,
      groupPadding: 0.15
    }
  },
  series: [{
    name: 'Rigorous external evidence/RCT',
    data: [12,0,10,5,1,2,1,2,0]
  }, {
    name: 'External evaluation',
    data: [4,0,7,1,2,0,1,0,0]
  }, {
    name: 'Internal evaluation',
    data: [15,0,16,7,3,1,5,3,4]
  },
  {
    name: 'No evidence',
    data: [71,32,31,28,17,15,13,11,6]
  }]
});