Google chart default size - google-visualization

I have a Google chart that is set to 500px by 500px, yet returns 400px by 200px. I have looked at the div, and it shows 500x500. I have no reason for why the chart comes back at 400x200. the div shows 500x500, but the SVG rectangle box shows 400x200, making all of the images smaller.
Is there a setting I don't know?
<div class="span5">
<div id="qual_div" style="border:1px black solid;margin:0px;padding:0px;height:500px;width:500px"></div>
</div>
<script type="text/javascript">
var data, options, chart;
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
data = google.visualization.arrayToDataTable([
['Qual', 'Stat'],
['Patient Satisfaction', {{ $stats->attributes['sa_ptsatisfaction'] }}],
['Medical Knowledge', {{ $stats->attributes['sa_medknowledge'] }}],
['ER Procedural Skills', {{ $stats->attributes['sa_erprocskills'] }}],
['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],
['Speed', {{ $stats->attributes['sa_speed'] }}],
['Compassion', {{ $stats->attributes['sa_compassion'] }}],
['EMR Utilization Skills', {{ $stats->attributes['sa_emr'] }}],
['Profession Teamwork Skills', {{ $stats->attributes['sa_proftmwrkskills'] }}]
]);
options = {
title: 'My Daily Activities'
,chartArea:{left:0,top:0,width:"100%",height:"100%"}
};
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function adjustChart(nm, vl) {
for (var r=0; r<data.D.length; r++) {
if (data.D[r].c[0].v == nm) {
data.D[r].c[1].v = parseInt(vl);
break;
}
}
chart.draw(data, options);
}
</script>

There are several ways to set the size of a chart.
The first is to set the size of the element that contains it. The chart will default to the width and height of the containing element (see Google Visualization documentation for default values of height/width).
The second is to not define the actual size of the element, and instead set the height/width of the chart to 500px each manually by adding those to your options:
options = {
title: 'My Daily Activities'
,chartArea:{left:0,top:0,width:"100%",height:"100%"}
,height: 500
,width: 500
};
What you are actually doing in your code is setting the size of the chart plot itself (not of the overall chart element with the axes, labels, and legend). This will cause the chart plot area to become 500px by 500px if you point to the appropriate div as pointed out by #Dr.Molle in the comments.
Assuming you don't want that, your new options would be:
options = {
title: 'My Daily Activities'
,height: 500
,width: 500
};

So setting the height and width as in jmac's answer works, but if you want it responsive there is some additional things I had to do.
But just to back up a second the reason I am having this problem in the 1st place is:
The div that this chart is displaying in is not visible when the page loads.
As Seen here the hidden Chart Width is Wrong 400 by 200: jsfiddle.net/muc7ejn3/6/
As Seen here the hidden Chart Width is Correct: jsfiddle.net/muc7ejn3/7/
Another way to do it is just to Un-hide the Chart right before chart.draw() is called, then Hide it again, something like:
tempShowChart();
chart.draw(view, options);
hideChartAgain();
This doesn't handle window being resized.

I have the same case that the rendered graph has a size of 400 x 200px
After being rendered the svg is wrapped inside 3 divs
<div id="gantt-chart" class="svelte-ql38wl">
<div style="position: relative; width: 400px; height: 200px;">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="400" height="200"><defs></defs><g><rect x="0" y="0" width="400" height="200" fill="#ffffff"></svg>
</div>
</div>
</div>
own container set with chart = new google.visualization.Gantt(document.getElementById('gantt-chart'));
generated outer wrapper div - width & height set > where? seems to be synced with the svg size
generated inner wrapper div - chart area?
svg
The inner wrapper div looks like the chart area. Unfortunately changing the values in the options has no effet - always stays 'left: 0px; top: 0px; width: 100%; height: 100%;'
NOTICE I'm drawing a Google Gantt Chart - looks like not all charts have the same possible settings. I find the chartArea option under e.g. 'Column Charts', but it's not listed with 'Gantt Charts'
The main chart documentation says
You can specify the chart size in two places:
Specifying the size in HTML - A chart can take a few seconds to load
and render. If you have the chart container already sized in HTML, the
page layout won't jump around when the chart is loaded.
Specifying the size as a chart option - If the chart size is in the JavaScript, you
can copy and paste, or serialize, save, and restore the JavaScript and
have the chart resized consistently.
If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.
Since it looks like the chart size can only be set as a number for pixels (with the gantt chart again - I saw other examples where it seemed to be possible to set percentage...) in my case these settings helped
set css of container div + generated children
programmatically set height of chart via js
#gantt-chart {
width: 100%;
height: 100%;
display: flex;
overflow: auto;
}
#gantt-chart div {
margin: auto; /* centers chart inside container div with display:flex*/
}
let trackHeight = 30
let options = {
height: dataTable.getNumberOfRows() * trackHeight + 50
// width adaps to container div with 100% width
}

