Chart inside draggable element - CanvasJS

Chart inside draggable element - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/jquery-ui.1.11.2.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="draggableContainer" style="height: 360px;border:1px solid gray;">
  <div id="chartContainer" class="ui-widget-content" style="width: 100%; height: 100%"></div>
</div>

JavaScript

var options1 = {
  animationEnabled: true,
  title: {
    text: "Draggable Chart inside a jQuery Resizable Element"
  },
  subtitles: [{
  	text: "Click anywhere on the chart to drag it"
  }],
  data: [{
    type: "column", //change it to line, area, bar, pie, etc
    legendText: "Try Resizing with the handle to the bottom right",
    showInLegend: true,
    dataPoints: [
      { y: 10 },
      { y: 6 },
      { y: 14 },
      { y: 12 },
      { y: 19 },
      { y: 14 },
      { y: 26 },
      { y: 10 },
      { y: 22 }
    ]
  }]
};

$("#draggableContainer").resizable({
  create: function (event, ui) {
    //Create chart.
    $("#chartContainer").CanvasJSChart(options1);
  },
  resize: function (event, ui) {
    //Update chart size according to its container size.
    $("#chartContainer").CanvasJSChart().render();
  }
});
$(function() {
  $( "#draggableContainer" ).draggable();
});