How do I resize the canvas in Raphael.js? - raphael
I'm having difficulty resizing the canvas in Raphael.js. I thought I could simply use:
var paper = Raphael("paper", 100, 100);
and this would create a canvas using the ID "paper" with a width and height of 100 pixels. However when I try this the canvas doesn't initialize with these settings. I'm using some of the free icons on the Raphael.js website and I was wondering how I would change the size of the icons? Do I have to use the transform function as well? If so could somebody please create a jsfiddle example.
Thanks in advance.
Sorry if I haven't explained myself very well, but Raphael.js is completely new to me.
EDIT:
I tried your suggestions, but to no avail. Here's the code I'm working on. Maybe I have a conflict or something. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Logo Experiment</title>
<link rel="stylesheet" href="css/960_16_col.css"/>
<link rel="stylesheet" href="css/stylesheet.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="container_16">
<div class="grid_4">
<div id="design"></div>
</div>
<div class="grid_2">
<div class="arrow"></div>
</div>
<div class="grid_4">
<div id="build"></div>
</div>
<div class="grid_2">
<div class="arrow"></div>
</div>
<div class="grid_4">
<div id="deliver"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
window.onload = function() {
var design = Raphael("design");
design.path("M24.359,18.424l-2.326,1.215c0.708,1.174,1.384,2.281,1.844,3.033l2.043-1.066C25.538,20.822,24.966,19.652,24.359,18.424zM19.143,14.688c0.445,0.84,1.342,2.367,2.274,3.926l2.414-1.261c-0.872-1.769-1.72-3.458-2.087-4.122c-0.896-1.621-1.982-3.108-3.454-5.417c-1.673-2.625-3.462-5.492-4.052-4.947c-1.194,0.384,1.237,4.094,1.876,5.715C16.73,10.147,17.991,12.512,19.143,14.688zM26.457,22.673l-1.961,1.022l1.982,4.598c0,0,0.811,0.684,1.92,0.213c1.104-0.469,0.81-1.706,0.81-1.706L26.457,22.673zM24.35,15.711c0.168,0.339,2.924,5.93,2.924,5.93h1.983v-5.93H24.35zM18.34,15.704h-4.726l-3.424,5.935h11.66C21.559,21.159,18.771,16.479,18.34,15.704zM3.231,21.613l3.437-5.902H2.083v5.93h1.133L3.231,21.613zM15.048,10.145c0-0.93-0.754-1.685-1.685-1.685c-0.661,0-1.231,0.381-1.507,0.936l2.976,1.572C14.97,10.725,15.048,10.444,15.048,10.145zM14.343,12.06l-3.188-1.684L9.62,13.012l3.197,1.689L14.343,12.06zM3.192,26.886l-0.384,1.108v0.299l0.298-0.128l0.725-0.896l2.997-2.354l-3.137-1.651L3.192,26.886zM9.02,14.044l-4.757,8.17l3.23,1.706l4.728-8.186L9.02,14.044z").attr({fill: "#666", stroke: "#000"});
var build = Raphael("build");
build.path("M28.537,9.859c-0.473-0.259-1.127-0.252-1.609-0.523c-0.943-0.534-1.186-1.316-1.226-2.475c-2.059-2.215-5.138-4.176-9.424-4.114c-1.162,0.017-2.256-0.035-3.158,0.435c-0.258,0.354-0.004,0.516,0.288,0.599c-0.29,0.138-0.692,0.147-0.626,0.697c2.72-0.383,7.475,0.624,7.116,2.966c-0.08,0.521-0.735,1.076-1.179,1.563c-1.263,1.382-2.599,2.45-3.761,3.667l0.336,0.336c0.742-0.521,1.446-0.785,2.104-0.785c0.707,0,1.121,0.297,1.276,0.433c0.575-0.618,1.166-1.244,1.839-1.853c0.488-0.444,1.047-1.099,1.566-1.178l0.949-0.101c1.156,0.047,1.937,0.29,2.471,1.232c0.27,0.481,0.262,1.139,0.521,1.613c0.175,0.324,0.937,1.218,1.316,1.228c0.294,0.009,0.603-0.199,0.899-0.49l1.033-1.034c0.291-0.294,0.501-0.6,0.492-0.896C29.754,10.801,28.861,10.035,28.537,9.859zM13.021,15.353l-0.741-0.741c-3.139,2.643-6.52,5.738-9.531,8.589c-0.473,0.443-1.452,1.021-1.506,1.539c-0.083,0.781,0.95,1.465,1.506,2c0.556,0.533,1.212,1.602,1.994,1.51c0.509-0.043,1.095-1.029,1.544-1.502c2.255-2.374,4.664-4.976,6.883-7.509c-0.312-0.371-0.498-0.596-0.498-0.596C12.535,18.451,11.779,17.272,13.021,15.353zM20.64,15.643c-0.366-0.318-1.466,0.143-1.777-0.122c-0.311-0.266,0.171-1.259-0.061-1.455c-0.482-0.406-0.77-0.646-0.77-0.646s-0.862-0.829-2.812,0.928L7.44,6.569C7.045,6.173,7.203,4.746,7.203,4.746L3.517,2.646L2.623,3.541l2.1,3.686c0,0,1.428-0.158,1.824,0.237l7.792,7.793c-1.548,1.831-0.895,2.752-0.895,2.752s0.238,0.288,0.646,0.771c0.196,0.23,1.188-0.249,1.455,0.061c0.264,0.312-0.196,1.41,0.12,1.777c2.666,3.064,6.926,7.736,8.125,7.736c0.892,0,2.021-0.724,2.948-1.64c0.925-0.917,1.639-2.055,1.639-2.947C28.377,22.567,23.704,18.309,20.64,15.643z").attr({fill: "#666", stroke: "#000"});
var deliver = Raphael("deliver");
deliver.path("M17.078,22.004l-1.758-4.129l-2.007,4.752l-7.519-3.289l0.174,3.905l9.437,4.374l10.909-5.365l-0.149-4.989L17.078,22.004zM29.454,6.619L18.521,3.383l-3.006,2.671l-3.091-2.359L1.546,8.199l3.795,3.048l-3.433,5.302l10.879,4.757l2.53-5.998l2.257,5.308l11.393-5.942l-3.105-4.709L29.454,6.619zM15.277,14.579l-9.059-3.83l9.275-4.101l9.608,3.255L15.277,14.579z").attr({fill: "#666", stroke: "#000"});
$('.arrow').each(function(i) {
arrow = Raphael($(this)[0]);
arrow.path("M10.129,22.186 16.316,15.999 10.129,9.812 13.665,6.276 23.389,15.999 13.665,25.725z").attr({fill: "#666", stroke: "#000"});
});
};
#design {
width: 100px;
height: 100px;
}
To answer your exact question in the title, you would use paper.setSize(width, height)
From the Raphael docs:
Your other questions have different answers.
var paper = Raphael("paper", 100, 100); requires that you have some DOM element with the id="paper" already on your page. That DOM element should have width and height enough to hold your canvas (in this case, 100x100). Or, you can leave off the width and the height and it will take on the width and height of the container (very convenient). You can also produce a canvas without a DOM element by putting in all four dimensions, such as var paper = Raphael(0, 0, 100, 100); to make a 100x100 canvas at the top left of the document.
To resize the Raphael icons, you can use the transform function. For example icon.transform("s2"); to make it twice as large.
This fiddle shows how to create a Raphael canvas and put the pencil icon on it, make it yellow, and double-sized. Note that we need to scale around the top left corner (normally it scales around the center) to prevent it from clipping off the top and left of the page.
var pencil = "M25.31,2.872l-3.384-2.127c-0.854-0.536-1.979-0.278-2.517,0.576l-1.334,2.123l6.474,4.066l1.335-2.122C26.42,4.533,26.164,3.407,25.31,2.872zM6.555,21.786l6.474,4.066L23.581,9.054l-6.477-4.067L6.555,21.786zM5.566,26.952l-0.143,3.819l3.379-1.787l3.14-1.658l-6.246-3.925L5.566,26.952z"
var paper = Raphael(0,0,200,200);
var icon = paper.path(pencil).attr({fill: "yellow"}).transform("s2,2,0,0");
Related
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;
}
}
Foundation5 grid column height
Foundation 5 provides grid system and I would like to use it to arrange my web page. But the problem is I dont know how to set the height of each column. now it's just as large as the content needs, but it's really ugly.
I've tried the solution Set height with zurb-foundation grid, but it doesnot work. It is a nested grid of 8 columns which is splited into two 6-columns. I just want these two 6-columns to be the same tall but a different background color.
My code is :
<div class="row">
<div class="small-8 columns"> 8
<div class="row" >
<div class="small-6 columns" id="d8">
more and more people want to learn some HTML and CSS.
</div>
<div class="small-6 columns" id="d9">
more and more people want to learn some HTML and CSS. Joining the
designers and programmers are new audiences who need to know
a little bit of code at work (update a content management system
or e-commerce store) and those who want to make their personal
blogs more attractive. Many books teaching HTML and CSS are dry
and only written for those who want to become programmers, which
is why this book takes an entirely new approach. </div>
</div>
</div>
</div>
</div>
and the JS from the link is:
<script>
$(window).load(function()({
//equalize function
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
//call the equalize height function
equalHeight($("div.small-6"));
});
</script>
In fact it is easy to set the height. Finally I use
.div[id]
{
height:85px !important;
}
and it works.
Google chart default size
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
}
Google Charts transparent background not working
I am trying to make the background transparent for some charts I have made with google charts. They work perfectly in everything except IE7 and 8, I get a white backgound. I have tried every combination I can find for the color attribute to change it but nothing works. The only thing left to try was a suggesting that someone made on here a few months ago for someone else with the same issue. Their suggestion was... For a transparent background, use chf=bg,s,FFFFFF00 But I have no idea how to implement this?
chf=bg,s,FFFFFF00
is a code for the old Google Image Charts.
Those codes will only work with the non-SVG versions of charts. Google Image Charts have been deprecated (as you can see from their help pages), so unless you want to implement the old-style charts, you won't be able to implement the above code on your new, fancy, interactive SVG charts.
For the new fancy SVG charts, I have luck with
backgroundColor: "transparent"
Copy-paste this in to Google Playground to test:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', 1336060, 400361, 1001582, 997974],
['2004', 1538156, 366849, 1119450, 941795],
['2005', 1576579, 440514, 993360, 930593],
['2006', 1600652, 434552, 1004163, 897127],
['2007', 1968113, 393032, 979198, 1080887],
['2008', 1901067, 517206, 916965, 1056036]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"},
backgroundColor: "transparent"}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;" bgcolor="#E6E6FA">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
This is just the standard bar chart example with two things added:
bgcolor="#E6E6FA" to the body element (make it blue so we can tell if transparent)
backgroundColor="transparent" to the options (make it transparent)
This works in FireFox. I don't know if it works in IE7 (no testing environment). Let us know if it works.
change as appropriate in the config file that the pie chart is located on. I had this chart under a donate.php as example: FROM $chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,f9faf7&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57'; TO $chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57'; that code let me have transparency when it was a white background! thank you.
Child div to 100% when parent's height is dynamical | HTML/CSS
I want the image to be centered next to the text.The amount of text will be different in each box so I can't set the height.As I research people mainly use two ways of vertical centering.Using line-height which I can't use, because I don't have fixed height.Second one is using absolute positioning which I can't use, because left div with image inside will cover the text.If I set padding to text, when image is not there it won't look good.
The best I could think of is to use jQuery to get and set the container height, and then set the margin according to the height.
<div class="container">
<div class="image_holder">
<img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" />
</div>
<p>text</p>
</div>
<style type="text/css">
.container {
width:600px;
overflow:hidden; }
.image_holder {
width:100px;
height:100%;
float:left;
background:#eaf0ff; }
p {
width:500px;
float:left; }
</style>
<script>
$('.container').css('height', $('.container').height() );
$('.image_holder').css('margin-top', ( $('.container').height() - $('.image_holder img').height() ) / 2 );
</script>
Is there a way to do it cleanly with pure CSS ?
The best solution I came up with is to absolutely position the picture inside the box and then use javascript to remove padding if there is no image in the box.