CODEWITHSUNDEEP
javascriptjqueryjquery-uichartsvis.js-timeline
Mahendra Kumar Paswan
Mahendra Kumar Paswan

Reputation: 1

Why is manual adjustment of height (resizable) of Visjs timeline chart is not working?

When I am running the below code and resizing the height of the timeline chart then the visualization div is resizing but not the height of the timeline chart. In image1 the chart is showing with resizable. The second Image I am trying to resize but the timeline chart is not resizing. Can you please help me to resolve the problem?

enter image description here enter image description here

Code

<!doctype html>
    
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Resizable </title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js">
</script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />
</head>

<body>
  <div id="visualization"></div>
  <script type="text/javascript">
    // DOM element where the Timeline will be attached
    const container = document.getElementById("visualization");

    // Create a DataSet (allows two way data-binding)
    const items = new vis.DataSet([
      { 'id': 1, 'content': "item 1", 'start': "2014-04-20" },
      { 'id': 2, 'content': "item 2", 'start': "2014-04-14" },
      { 'id': 3, 'content': "item 3", 'start': "2014-04-18" },
      { 'id': 4, 'content': "item 4", 'start': "2014-04-16", 'end': "2014-04-19" },
      { 'id': 5, 'content': "item 5", 'start': "2014-04-25" },
      { 'id': 6, 'content': "item 6", 'start': "2014-04-27", 'type': "point" }
    ]);

    // Configuration for the Timeline
    const options = {};

    // Create a Timeline
    const timeline = new vis.Timeline(container, items, options);
    $("#visualization").resizable();
  </script>
</body>

</html>

Upvotes: 0

Views: 1364

Answers (1)

Raj Param Yadav
Raj Param Yadav

Reputation: 11

As per you diagram visualization div is resizing but the time line chart is not resizing. Use setOptions method of timeline chart in resize method of jquery/add below small code in your file-

$("#visualization").resize(function(){
 var ht= $(this).height();
 timeline.setOptions({height:ht});
});


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js">
  </script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />
</head>
<body>
  <div id="visualization"></div>
  <script type="text/javascript">
  $(function () {
    const container = document.getElementById("visualization");
    const items = new vis.DataSet([
      { 'id': 1, 'content': "item 1", 'start': "2014-04-20" },
      { 'id': 2, 'content': "item 2", 'start': "2014-04-14" },
      { 'id': 3, 'content': "item 3", 'start': "2014-04-18" },
      { 'id': 4, 'content': "item 4", 'start': "2014-04-16", 'end': "2014-04-19" },
      { 'id': 5, 'content': "item 5", 'start': "2014-04-25" },
      { 'id': 6, 'content': "item 6", 'start': "2014-04-27", 'type': "point" }
    ]);

    const options = {};
    const timeline = new vis.Timeline(container, items, options);

    $("#visualization").resizable();

    $("#visualization").resize(function () {
      var ht = $(this).height();
      timeline.setOptions({ height: ht });
    });

  });
  </script>
</body>

</html>

Upvotes: 1

Related Questions