ZingChart line chart is not generated correctly
html file
<zingchart id="timesheet-bar-chart" zc-json="myObj"></zingchart>
in the .js controller
$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 the bottom format
[[[[1478025000000.10], [1477938600000.20], [1478889000000,30]]]
I do not understand where I made mistakes. The generated bar is not in format. help me, I am using the ZingChart library for the first time.
+4
1 answer
. , [[]] ( ). , 4 . , , all. step , .
. - . . , zooming ( ), .
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>, bar-width.
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>+6