Affective Memory Potential Series

Ashish Prasad

by Kesav Telaprolu

HTML

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

<div id="container" style="width: 1240px;height: 688px;border-radius: 10px;border: 1px solid #dbdbdb; overflow-y:auto"></div>

CSS

@font-face {
    font-family: "KantarBrownWeb-LightItalic";
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot");
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot?#iefix") format("embedded-opentype"),
         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff2") format("woff2"),
         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "KantarBrownWeb-BoldItalic";
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot");
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot?#iefix") format("embedded-opentype"),
         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff2") format("woff2"),
         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "KantarBrownWeb-Italic";
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot");
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot?#iefix") format("embedded-opentype"),
         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "KantarBrownWeb-Thin";
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Thin.eot");
    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Thin.eot?#iefix") format("embedded-opentype"),
        ...

JavaScript

(input => {
DrawConversionModelChart();
function GenerateChart(){

 var colsWidth = 150;
 var lefttitleWidth = 260; 
 var dynamicWidth = lefttitleWidth+colsWidth;
 $("#container").html(null);
 $("#container").append("<div style='width: 1180px;height: 42px;margin-left:30px;margin-top:35px;color: #000000;font-size: 32px;font-family:KantarBrownWeb-Light;'>"+input.title+"</div><div style='width: 1180px;height: 42px;margin-left:30px;color: #e5007e;font-size: 24px;font-family:KantarBrownWeb-Bold;'>"+input.chosenBrandName+"</div>");
 
 $("#container").append("<div class='content'></div");
 
 $(".content").append("<div class='cols' style='display:inline-block'><canvas id=Series width='240' height='510' style=' margin-left:10px;margin-right:10px;border: 0px'></canvas></div>");
 
 for(var i=0; i< input.dataSeries.length;i++){
 // Adding multiple container series. 
  $(".content").append("<div class='cols' style='display:inline-block'><canvas id=Series"+ i +" width='150' height='510' style='border: 0px'></canvas></div>")   
  dynamicWidth += colsWidth;
}
$(".content").width(dynamicWidth - 150);
// Adding footer to the container.
var chartFooter = "<style type='text/css'>.roundedTwo label {  width: 16px;  height: 16px;  margin-top: 8px;  position: relative to; float:left  cursor: pointer;  background-image: linear-gradient(180deg, #fff 0%, #eaeaea 100%); border-radius: 50px;  box-shadow: inset 0px 0.5px 0.5px rgba(0, 0, 0, 0.4), 1px 1px 1px rgba(255, 255, 255, 1);}.roundedTwo label:after {  content: '';  width: 11px;  height: 4px;  position: absolute;  top: 2px;  left: 3px;  border: 2.4px solid #14b5ea;  border-top: none;  border-right: none;  background: transparent;  opacity: 0;  transform: rotate(-50deg);}.roundedTwo input[type=checkbox] {  visibility: hidden;}.roundedTwo input[type=checkbox]:checked + label:after {  opacity: 1;}</style><div id='Footer' style='width: 1180px;height: 32px;margin-left:30px;margin-bottom:20px;border-radius: 6px;border: 1px solid...