Home forums Using CanvasJS Clone Chart to Popup Modal on button click

Tagged: ,

This topic contains 2 replies, has 2 voices, and was last updated by  DaveB222 6 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #14724

    DaveB222
    Member

    I am trying to build a dashboard to display many graphs using CanvasJS. Each graph will have a button to expand that particular graph to a popup modal. I am doing this by finding the ancestor div of the button and then cloning the relevant child to the modal using jQuery.

    The problem is that the chart does not render. As I am currently using the un-paid version of CanvasJS, the watermark at the bottom is present. This watermark is visible on the pop-up modal but the graph is not.

    I read in one post on stackoverflow that cloning CanvasJS is not possible (here) , can anybody confirm this? If not, can anybody tell where I am going wrong or give me suggestions on how to achieve what I want?

    I have tried to create a JSFiddle however, I can not get the modal to work (here) so instead, minimum working example below.

    p.s. I am also a complete newb to HTML/CSS/JS. This is my first time working with these techs and yes, this post is duplicated on stackoverflow by me.

    HTML:

    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title>SG Dashboard Draft</title>
    		<meta charset="utf-8" />
    		<meta name="SG-Dashboard" content="width=device-width, initial-scale=1" />
    		<link rel="stylesheet" href="assets/css/main.css" />
        <link rel="stylesheet" href="assets/css/font-awesome.min.css">
        <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
        <script src="assets/js/jquery-3.2.0.min.js"></script>
    	</head>
    	<body>
    
        <article>
          <!-- Modal to expand graphs into -->
          <div id="graphModal" class="graph-modal">
            <button type="button" class="modal-cls-btn" onclick="closeGraphModal()">
                <i class="fa fa-compress fa-1x"></i>
            </button>
            <div id="graphModalBox" class="graph-modal-box"></div>
          </div>
    
          <!-- Graph 1 -->
          <div class="graph-box">
            <!-- Graph 1 header-->
              <div class="graph-box-header-button-container">
                <button type="button" id="graph-box-exp-btn" class="graph-btn" onclick="expandGraphModal(this)">
                  button
                </button>
              </div>
            <!-- Graph 1 Chart-->
            <div class="canvasjs-container">
              <div id="Graph1" class="canvasjs-chart"></div>
            </div>
          </div>
    
        </article>
    
        <script src="assets/js/main.js"></script>
    
      </body>
    </html>
    

    CSS:

    
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
      display: block;
    }
    
    html, body{
      min-height: 100%;
    }
    
    body {
      line-height: 1;
      background-color: #fafafa;
      background-image: url("images/bg.png");
      font-size: 13pt;
    }
    
    article {
      height: 100%;
      min-width: 100%;
    }
    
    /* The modal background */
    .graph-modal {
       display: none;
       position: fixed;
       z-index: 1;
       left: 0;
       top: 0;
       min-width: 100%;
       max-height: 100%;
       height: 100%; /* Required for graph-modal-box height */
       background-color: rgba(0,0,0,0.4);
    }
    
    .graph-modal-box {
      display: block;
      position: relative;
    	margin: 5% auto;
      background: #fff;
      box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
      /*min-height: 700px;
      max-height: 700px;*/
      min-height: 80%;
      max-height: 80%;
      min-width: 80%;
      max-width: 80%;
    }
    
    .modal-cls-btn {
      background-color: #414042;
      color: #fff;
      border: 0;
      float: right;
      margin: 10px;
    }
    
    .graph-box {
      /*position: relative;*/
      background: #fff;
      box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
      margin: 0.3em;
      vertical-align: top;
      min-height: 200px;
      max-height: 220px;
      min-width: 20%;
    }
    
    .graph-box-header-button-container {
      max-width: 25%;
      min-height: 20%;
    }
    
    .graph-btn {
      background-color: #414042;
      color: #fff;
      border: 0;
      cursor: pointer;
    }
    
    .canvasjs-container{
      width: 100%;
      height: 80%;
    }
    
    .canvasjs-chart{
      width: 100%;
      height: 100%;
    }
    

    JS:

    
    // ------------Dvalues graph----------------------//
    var chart1 = new CanvasJS.Chart("Graph1", {
       data: [
       {
         type: "area",
         dataPoints: [
           {x: 1, y: 1},
           {x: 2, y: 2}]
       }],
    });
    
    charts=[chart1];
    
    window.onload = function () {
      for (var i = 0; i < charts.length; i++) {
        var chart = charts[i];
        // chart.options.title.text += ": Updated";
        chart.render();
      }
    }
    
    // ------------Graph Modal----------------------//
    // Get the modal
    var graphModal = document.getElementById('graphModal');
    
    function expandGraphModal(elem) {
      // get ancestor div
      var btnAnsestor = elem.closest(".graph-box");
      // Clone header and chart
      var modalGraph = btnAnsestor.getElementsByClassName("canvasjs-container")[0];
    
      // clone ancestor div and place in modal
      $("#graphModalBox").append($(modalGraph).clone(true));
    
      // // Render the graph
      chart1.render();
      graphModal.style.display = "block";
    }
    
    function closeGraphModal(){
      graphModal.style.display = "none";
      $("#graphModalBox").html("");
    }
    
    #14737

    Suyash Singh
    Moderator

    @daveb222,

    It is not possible to clone the entire chart with events using clone method. Please refer this stackoverflow thread for more info. However you can try to render another chart on the modal with same chart options. Please check this jsfiddle.

    ___
    Suyash Singh
    Team CanvasJS

    #14746

    DaveB222
    Member

    Thank you Suyash, thats most helpful. I will follow this route.

    Cheers,
    Dave

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.