CODEWITHSUNDEEP
angularjschartszingchart
piyush singh
piyush singh

Reputation: 435

ZingChart bar chart is not generating correctly

html file

<zingchart id="timesheet-bar-chart" zc-json="myObj"></zingchart>

in controller.js

$scope.myObj = {
  "type": "bar",
  "utc": true,
  "plotarea":{
      "margin":'dynamic'
    },
  "plot":{
    "stacked":true,
    "stack-type":"normal" /* Optional specification */
  },
 "scaleX":{
      "transform":{
        "type":"date",
        "all":"%d %M",
        "item": {
          "visible":false
        }
      },
    },
  "series":[{ 
      "values": $scope.barValues,
      "backgroundColor":"#f15662"
    }]
  };
zingchart.render({ 
id : 'timesheet-bar-chart', 
height: 400, 
width: "100%"
});

In $scope.barValues data is dynamically added in below format

[[[1478025000000,10],[1477938600000,20],[1478889000000,30]]]

I'm not getting where I made any mistakes. The generated bar is not in format. please help me I'm using the ZingChart library for the first time. enter image description here

Upvotes: 4

Views: 812

Answers (1)

nardecky
nardecky

Reputation: 2631

Your bar chart is generating just fine. The bars look off from the labels because you are plotting an [[]] (array of arrays). If you look up the timestamps plotted the bars are indeed not plotted exactly at November 4th. If you are referring to the labels themselves you determine what the label is displayed by the all attribute. You can either set the step attribute to be more linear or use zooming.

scale docs

token docs

The bar offset is a product of non-linear data. The bar size is now squeezed smaller because of the non-linear data as well. This is due to size over time. You can see by adding zooming (click and drag to zoom) the bars will increase size.

zooming docs

var myConfig = {
  "type": "bar",
  "utc": true,
  "plotarea":{
      "margin":'dynamic'
    },
  "plot":{
    "stacked":true,
    "stack-type":"normal" /* Optional specification */
  },
 "scaleX":{
   "zooming":true,
      "transform":{
        "type":"date",
        "all":"%d %M %Y<br> %h:%i:%s",
      },
    },
  "series":[{ 
      "values": [[1478025000000,10],[1477938600000,20],[1478889000000,30]],
      "backgroundColor":"#f15662"
    }]
  };

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;
}
<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"></div>
	</body>
</html>

You can avoid this by setting a fixed size with the bar-width attribute.

plot docs

var myConfig = {
  "type": "bar",
  "utc": true,
  "plotarea":{
      "margin":'dynamic'
    },
  "plot":{
    "bar-width": 30,
    "stacked":true,
    "stack-type":"normal" /* Optional specification */
  },
 "scaleX":{
   "zooming":true,
      "transform":{
        "type":"date",
         "all":"%d %M %Y<br> %h:%i:%s",
      },
    },
  "series":[{ 
      "values": [[1478025000000,10],[1477938600000,20],[1478889000000,30]],
      "backgroundColor":"#f15662"
    }]
  };

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;
}
<!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"></div>
	</body>
</html>

Upvotes: 6

Related Questions