I am working with Google Charts and customizing design for making it more beautiful.
But on embedding font faces in the Google Charts, I am getting an error within the Firebug console, which I am unable to understand. Firebug shows this error:
"NetworkError: 400 Bad Request -
http://fonts.googleapis.com/css?family=hand_of_seanregular%7CInterstateRegular%7CInterstateRegular%7CInterstateRegular%7CInterstateRegular"
Good news is that the font is visible. From the error I think it's forcing the font to be a Google font but I am using a font face.
What I am writing is this:
textStyle : {
color: '#fff',
fontName: "InterstateRegular",
fontSize: 16,
bold: false,
},
Could anyone tell me what mistake I am doing?
webfont.js seems to call insertBefore() which in turn loads a Google Font. So the solution is to override the default insertBefore() function, look for href string that matches the one giving you an error and then return early - otherwise call the default insertBefore()
Code here: Google Maps v3 - prevent API from loading Roboto font
Related
I experimented with my code on the chartjs website (using their editor on one of their samples pages) and it works perfectly. When I copy and paste it into my page, the chart won't even render. When I delete the line "type: 'time'," the chart renders fine, but not with the intended x axis (which makes me think the rest of my code is OK). When I delete the entire 'scales' section, it also renders. It's something in that section that is tanking my chart. Am I missing a component or helper that is required for the 'time' type to function? I have the latest version of chart.js installed (3.7.0), but that's the only external script I have linked.
scales: {
x: {
type: 'time',
time: {
unit:'month',
},
title: {
display: true,
text: 'Date'
}
},
}
OK, so yes I figured out I was missing some files: Luxon 1.0, and the Luxon adapter (chartjs-adapter-luxon), available on GitHub (https://github.com/chartjs/chartjs-adapter-luxon). I struggle with GitHub sometimes, plus I didn't want to link to any non-local files. I managed to find and view each file in a browser window, and then just saved each page's source as a plain text doc, which I named appropriately. Stashed those in the same local directory as my chart's HTML page and then linked each file to my chart's page in its HTML. My chart sprang to life and all is well. I take it there's a better way to get a file off of GitHub, but I couldn't figure that out. Apologies for the knumbskullery, but it worked...
Whenever I try to add google geochart to my website the chart looks like this:
.
And I get an error that says #12768949' is not a valid hex color. If I try it on an empty
react project it works like on the official site.
Does someone know what the issue might be?
What I tried so far: removed bootstrap, removed my app.css file
The only time it works is when no other components are rendered...
I'm using a Django wrapper with wkhtmltopdf however I'm having the problem that regardless of the fonts I use in my CSS it always just shows a default sans-serif font. It works locally and also works on the server when I just generate the HTML without converting it to the PDF.
This is how it shows on the server in the PDF and this is how it shows locally in the PDF. The font is a custom font base64 encoded, however it doesn't matter what font I use as none make a difference.
Is it something to do with the server setup?
Anyone have any ideas?
Thanks in advance.
What's the css you're applying to the text? wkhtmltopdf has some quirks, and apparently doesn't like fallbacks (link). I was observing something similar and finally got a serif font (closest I could get to Times New Roman w/o downloading) by doing
font-family: "serif";
wkhtmltopdf only includes fonts if it finds them in the local system in /usr/share/fonts
If you use fonts like font-family: 'Liberation Sans'; ,wkhtmltopdf will correctly include them in the PDF and render them as it should.
If someone is still looking for a solution (in the current version of wkHTMLtoPDF). The solutions above didn´t solve my problem.
For me the correct solution was to add an svg-font for each font (font-type). wkHTMLtoPDF takes at least the svg. In my case, it always took the fallback font (Arial). I just converted each font and added it to my font.scss.
I hope this helps.
What I want is to create a simple circle with raphaeljs that will have the facebook's 'f' inside (this will also be used for other similar cases). The 'f' symbol will be produced by font-awesome.
What I have done (and did not work) is to set the font family using css and/or as a raphael attribute.
The code is the following:
HTML
<div id='share-facebook'></div>
CSS
#share-facebook {
font-family: FontAwesome;
}
Javascript
var canvas = Raphael('share-facebook', 100, 100);
var facebookWrapper = canvas.circle(50,50,50);
facebookWrapper.attr('fill', '#E3E3E3');
facebookWrapper.attr('stroke','none');
var facebookText = canvas.text(50,50,'');
facebookText.attr('font-size', 40);
facebookText.attr('fill', '#fff');
facebookText.attr('font-family','FontAwesome');
Here is also a fiddle to make your life easier. From what I have seen the issue is that raphaels places the character inside a tspan inside the text node and it cannot be decoded. Anyone has an idea how to overcome this issue?
use canvas.text(50,50,'\uf09a'); instead of canvas.text(50,50,''); and it works
Not really the answer you expect, but you can use Raphael free icons (http://raphaeljs.com/icons/) instead of FontAwesome. Each icon is a Raphael path you can then do:
paper.path(<icon path here>).attr({fill: "#000", stroke: "none"});
then I guess you can apply any transform, scaling, positionning as with any other path.
I did a little update on your fiddle to demonstrate http://jsfiddle.net/K6rrf/1/. I did not remove your code just added the 2 last lines...
Hope this helps a bit
Cheers
I am unable to find the right function from the google charts (Google Visualization API) that would set the text/message to be shown if no data is supplied to it/data supplied does not yield a chart(eg: all y values 0)
you can use http://modernizr.com/
try with the svg fallback ;)
if the browser doesn't support SVG you may can show an update message or convert the JSON to a table.