Related

angular material design animation from list to card

If I have a list of "simple" cards that is rendered using ng-repeat,
what would be the recommended way to do a transition to a detailed view of one of those cards?
Does such a transition imply that the same HTML / DOM element needs to stay on screen and its content needs to change?
Does such a transition imply that the collection upon which ng-repeat is based needs to change so that it only includes that single item that we are transitioning to or does the rendering of the rest of the items should use some version of ng-if="item.id=focused_item_id"?
It doesn't need to be the same DOM element, and arguably shouldn't be. Animating width or height will cause repaints/reflows and will greatly hinder performance.
You could use ng-animate (https://docs.angularjs.org/api/ngAnimate) with a single detail element that gets populated with the relevant details from whatever object was clicked.
Something like this:
HTML
<div class="item" ng-repeat="el in elems track by $index" ng-click="getDetails(el)">
<div>Summary</div>
</div>
<div class="details" ng-if="showDetails">
<div>Details for {{currentItem}}</div>
</div>
CSS
.details {
position: fixed;
width: 100%;
transition: all 1s ease-out;
}
.details.ng-enter,
.details.ng-leave-active {
opacity: 0;
transform: scale(0.8);
}
.details.ng-enter-active,
.details.ng-leave {
opacity: 1;
transform: scale(1);
}
So getDetails() would do something like set $scope.showDetails = true; and set $scope.currentItem = el; Then you could have a close button that resets those two scope variables and destroys the detail element.
Hope that helps!
I have done what you are describing using CSS transitions on the DOM element in question. I have a list of elements, and when you click on one, the backing object has an 'expand' property set to true, which makes extra content visible and adjusts the size.
HTML
<div ng-repeat="el in elems" ng-class="{expand: el.expand}" class="element">
<div ng-click="el.expand = !el.expand">Summary</div>
<div ng-if="el.expand">Details</div>
</div>
CSS
div.element {
transition: 0.5s linear all;
height: 200px;
}
div.element.expand {
height: 500px;
}
Try clicking on 'Summary 1' or 'Summary 2' in the plunkr
https://plnkr.co/cDkuNjTbE83L5bDJccsJ

Getting chart js bar chart to fill window

I have a chart js bar chart that draws within the canvas:
<canvas id="chart" width="800" height="400"></canvas>
However I would like the chart to fit the size of the current window. I have tried:
<canvas id="chart" width="100%" height="400"></canvas>
but it does not like it. I could get the window width using window.innerWidth but is there any reason why the 100% does not work?
Please see the post: Chart.js canvas resize . There are actually two answers that are really good solutions here. You can use the chart options like below:
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,
or you can set the canvas width and height using client side code:
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
This post very effectively answers your question about why % values dont work: Canvas is stretched when using CSS but normal with "width" / "height" properties
After setting responsive and ratio options (check out related chartjs doc), use following css to fill 100% of the parent:
html
<div class="panel">
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
scss:
.panel {
display: flex;
.chart-container {
position: relative;
flex-grow: 1;
min-height: 0;
}
}

adjust scroll-bar for Google Chart table

the vertical scroll-bar on my table hovers over my data. I cannot seem to move the vertical scroll-bar nor can I change the width of the table. I even tried left aligning the text on my 2nd column but nothing happens.
This is my table:
I have to scroll across to see all my data:
Is there a way to see the full width of my table and not have the vertical scroll bar hover over my 2nd column?
this is the code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", { packages: ["table"] });
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = google.visualization.arrayToDataTable([
['Researcher Name', 'Number of Submissions'],
#Html.Raw(rows)]);
var options = {
title: ''
};
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: false
}
});
dashboard.bind([stringFilter], [table]);
dashboard.draw(data);
}
google.load('visualization', '1', { packages: ['controls'], callback: drawTable });
</script>
<div id="dashboard">
<div id="string_filter_div"></div>
<div style="height:450px" id="table_div"></div>
</div>
I was getting exactly the same problem as you and ended up solving it by adding paging options to the table. Now I never get a vertical scroll bar.
page: 'enable',
pageSize: 27
The table chart usually does a good job with just the defaults.
Try removing style="height:450px" from your div.
To get the table headings to wrap, you can assign a css class name to headerCell, it can be blank.
cssClassNames: {headerCell: 'googleHeaderCell'}
Add this css class somewhere on your page...
.googleHeaderCell {}
Otherwise, you should be able to set a distinct height and width, directly in your options. Just remember to remove it from the div, as mentioned previously. Unless other content on the page is crowding the table...
options = {
cssClassNames: {headerCell: 'googleHeaderCell'}, // be sure to add css
height: 600, // no px needed
width: 800
};
For the width of the table, you can assign width either in the div itself or in the table option like:
options = {
width: 800
};
always try to keep the height:auto in the div section, so that height of the table can get the default table content. If you are getting overflow in the scrollbar and try to get rid of it, you can use a CSS
divElement(id/class){
overflow:hidden;// for both horizontal and vertical scrolls
or
overflow-x:hidden;// for horizontal scroll
or
overflow-y:hidden;// for vertical scroll
}
To keep the text left or right aligned inside the table cell you can use CSS in the table option itself:
.align-text{ //class name
text-align:left/right;}
var cssClass= {
'tableCell': 'align-text',
};
/**** table option ****/
options = {
cssClassNames: cssClass,
width: 800};

