ZingChart Zoom Date issue

Question

ZingChart Zoom Date issue

296 views Asked by Spiff At 16 October 2024 at 05:06

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"
  }
},

Original Q&A

There are 1 answers

**nardecky** · Accepted Answer · 2017-01-03 16:54:39

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>

TechQA.

ZingChart Zoom Date issue

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in CHARTS

Related Questions in ZINGCHART

Popular Questions

Popular Tags

Trending Questions