0

I have a data of voltages from last one month. The zingchart grapht y-axis is inconsistent. What might be the issue? Chart image

Akbar yar
  • 1
  • Welcome to Stack Overflow! In order that we may better answer your question, please include a [minimal, complete, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). This means including the code you're using to generate this chart, as well as any other _relevant_ data. Understand that the answerers on this site are *volunteers*; while we will be glad to answer *specific* questions you may have, this is **not** a site where code is written for you. – Das_Geek Sep 04 '19 at 13:57

1 Answers1

0

Submitting Requests

In the future we suggest adding a chart JSON to your question so we can create a demo for your solution. You can read more about gettin your chart JSON here.

Solution

You have series values input as Strings. You can do two things.

  1. make the values Numbers and NOT Strings
  2. Keep the values as Strings and add zingchart.QUOTEDVALUES = true before the zingchart.render method. This tells ZingChart you intentionally set Strings for values. There are benefits and use cases for using String values so the default is to have this turned set to false.

Demo here: https://app.zingsoft.com/demos/embed/OIJAJIA7

// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartConfig = {
    gui: {
      contextMenu: {
        button: {
          visible: false
        }
      }
    },
    globals: {
      shadow: false,
      fontFamily: 'Helvetica'
    },
    type: 'area',
    legend: {
      layout: 'x4',
      marker: {
        borderRadius: '50px',
        borderColor: 'transparent'
      },
      item: {
        fontColor: 'white'
      },
      backgroundColor: 'transparent',
      borderColor: 'transparent'
    },
    tooltip: {
      visible: false
    },
    plot: {
      aspect: 'spline',
      marker: {
        visible: false
      },
      lineWidth: '2px'
    },
    // values are strings
    series: [{
      text: 'Cell Two (V) Optimum 8V',
           backgroundColor1: '#77d9f8',
           values: ['0.286907020873', '0.300569259962', '0.300569259962', '0.286907020873','0.286957020873' ],
      backgroundColor2: '#272822',
      lineColor: '#40beeb',
      palette: 1
    }],
    backgroundColor: '#434343',
    scaleX: {
      transform: {
        type: 'date'
      },
      values: ['2019/08/05 10:27', '2019/08/05 10:42', '2019/08/05 10:55', '2019/08/05 10:58', '2019/08/05 11:01'],
      zooming: true,
      tick: {
        lineColor: 'white',
        lineWidth: '1px'
      },
      item: {
        fontColor: 'white'
      },
      guide: {
        visible: false
      },
      maxItems: 8,
      lineColor: 'white',
      lineWidth: '1px'
    },
    scaleY: {
      tick: {
        lineColor: 'white',
        lineWidth: '1px'
      },
      guide: {
        lineStyle: 'solid',
        lineColor: '#626262'
      },
      item: {
        visible: true,
        fontColor: 'white'
      },
      lineColor: 'white',
      lineWidth: '1px'
    },
    crosshairX: {
      scaleLabel: {
        backgroundColor: '#fff',
        fontColor: 'black'
      },
      plotLabel: {
        _text: 'Number of hits : %v',
        backgroundColor: '#434343',
        fontColor: '#FFF'
      }
    }
  };

  zingchart.QUOTEDVALUES = true;
  
  zingchart.render({
    id: 'myChart',
    width: '100%',
    height: '100%',
    data: chartConfig
  });
});
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.chart--container {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}
<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <!-- CHART CONTAINER -->
    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    </div>
  </body>
</html>
nardecky
  • 2,623
  • 8
  • 18