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...
Related
I get "Uncaught TypeError: Cannot read properties of undefined (reading 'onClick')" for the following code:
var original = Chart.defaults.global.legend.onClick;
It worked in chart.js v2.
As of Chart.js release 3.x
global namespace was removed from defaults. So Chart.defaults.global is now Chart.defaults.
legend, title and tooltip namespaces were moved from Chart.defaults to Chart.defaults.plugins.
For further information, please consult section Defaults in 3.x Migration Guide at https://www.chartjs.org/docs/latest/migration/v3-migration.html.
I finally found the answer to my problem in the Legend documentation:
"The doughnut, pie, and polar area charts override the legend defaults. To change the overrides for those chart types, the options are defined in Chart.overrides[type].plugins.legend."
As I am working on doughnut chart, I changed the code to:
var original = Chart.overrides.doughnut.plugins.legend.onClick;
and it works.
I'm working on a presentation using xaringan, and am using a few gifs created by gganimate to illustrate some points about a model. It works great, except that once the gifs start playing they just keep playing, and sometimes they seem to start playing before I get to their slide.
I would like to be able to explicitly start and stop each gif, and the solution seems to be the giffer javascript library, but here is where I fall far short of "ninja" status. How do I install and load the giffer library for use by xaringan. I suspect it's somewhere in the YAML, possibly include, but that's as far as I've gotten
You can include javascript in the YAML by
output:
xaringan::moon_reader:
nature:
beforeInit: ["gifffer.min.js", "load.js"]
as mentioned here.
Here load.js just contains
window.onload = function() {
Gifffer();
}
but you can change the settings, styling of button etc as described in gifffer.
I am doing my first project in Foundation 6 and am having trouble getting the responsive navigation to work. I started with the basic page template that comes with Foundation (installed F6 using CodeKit) then I pasted in the responsive menu code exactly as it appears here http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-toggle but when viewed at small screen sizes, the word "menu" appears, but clicking it does nothing.
The Drilldown responsive menu also does not work -- pasted in the drilldown menu code (second example down, on the page referenced above) and what appears is a long long list of links, nothing is collapsed and nothing slides in. There must be a script missing but I have triple-checked and app.js, foundation.js and jquery scripts are loaded. What else am I missing?
First of all sorry for my bad English, did you initialize foundation's javascript?
That can be done with the following code in youre custom javascript file:
$(document).foundation();
I do it with jQuery like this:
$(document).ready(function() {
$(document).foundation();
});
for more information see: Foundation-6 documentation - initializing
and please check if you have the proper file structure for the foundation files, please see the following documentation: Foundation-6 documentation - File Structure
tl;dr: Faulty purifycss configuartion in the gulp.babel.js file.
I also had this problem. My setup:
generator-webapp
webapp's jade recipe
I can get the responsive dropdown menu to work by using the tab and enter key. This means that the relevant js files are being loaded correctly. The navigation 'burger' also does not appear.
Upon using the chrome dev tools to inspect the responsive dropdown menu example from the foundation website, I noticed that style of <button class="menu-icon" type="button" data-toggle=""></button> is being effected by the .menu-icon CSS rule from the scss partial, _menu-icon.scss. Mine wasn't. When I looked, the foundation.scss file from the app/ has the exact same style rule. The converted foundation.css was being served from the .tmp/ folder, but did not have the .menu-icon CSS rule. Then I suspected purifycss again (which I had commented out of the gulp file before and forgot to reset the gulp serve, saw no fix and thus falsely excluded the purifycss rule from the list of suspects).
I set my gulp styles task up like this:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
/*Stupidly assumed that purifycss supported jade files as src files*/
.pipe($.purifycss(['app/**/*.js', 'app/*.jade']))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
Which meant that the necessary styles were being deleted (including .menu-icon). I think I will use stylperjade or rearrange the tasks so that I can do this: .pipe($.purifycss(['app/**/*.js', '.tmp/*.jade']))\
Let me know if this was your solution as well
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
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