We want to use 'Avenir' in our Google Charts. This isn't a problem at all when using the charts on a webpage, as you can see here. We can simply change the font after the chart is generated using CSS:
#font-face
{
font-family: 'avenir';
src: url('../fonts/avenir.woff2');
}
svg text
{
font-family: 'avenir' !important;
}
The problem is we want to save the chart as an image after it is generated and use it in a PDF that we generate then. For saving the chart we're using the function getImageURI(), but in the image that is saved the 'default' font (Arial) is used, as you can see here.
Does anyone know if it's possible to use a custom font when setting up a Google Chart like the way Arial is set in the example below?
var oOptions =
{
vAxis:
{
textStyle:
{
color: '#2a292e',
fontName: 'Arial',
fontSize: 24
}
}
}
Thanks in advance!
rather than applying css to the chart elements, add the fontName to the chart options
this will translate to the image
the following working snippet uses a custom font from google
from the google "font picker"...
<link href="https://fonts.googleapis.com/css?family=Bahiana" rel="stylesheet">
Specify in CSS
Use the following CSS rules to specify these families:
font-family: 'Bahiana', cursive;
in the chart options, the fontName is set as...
fontName: "'Bahiana', cursive"
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 800,
height: 600,
bar: { groupWidth: '75%' },
isStacked: true,
legend: {
position: 'top',
maxLines: 3,
textStyle: {
color: '#2a292e',
fontName: "'Bahiana', cursive",
fontSize: 40
}
},
hAxis: {
textStyle: {
color: '#2a292e',
fontName: "'Bahiana', cursive",
fontSize: 24
}
},
vAxis: {
textStyle: {
color: '#2a292e',
fontName: "'Bahiana', cursive",
fontSize: 24
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
};
div {
padding: 4px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bahiana">
<div>CHART</div>
<div id="chart_div"></div>
<div>IMAGE</div>
<div id="image_div"></div>
Related
I have a project where I use Openlayers in order to display features. On top of each of my features I show a label consisting of the description of that specific feature.
I have noticed that on thin features the vector label does not show. I do not know why this is happening because I have never set a value where the text should of should not be shown.
This is the function that I use in order to set the style and vector label of each feature:
style: (feature) => {
return new Style({
fill: new Fill({ color: 'rgba(43, 146, 190, 0.4)' }),
stroke: new Stroke({
width: 3,
color: 'rgba(43, 146, 190, 1)',
}),
text: new Text({
font: '13px Calibri,sans-serif',
fill: new Fill({ color: '#fff' }),
stroke: new Stroke({
color: '#000',
width: 2,
}),
text: feature.get('description'),
}),
});
},
Here you can see that the label is set for most features except those that are small of very thin.
I have already found the solution. In order to show the labels on small or thin features you need to set the overflow value of the text object to true.
So the function to generate a label based on a feature should be as follows:
style: (feature) => {
return new Style({
fill: new Fill({ color: 'rgba(43, 146, 190, 0.4)' }),
stroke: new Stroke({
width: 3,
color: 'rgba(43, 146, 190, 1)',
}),
text: new Text({
font: '13px Calibri,sans-serif',
fill: new Fill({ color: '#fff' }),
stroke: new Stroke({
color: '#000',
width: 2,
}),
text: feature.get('description'),
overflow: true,
}),
});
},
I have problem with how to re-presentation of node in SVG with "letter-spacing" in SVG document to fabric.TextBox.
In file SVG text node is:
<text transform="matrix(1 0 0 1 51.5211 22.2889)" style="fill:#3C2415; font-size:11px; letter-spacing:3;">MINH TUẤN</text>
And my fabric.TextBox is:
var textbox_0_1 = new fabric.Textbox("MINH TUẤN", {
width: 200,
fontSize: 11,
fill: "#3C2415",
editable: true,
textAlign: "center",
charSpacing: 3,
});
Here is display on SVG & FabricJS:
How to find correct charSpacing which is respectively with letter-spacing attribute in SVG's Text node ?
Notes:
In fabric.TextBox document write:
charSpacing :Number
additional space between characters expressed in thousands of em unit
And in document for SVG write:
(if no unit identifier is provided) values in user space — for example, "15"
And Here is my code:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var textbox_0_1 = new fabric.Textbox("MINH TUẤN", {
top: 20,
left: 20,
width: 200,
fontSize: 11,
fill: "#000000",
editable: true,
textAlign: "center",
charSpacing: 3,
});
canvas.add(textbox_0_1);
setObjectCoords();
canvas.renderAll();
function setObjectCoords() {
canvas.forEachObject(function(object) {
object.setCoords();
});
}
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Thank you,
You need to parse from pixel to em.
DEMO
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
width: 300,
height: 100
});
var letterSpacing = 5, fontSize = 30;
var textbox = new fabric.Text("MINH TUẤN", {
top: 20,
fontSize: fontSize,
fill: "#000000",
fontFamily : "Verdana"
});
canvas.add(textbox);
var parsedSpacing = fabric.util.parseUnit(letterSpacing, fontSize) / fontSize * 1000;
textbox.set({charSpacing : parsedSpacing});
canvas.requestRenderAll();
console.log(parsedSpacing)
canvas{
border:1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<svg width="300" height="100" viewBox="0 0 300 100">
<text font-size="30" letter-spacing="5" font-family="Verdana" y="40">MINH TUẤN</text>
</svg>
<canvas id="editorCanvas"></canvas>
I want to make Editable Text which is curved along a fabric.Path as bellow expected image.
Here is my code:
I created a curved fabric.Path & a fabric.TextBox, but I don't know how to curve text along that Path. Please help me resolve this problem.
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var Path_0_1 = new fabric.Path('M127.91,99.29c32.16,10.73,53.41,7.33,67.81,0 c34.07-17.34,41.99-62.82,60.98-60.98c8.19,0.79,14.11,9.98,17.91,17.91', {
fill : null,
stroke: '#000000',
});
canvas.add(Path_0_1);
var curvedText = new fabric.IText("Anh Minh", {
left: 50,
top: 50,
width: 200,
fontSize: 24,
fontFamily: 'Times New Roman',
fontWeight: 'normal',
textAlign: 'center',
lineHeight: 1,
fill: "#404041",
});
canvas.add(curvedText);
#canvasContainer {
width: 100%;
height: 500px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Addition information:
After few hours google search, I see an interesting Konva.TextPath, I wonder If can we make same Object like that Konva.TextPath in Fabric.js?
Thank you!
I'm trying to overlap elements as shown in the wireframe, as well as position them.
I've tried
- position: 'relative' and the element disappears
- position: 'absolute' but alignItems: 'center' does nothing
Can anyone help identify what's missing?
Wireframe of Wishlist (ignore the different header; it was from an old version)
This is what I get instead, even after using flex
I've attached code from all the separate .js files, and left out all import and export statements.
Thank you!
----------- in WishlistDetail.js------------
// Each Item on The Wishlist
const WishlistDetail = () => {
return (
<View>
<WishlistCard>
<WishlistThumbnail />
<WishlistThumbnailFilter />
<WishlistPrice />
<WishlistItemDetail />
</WishlistCard>
</View>
);
};
---------- in WishlistCard.js------------------
// Creating WishlistCard
const WishlistCard = (props) => {
return (
<View style={styles.containerStyle}>
{props.children}
</View>
);
};
// WishlistCard Style
const styles = StyleSheet.create({
containerStyle: {
borderWidth: 0.75,
backgroundColor: 'white',
borderColor: 'rgb(217, 217, 217)',
height: 125 // ******* not too sure
}
});
---------- in WishlistThumbnail.js------------------
const WishlistThumbnail = () => {
const { wishlistThumbnailStyle } = styles;
return (
<View>
<Image
style={wishlistThumbnailStyle}
source={{ uri: 'http://www.startwire.com/job-applications/logos/amazon.png' }}
/>
</View>
);
};
// All Styling
const styles = StyleSheet.create({
wishlistThumbnailStyle: {
height: 95,
width: 95,
padding: 20,
position: 'absolute',
justifyContent: 'center'
}
});
---------- in WishlistThumbnailFilter.js------------------
// Creating Wishlist Thumbnail Filter
const WishlistThumbnailFilter = () => {
return (
<View style={styles.wishlistThumbnailFilterStyle} />
);
};
// Image Filter Style - 146 125 192.2
const styles = StyleSheet.create({
wishlistThumbnailFilterStyle: {
width: 160,
borderTopColor: 'rgba(13, 13, 13, 0.05)',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderTopWidth: 250,
borderLeftWidth: 0,
borderRightWidth: 90
}
});
---------- in WishlistPrice.js------------------
const WishlistPrice = () => {
const { textStyle, viewStyle } = styles;
return (
//INSERT PRICE HERE
<View style={viewStyle}>
<Text style={textStyle}>30€</Text>
</View>
);
};
// Wishlist Price Style
const styles = StyleSheet.create({
viewStyle: {
backgroundColor: 'transparent',
padding: '3',
// alignItems: 'flex-end',
justifyContent: 'flex-end',
position: 'absolute'
// position: 'relative'
},
textStyle: {
fontSize: 11.5,
fontFamily: 'Bariol_Regular',
color: 'rgb(127, 127, 127)'
}
});
---------- in WishlistItemDetail.js------------------
// This contains both Wishlist Title and Wishlist Text
const WishlistItemDetail = () => {
const { wishlistItemDetailStyle, wishlistItemTitleStyle, wishlistItemTextStyle } = styles;
return (
<View style={wishlistItemDetailStyle}>
<Text style={wishlistItemTitleStyle}>Wishlist Item Title</Text>
<Text style={wishlistItemTextStyle}>Wishlist Item Text</Text>
</View>
);
};
// Header Style
const styles = StyleSheet.create({
wishlistItemDetailStyle: {
backgroundColor: 'transparent',
position: 'absolute',
padding: 5
},
wishlistItemTitleStyle: {
fontSize: 15,
fontFamily: 'Bariol_Regular',
color: 'rgb(51, 51, 51)'
},
wishlistItemTextStyle: {
fontSize: 12,
fontFamily: 'Bariol_Regular',
color: 'rgb(70, 70, 70)'
}
});
without wanting to go into too much detail, this seems to look like an issue of column vs row in you flexDirection.
In order to get the style of the wireframe you provided you need to use a combination of both row and column. Check out this documentation: https://facebook.github.io/react-native/docs/flexbox.html
So one row consists of two main views styled in a flexrow and the one I marked blue is styled in a column (which is the default).
Hope this helps
I'm using jqPlot
Look at the right-bottom corner
Left side is correct, but the right side isn't.
There is a way to fix word-wrap on tick labels?
EDIT:
$(document).ready(function(){
var plot2 = $.jqplot ('chart-line', [[["2013-03-22",1],["2013-03-23",0],["2013-03-24",0],["2013-03-25",2],["2013-03-26",19],["2013-03-27",7],["2013-03-28",4]]]
, {
title: 'Total de alertas por dia',
seriesDefaults: {
fill:true,
color: 'steelblue',
rendererOptions: {
smooth: true
},
pointLabels:{ show:true }
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{
formatString: '%F',//'%Q',
textColor: 'black',
fontSize: '11px',
labelPosition: 'auto'
}
},
yaxis: {
min:0,
tickRenderer: $.jqplot.CanvasAxisTickRenderer
}
}
});
EDIT:
Here is HTML
<style>
.ComBordaRedonda {
border:1px solid #dadada;
border-radius:3px;
padding:5px;
font-size: 10pt;
font-family: Calibri;
}
</style>
<div class="ComBordaRedonda" style = "float: right;background-color:#FFFFFF;width: 57%; height: 300px;">
<div id = "chart-line" style = "width: 90%; height: 95%;margin:auto">
</div>
</div>
I fixed it.
I forgot to include the css of jqPlot in the page.
thanks nick_w!