Home forums Using CanvasJS Combining CanvasJS function : zoom panning and jquery tab

Tagged: ,

This topic contains 4 replies, has 3 voices, and was last updated by  lsq_1994 2 weeks, 5 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #13328

    lsq_1994
    Member

    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="/assets/script/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>
    #13329

    Vishwas R
    Keymaster

    @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.

    #13330

    lsq_1994
    Member

    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.

    #13389

    Bivek Singh
    Moderator

    lsq_1994,

    Please take a look at this jsfiddle.

    #13486

    lsq_1994
    Member

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

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

You must be logged in to reply to this topic.