Highcharts Demo

author(s): Torstein Hønsi

by Kesav Telaprolu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div >
  <div id="container"  style="width:1240px;height:688px; overflow:auto;"></div>
</div>

JavaScript

( input =>{
var chartWidth = ((input.dataSeries.length * 150)) < 900 ? 900 : ((input.dataSeries.length * 150));
var linewidth = ((input.dataSeries.length * 130));
var htmlstring ='<div style="height:600px;"><span id="title" style="margin-left:15px;width:1180px;height:42px;color:#000000;font-size:32px;font-family:KantarBrownWeb-Light;"></span>'+
            '<br><div id="subtitle" style="margin-top:10px;margin-left:15px;width:1180px;height:12px;color:#e5007e;font-size:24px;font-family:KantarBrownWeb-Bold;padding-top:3px;"></div><br>'+
            '<div style="width:1200px;margin-top:10px;margin-left:15px"><span id="charttitle" style="width:1200px;height:34px;color:#000000;font-size:17px;font-weight:700;font-family:"KantarBrownWeb-Bold";"></span></div>'+
            '<div id="chartContainer" style=width:'+linewidth+'px;height:515px;z-index:-4></div></div>'+
            '<div id="Footer"style="z-index:5;margin-left:10px; width:'+chartWidth+'px; height:40px; background-color: rgb(246,246,246);'+
            'border-bottom: 1px solid black;"><div style="display:inline; margin-left:10px"><span>Households: </span><span>'+input.households+'m</span></div>'+
            '<div style="display:inline; margin-left:10px"><span>Market size (m packs): </span><span>'+input.marketSize+'</span></div>'+
            '<div style="display:inline; margin-left:10px"><span>Category pen.: </span><span>'+input.categoryPenetration+'%</span></div>'+
            '<div style="display:inline; margin-left:10px"></div><div style="margin-left:10px;font-size:8px; font-family: Arial">Volume forecast for ballpark guidance only - not to support financial planning / investment disclosure.</div>'+
            '<div style="margin-left:10px;font-size:8px; font-family: Arial">It is based on concept evaluation using early stage stimulus, a simplified marking plan '+
            '& estimated repeat components.</div></div>';

$("#container").append(htmlstring);
$('#title').html(input.title);
     ...