Highcharts Demo

author(s): Torstein Hønsi

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/6.1.1/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 500px; max-width: 900px; margin: 0 auto;"></div>

JavaScript

GenerateChart();

function GenerateChart() {

    (input => {
        var max = 100, min = 0;
        var caldata=parseInt(((input.chartData.trialGrowth.Series[0].catValue+input.chartData.trialGrowth.Series[1].catValue)*1.1));

max=Math.round((parseInt(caldata/10, 10)+1)*10);

        if (max > 100) {
            max = 100;
        }
        var chartHeader = "<div id='Header' style='width: 700px;'><div style='font-size:18px; font-family:Verdana; font-weight:bold'>" + input.title + "</div><div style='font-size:16px; font-family:'Verdana'; font-weight:'normal''>" + input.subTitle + "</div></div>";

        var trialGSHeader = "<div id='Header' style='width: 160px; margin-top: 20px;'><div id='tgsHeader' style='font-size:12px; font-family:Arial; font-weight:bold;width: 160px;'>" + input.chartTitle + "</div></div>";

        var trialGrowthSummary = "<div style='width: 200px; height: 300px;display:inline-block;float:left;'> <div id='tgsHeader' style='font-size:12px; font-family:Arial; font-weight:bold;width: 160px;'>Trial & growth summary - Brand - Category Buyers</div> <div id='trialGrowthSummaryChart'></div><div><canvas id='incrementalTrial'  style='margin-left:45px;border: 0px;'></canvas></div></div>";

        var strengthWeaknessDiv = "<div style='width: 300px; height: 600px; border:none;border-color:red;margin-bottom:10px;margin-left:205px'><canvas id='strengthCanvas' width='260px' height='250px'  style='border: none;'></canvas><canvas id='weaknessCanvas' width='260px' height='200px'  style='border:none;'></canvas></div>";

        var summarydiv = "<div style='width: 300px; height: 450px; border:none;border-color:red;margin-bottom:10px;margin-left:500px;margin-top:-610px;'><canvas id='summaryCanvas' width='260px' height='500px'  style='border: none;'></canvas></div>";


        var footerImage = "<div id='Footer' style='width: 720px;height: 38px; background-color: rgb(245,245,245);border-bottom: 1px solid black;padding-Top:10px;'><div><img...