Home › Forums › Chart Support › Combining CanvasJS function : zoom panning and jquery tab

Combining CanvasJS function : zoom panning and jquery tab

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

Tagged: ,

  • November 14, 2016 at 8:09 pm #13328

    lsq_1994

    I want to combine both the zoom function and tab function. However I realize that every time the graph is rendered, the div chartContainer1 is focused hence making the zoom to disappear. I am wondering is there any different way to work around the example given. I just started using canvasJS still not very familiar with it.

    As for the code, copy paste it into canvasjs editor instead of jsfiddle. Somehow I can’t get jsfiddle to work properly. Thank you very much. I hope my explanation is good enough to be understood.

    <!DOCTYPE HTML>
<html>

<head>
<link href="/assets/css/jquery-ui.1.11.2.min.css" rel="stylesheet" />
<script type="text/javascript" src="/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/assets/script/jquery-ui.1.11.2.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
<script type="text/javascript">
$(function () {
	
	//Better to construct options first and then pass it as a parameter
	var options1 = {
      zoomEnabled: true,
		title: {
			text: "Spline Chart using jQuery Plugin"
		},
                animationEnabled: true,
		data: [
		{
		type: "spline", //change it to line, area, bar, pie, etc
			dataPoints: [
				{ y: 10 },
				{ y: 6 },
				{ y: 14 },
				{ y: 12 },
				{ y: 19 },
				{ y: 14 },
				{ y: 26 },
				{ y: 10 },
				{ y: 22 }
			]
		}
		],
      axisX: {
        labelFontSize: 14
      },
         axisY: {
        labelFontSize: 14
      }
	};

	var options2 = {
		title: {
			text: "Spline Area Chart using jQuery Plugin"
		},
		data: [
		{
			type: "splineArea", //change it to line, area, bar, pie, etc
			dataPoints: [
				{ y: 10 },
				{ y: 6 },
				{ y: 14 },
				{ y: 12 },
				{ y: 19 },
				{ y: 14 },
				{ y: 26 },
				{ y: 10 },
				{ y: 22 }
			]
		}
		],
      axisX: {
        labelFontSize: 14
      },
       axisY: {
        labelFontSize: 14
      }
	};

	$("#tabs").tabs({
		create: function (event, ui) {
			//Render Charts after tabs have been created.
			$("#chartContainer1").CanvasJSChart(options1);
			$("#chartContainer2").CanvasJSChart(options2);
		},
		activate: function (event, ui) {
			//Updates the chart to its container's size if it has changed.
			ui.newPanel.children().first().CanvasJSChart().render();
		}
	});
	
  function updateChart(){
   $("#chartContainer1").CanvasJSChart(options1).render;
  }
  
  setInterval(function(){updateChart()}, 15000);
});
</script>
</head>
<body>
<div id="tabs" style="height: 290px">
	<ul>
		<li ><a href="#tabs-1" style="font-size: 12px">Spline</a></li>
		<li ><a href="#tabs-2"  style="font-size: 12px">Spline Area</a></li>
	</ul>
	<div id="tabs-1" style="height: 225px">
		<div id="chartContainer1" style="height: 240px; width: 100%;"></div>
	</div>
	<div id="tabs-2" style="height: 225px">
		<div id="chartContainer2" style="height: 240px; width: 100%;"></div>
	</div>
</div>
</body>

</html>
    November 15, 2016 at 10:37 am #13329

    Vishwas R

    @lsq_1994,

    You are re-rendering chart every 15000ms (15seconds), so zoomed level disappears every 15seconds.

    function updateChart(){
   $("#chartContainer1").CanvasJSChart(options1).render;
  }
  
  setInterval(function(){updateChart()}, 15000);

    Removing these lines will work fine with zooming functionality within different tabs. Please check this jsfiddle.

    November 15, 2016 at 11:50 am #13330

    lsq_1994

    Yes,the reason why i put set interval is because I am actually using the graph for real time data.So is it possible that graph is able to render while not losing the focus of the zoom? Because in this example the zoom does not disappear and the chart still keep renders. However putting in the tab div make things seems abit different.

    November 16, 2016 at 12:15 pm #13389

    Bivek Singh

    lsq_1994,

    Please take a look at this jsfiddle.

    November 22, 2016 at 12:50 am #13486

    lsq_1994

    wow this is something new to me. It works like charm. Thx much =)

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

Tagged: ,

You must be logged in to reply to this topic.