Search code examples
javascriptchartszingchart

ZingChart Zoom Date issue

When I do a zoom on a date in the x-axis the chart gets stuck.

This happens only when I work with longs. With dates it works fine. I'm new in zing charts and I'm not sure what i am doing wrong

  zingchart.exec('myChart', 'zoomtovalues', {
       'xmin':1425312000000,
       'xmax':1425657600000,
 });

and my values are

  "values": [
    [1425225600000,1],
    [1425312000000,1],
    [1425398400000,1],
    [1425484800000,1],
    [1425571200000,1],
    [1425657600000,1],
    [1425744000000,1],
    [1425826800000,1],
    [1425913200000,1],
    [1425999600000,1]
    ],

UPDATE

The reason the chart was getting stuck was the step, It works without scrollX

scaleX:{
label:{},
minValue:1425196800000,
step:"day",
  transform: {
    type: 'date',
  all:"%m/%d/%y"
  }
},
Solution

  • You have not given much information related to your chart or chart configuration. Based on what you are saying I'm taking a wild guess at what you are asking. If I'm wrong feel feel to follow up.

    What you are missing is the scrollX attribute. This enables the scrollbar. Another option is to enable the preview window. Both of these options work in cohesion with zooming.

    Information related to scrollX, preview and zooming in general. https://www.zingchart.com/docs/tutorials/interactive-features/chart-zoom-pan-scroll/

    https://www.zingchart.com/docs/api/json-configuration/graphset/scroll-x-scroll-y/

    https://www.zingchart.com/docs/api/json-configuration/graphset/preview/

    var myConfig = {
 	type: 'line', 
    title: {
      text: 'After 2 seconds call API method \`zoomtovalues\`'
    },
 	scaleX:{
 	  transform: {
 	    type: 'date',
 	  }
 	},
 	scrollX:{},
	series: [
		{
			values: [
        [1425225600000,1],
        [1425312000000,1],
        [1425398400000,1],
        [1425484800000,1],
        [1425571200000,1],
        [1425657600000,1],
        [1425744000000,1],
        [1425826800000,1],
        [1425913200000,1],
        [1425999600000,1]
      ],
		}
	]
};

setTimeout(function() {
 zingchart.exec('myChart', 'zoomtovalues', {
   'xmin':1425312000000,
   'xmax':1425657600000,
 });
}, 2000);

zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});
    html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}
    <!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>