FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Clone Chart to Popup Modal on button click

Clone Chart to Popup Modal on button click

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

Tagged: ,

  • April 2, 2017 at 5:24 pm #14724

    DaveB222

    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://cdn.canvasjs.com/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("");
}
    April 4, 2017 at 1:36 pm #14737

    Suyash Singh

    @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 take a look at the code snippet for creating multiple chart with same chart options.

    var chartOptions = {
  title: {
    text: "Chart 1"
  },
  data: [{
    type: "spline",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
};

var chart1 = new CanvasJS.Chart("chartContainer1", chartOptions);
var chart2 = new CanvasJS.Chart("chartContainer2", chartOptions);

    Also, check this JSFiddle for complete working code.

    Clone chart in modal

    ___
    Suyash Singh
    Team CanvasJS

    April 4, 2017 at 5:08 pm #14746

    DaveB222

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

    Cheers,
    Dave

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

Tagged: ,

You must be logged in to reply to this topic.