Highcharts Demo

author(s): Øystein Moseng

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div id="container" style="height: 400px; width: 900px;"></div>
<div id="Footer" style='margin-left:40px; width: 860px; background-color: rgb(245,245,245); padding-bottom: 20px;border-bottom: 1px solid black;'> 
  <img src="http://i67.tinypic.com/1zbxlvk.png" alt="cmpbrandimage" border="0" />
  <span class="legendText">Opportunity</span>
<img src="http://i68.tinypic.com/10447z4.png" alt="cmpbrandimage" border="0" />
  <span class="legendText">Steady</span>
  <img src="http://i68.tinypic.com/2q3omzp.png" alt="cmpbrandimage" border="0" />
  <span class="legendText">At risk</span>
  <input type="checkbox" id="myCheck"  onclick="DrawConversionModelChart()">
  <span>Show individual segments</span>
</div>

CSS

.legendText {
  font-size: 12px;
  font-family: Arial;
}

JavaScript

$(function() {
var CurrentShareValues = [13.0];
  var projectedValues = [11.1];  
  var DifferenceValues = [-1.9];
  var chosenBrandValues = [26.5,17.8,-8.7];
  var CmpBrandNames = ["BrandN","BrandAE","BrandAL","BrandU","BrandAF","BrandF","BrandD","BrandQ"];
  var implicitChartHeight = 250;
  var implicitChartwidth = 200;  
  var equityGap = [-7.8,	2.6,	1.5,	1.5,	1.1,	0.7,	-0.6,	-1];
  var steadyvalue = [25.8,	4.9,	4.0,	6.8,	5.2,	6.1,	3.8,	8.9] ;
  var riskValue = [10.0,	1.2,	1.3,	1.7,	1.7,	2.2,	1.8,	3.4];
  var opportunityValue = [1.7,	3.5,	2.4,	2.8,	2.4,	2.4,	0.9,11.0];
  var shareLostValue = [1.1,	0.4,	0.6,	0.5,	0.6,	1.0,	0.7,	0.7];
  var decreaseSpendValue = [8.9,	0.8,	0.8,	1.3,	1.1,	1.2,	1.2,	2.8];
  var shareGainedValue = [0.5,	1.9,	1.4,	1.4,	1.2,	0.9,	0.5,1.0];
  var increaseSpendValue = [1.3,	1.6,	1.1,	1.5,	1.2,	1.5,	0.5,	1.1];
  var steadyXPosition = implicitChartwidth/2 - steadyvalue/2;
  var steadyYPosition = implicitChartHeight/2 ;
DrawConversionModelChart();
function DrawConversionModelChart(){

 $("#container").html(null);
 var CompareEquitySignaturesChartImage =
    "<div><div style='display:inline-block'><canvas id='BrandN' width='200' height='200' style=' margin-left:40px;border: 0px'></canvas></div>" +
    "<div style='display:inline-block'><canvas id='BrandAE' width='200' height='200' style=' margin-left:20px;border: 0px'></canvas></div>"  +
    "<div style='display:inline-block'><canvas id='BrandAL' width='200' height='200' style=' margin-left:20px;border: 0px'></canvas></div>"  +
    "<div style='display:inline-block'><canvas id='BrandU' width='200' height='200' style=' margin-left:20px;border: 0px'></canvas></div></div>"  +
    "<div style ='margin-bottom:120px'><div style='display:inline-block;'><canvas id='BrandAF' width='200' height='200' style=' margin-left:40px;border: 0px'></canvas></div>" +
    "<div style='display:inline-block ;'><canvas id='BrandF' width='200' height='200' style=' margin-left:20px;border: 0px'></canvas></div>"  +
  ...