Chart size as % of container not working

[stalluri]

My goal is to scale chart to the 100% of container, and on browser re-sizing chart should scale.

I've tried width:100% and height:100% through zc-render options, through zc-json directly and directly as style options on the zingchart directive. None of them worked.

Secondly, I also observed I'm unable to use defaultsurl in zc-render object and my theme is not being picked up.

[mike-schultz]

Hi there,

The 100% height / 100% width issue is a side effect of how ZingChart works, and is actually related to issue #1.

ZingChart looks at it's container's dimensions to calculate the height and width properties. If you inspect the DOM, ZingChart embeds itself into the element that is declared. In this example, "chart-1" is being referenced but has no dimensional styling on it. Simply including a height and width to the element via css will fix this issue.

Related to above, ZingChart looks at it's container element and generates styling based off of the parent element. The element has a display : inline by default but ZingChart needs it to be a block element. There are two solutions to this:

1. You can utilize the alternate directive syntax with the attribute binding <div zingchart></div>
2. Add a block style to the <zingchart> element : <zingchart style="display:block"></zingchart>

Lastly, I was having trouble getting it to work in a JSFiddle and could be an environment issue. I have a fully working demo with the two alternate syntax versions in a gist you can run locally: https://gist.github.com/mike-schultz/b2bd709a4f9a5079c4cd

As for your second issue regarding defaultsurl, I don't see any trouble on my end. I have created a demo for you to reference. Both of your 100% height/width and the defaultsurl themes issues are demonstrated in this demo : http://demos.zingchart.com/view/IICYX7RB

[stalluri]

Thanks Mike for the quick response.

worked well. However, I had to set width:100% and height:auto in zc-render object only. I couldn't pass them through zc-json object. Wondering why? We would like to dynamically pass on the width and height parameters as well through zc-json , given that zc-render happens only once.

Secondly, I still couldnt get defaultsurl to work for me. I tried the below urls with my theme but it didnt work. Even your fiddle didnt work well for me.

http://d3aeo97xi0ngf3.cloudfront.net/resources/js/zingchart/dist1/minimalist.json or http://d3aeo97xi0ngf3.cloudfront.net/resources/js/zingchart/dist1/minimalist.txt

[mike-schultz]

The zc-json object is directly linked to the 'data' object inside of the main library's zingchart.render function that renders once.

As of right now, If you wanted to resize the chart dynamically, you will need to call the main library's function directly with : http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__resize .

However, I'll look into adding a watch for the height and width attributes for the directive.

For your defaultsurl, I'm going to take a guess that it could be a configuration issue on your server. Enable CORS perhaps? I have your defaults file working here, but I uploaded the file to the same server where the demo is loaded from : http://demos.zingchart.com/view/4NZZ2RZE

[chris-rs]

I read this post about the 100% width rendering problem and I can't manage the chart to take 100% width in the containing div. I tried the zc-render function and added style attribute to the div, but it did not work unfortunately. The strange thing is that the chart takes the 100% width after I manually resize the browser window. So it looks likes something goes wrong during initial load of the chart.

The HTML:

<div id="chart" ng-app="chartClient" ng-controller="chartController">
<div zingchart id="myChart" zc-render="myRender" zc-json="myJson" style="height:100%; width:100%"></div>
</div>

The script:

chartClient.controller('chartController', function($scope, $http) {
    $scope.myRender = { 
        width: "100%",
        height: 'auto',
        autoResize: true
    };

    $scope.myJson = {
        type : 'line',
        series : [
          { values : [54,23,34,23,43] },
          { values : [10,15,16,20,40] }
        ]
    };
});

Hope someone can help me out with this, since I very like the AngularJS version of Zingchart.

[mike-schultz]

@chris-rs Hi there, do you have CSS set on your parent containers? It looks like your code is running just fine for me : http://codepen.io/mike-schultz/pen/rejXMR

[chris-rs]

Hi Mike,

I think it was a stubborn caching issue. After tracing the issue for two hours it suddenly disappeared after I removed the doctype. I just inserted the doctype again and it is still solved. So it seems to me removing the doctype triggered the cache flush.

Glad I solved the issue. Zingchart for Angular looks great! Do you know if the jQuery Zingchart and the Angular directive version are functionally equal?

Thanks for your fast response anyway!

Regards, Chris

Op 18 mrt. 2016 om 23:04 heeft Mike Schultz <[email protected]mailto:[email protected]> het volgende geschreven:

@chris-rshttps://github.com/chris-rs Hi there, do you have CSS set on your parent containers? It looks like your code is running just fine for me : http://codepen.io/mike-schultz/pen/rejXMR

You are receiving this because you were mentioned. Reply to this email directly or view it on GitHubhttps://github.com/zingchart/ZingChart-AngularJS/issues/2#issuecomment-198561643

[mike-schultz]

@chris-rs The ZingChart-jQuery wrapper and this angular directive have different focuses. The jQuery wrapper focuses on the utilization of ZingChart's API and events but with jquery syntax, while the angular directive focuses on data-binding and automatically updating the chart when the data changes. However, they both still support the entire syntax of the main library