Highcharts Demo

author(s): Torstein Hønsi

by Kesav Telaprolu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

(input=>{

    var dataSeries = [];

    for (var val = 0; val < input.brands[0].waves.length; val++) {
        var marketShare = []
          , powerInMind = []
          , marketShareSig = []
          , powerInMindSig = []
          , obj = {};
        for (var val1 = 0; val1 < input.brands.length; val1++) {

            marketShare.push(input.brands[val1].waves[val].marketShare);
            powerInMind.push(input.brands[val1].waves[val].powerInMind);
            marketShareSig.push(input.brands[val1].waves[val].marketShareSig);
            powerInMindSig.push(input.brands[val1].waves[val].powerInMindSig);

        }
        obj["wave"] = input.brands[0].waves[val].name;
        obj["waveBaseSize"] = input.brands[0].waves[val].baseSize;
        obj["marketShare"] = marketShare;
        obj["powerInMind"] = powerInMind;
        if (val > 0) {
            obj["marketShareSig"] = marketShareSig;
            obj["powerInMindSig"] = powerInMindSig;
        }
        dataSeries.push(obj);

    }

    var chartWrapper = $("<div></div>").appendTo("#container").attr("id", "chart_wrapper");
    var chartDiv = $("<div></div>").appendTo("#chart_wrapper").attr("id", "chart_div");
    $('#chart_wrapper').append(`<style>

#chart_wrapper{
 
 width:1240px;
height:688px;

position:relative;



padding: 35px 30px 20px 30px;

box-sizing:border-box; 

}
#chart_div{
 	
     width:100%;
   height:100%;
  
}
#chart_wrapper p {
 	margin : 0px;
 }
 #chart_wrapper hr {
 	margin : 0px;
  border-style: solid;
 }
 
 #chart_wrapper div {
 	margin : 0px;
  box-sizing:border-box;
 }
 input[type=checkbox]:checked:after {
  content: ' ';
  display: block;
  width: 11px;
  height: 4px;
  position: relative;
  top: 3px;
  left: 1px;
  border: 2px solid #14b5ea;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 1;
  transform: rotate(-45deg);
}

</style>`);

    var height = (Math.round((input.brands.length) + 1) * 85);
    if (input.brands.length <= 5) {
       ...