Sizing a child element relative to parent's border-box

If I set the size of a child element in percentage, the size will be calculated relative to parent's content-box, independently from the fact that I have set its box-sizing property to border-box.
So if I have something like this:
.parent {
box-sizing: border-box;
padding: 0 100px;
width: 600px;
}
.child {
width: 50%;
}
The width of .child will be 50% of 400px (parent's width after padding has been applied). You can see an example here: JSBin
Main Question
Is there a way to make the width of a child element relative to the
parent's border-box rather than the parent's content-box?
Bonus question
While making my example I noticed a weird behavior in the calculation of the size. Setting the .parent's padding as 0 10% actually gives a padding of 68-odd pixels from each side. Why is that? Isn't 10% of 600px 60px or I am missing something?
The width property is explicitly defined as being relative to the content box and box-sizing on the parent doesn't alter this however there is a trick available. What you need is a border that doesn't consume any space and thankfully that is exactly what the outline property does.
There is one catch: The outline defaults to being outside the content box. Not to worry though because one of outline's related properties outline-offset accepts negative values which will bring our outline inside our content box!
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="outer">
<div class="inner">
TEST
</div>
</div>
</body>
</html>
CSS
.outer {
position: relative;
width: 100px;
height: 100px;
outline:20px solid red;
border:1px solid black;
outline-offset: -20px;
}
.inner {
width: 50%;
height: 100%;
outline:1px solid yellow;
position: absolute; /* required so inner is drawn _above_ the outer outline */
background-color: blue;
}
JS Bin: http://jsbin.com/efUBOsU/1/
With regards to your "bonus question" percentage widths are based on the container size, not the element size. This is true for width, padding and margin. You're getting a padding of 68px because the container is is 680px. This may seem odd but it comes in very handy when you have a rule like {width: 80%; padding: 10%;} because it guarantees your total object dimensions will be 100% of the container and not some arbitrary value based on your child elements' content.
Note: In future please ask additional questions seperately, especially when they are only marginally related to your primary question.

Facebook “Like” button's comment box sizing

When the user clicks the like button a comment box pops up that has a width of 450px. This is too large for the space I have available. As far as I can tell, this comment box does not seem to respond to the "data-width" property I had set here:
<div class="fb-like" data-send="false" data-layout="button_count" data-width="290" data-show-faces="false">
...so I had been forcing it with my css to this size:
iframe.fb_ltr { max-width:290px !important;}
All was good until it seems something just changed and this is no longer viable because the width of 450px is now being set within the iframe with this new? class:
<div class="fbpf pluginLikeFlyout pluginLikeFlyoutFull pluginLikeFlyoutFullButton">
.pluginLikeFlyoutFull {
top: 24px;
width: 450px;
}
Bottom line, is there another way to set the width of the comment box so it doesn't default to 450px?
Thanks,
Matt
I added this to my css:
div.fb-like.fb_iframe_widget > span {
width: 100% !important;
}
div.fb-like.fb_iframe_widget{
width: 100%;
}