Geek Answers Handbook

How to visualize two y axes in zingcharts-angularjs?

Im trying to create a mixed chart with a double y axis using the zingcharts-angularjs directive.

For the double Y axis, you follow the scale-y-2 pattern, but it did not work in my AngularJS application. Does anyone know how to render two y axes in zingcharts-angularjs?

+6
source share
1 answer

Adding multiple scale-y values ​​to ZingChart in the Angular directive is the same as with vanilla JavaScript.

First you want to include the "scale-y-2": {} object in your chart. The min: max: step values ​​should inherit from your series values, but this can be explicitly set if necessary.

Then you need to map each set of series values ​​to the corresponding scale-y. To do this, add the attribute "scale": "". This will take a string with two values ​​separated by commas. You will want to declare which scale-x and what scale-y you want to associate with the series.

Currently, ZingChart does not accept camel scale values ​​for scaleY2. This should be represented in JSON as "scale-y-2".

The code below should provide you with what you need. I have provided comments about lines that are probably missing from your chart.

If you want to see a live working example, you can run the code below.

var app = angular.module('myApp',['zingchart-angularjs']); app.controller('MainController', function($scope){ $scope.myJson = { globals : { shadow: false }, type : 'bar', plot:{ }, backgroundColor : "#fff", scaleY :{ lineColor : "#BDBFC1", lineWidth: "2px", tick:{ lineWidth: "0px" } }, "scale-y-2" : { //add scale-y-2 }, scaleX :{ lineColor : "#BDBFC1", lineWidth: "2px", tick:{ lineWidth: "0px" } }, series : [ { values : [54,23,34,23,43], scales: "scale-x, scale-y", //associate scales to series lineColor : "#D2262E", lineWidth : "2px", marker : { backgroundColor: "#D2262E", borderWidth : "0px" } }, { values : [1000,1500,1600,2000,4000], lineColor : "#2FA2CB", scales: "scale-x, scale-y-2", //associate scales to series lineWidth : "2px", marker : { backgroundColor: "#2FA2CB", borderWidth : "0px" } }, ] }; }); 
 html,body{ margin: 0px; } 
 <script src="http://cdn.zingchart.com/zingchart.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="http://cdn.zingchart.com/angular/zingchart-angularjs.js"></script> <body ng-app="myApp"> <div ng-controller="MainController"> <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="568px"></div> </div> </body>

Note. I am on the ZingChart team. Please let me know if you have further questions.

+7
source

More articles:


All Articles