I am trying to build a doughnut chart with Chart.js and added a text in the middle blank area. Unfortunately, when I drag my mouse over the graph, the text disappears. I found that, if I make the showTooltips: false in the options part, the text would become permanent, but I lose the labels this time.
Q1: Does anyone know how to make text permanent without losing the labels?
Q2: Does ChartNew working fine with Chrome? I heard that there are some problems with the latest chrome and opera versions.
Thank you :)
Q1: Does anyone know how to make text permanent without losing the labels?
Just extend the doughnut chart to (always) draw your middle text after the chart draw is complete. Something like
Chart.types.Doughnut.extend({
name: "DoughnutAlt",
draw: function(){
Chart.types.Doughnut.prototype.draw.apply(this, arguments);
this.chart.ctx.font = Chart.helpers.fontString(14, "normal", "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif");
this.chart.ctx.fillStyle = "Black";
this.chart.ctx.textAlign = "center";
this.chart.ctx.textBaseline = "middle";
this.chart.ctx.fillText("Hello World!", this.chart.width / 2, this.chart.height / 2);
}
});
Fiddle - http://jsfiddle.net/upbcbyfb/
Q2: Does ChartNew working fine with Chrome? I heard that there are
some problems with the latest chrome and opera versions.
A cursory (titles only :-)) glance of the GitHub issue list (https://github.com/nnnick/Chart.js/issues?utf8=%E2%9C%93&q=milestone%3Av2.0+) does not show anything specific to Chrome or Opera.
If there is something specific you want to try out, you can always fiddle your code into the latest (awesomely customizable) version (you have to make a few changes though)
Here is a fiddle to get you started - http://jsfiddle.net/beehe4eg/
That said, the current v2.0.0 (alpha 3) is a pre-release version (see
https://github.com/nnnick/Chart.js/releases), so you probably don't want to switch your production code to this right now.
Related
The default behavior of fabricJS resizefilters makes images look great as long as the zoom level is set to 1.0. This means images with a resizefilter look pixelated when zoomed in, as well as when exporting the canvas with a multiplier. Is there a way for resizefilters to take into account the current canvas zoom level or toDataURL multiplier?
https://jsfiddle.net/melchiar/mh9ba4pz/
fabric.Image.fromURL(imageData, function(img) {
img.set({
left: 10,
top: 10
}).scale(0.5);
img.resizeFilter = new fabric.Image.filters.Resize({
resizeType: 'hermite'
});
img.applyResizeFilters();
canvas.add(img);
});
Hi i have seen your question on the issue tracker too, as of now there is no simple way to obtain it with the resize filter.
The only way to make it non pixellated is to remove at export time the resizeFilter and add one resizeFilter in the normal filter chain with a precalculated ratio.
This is actually a bug.
issue tracker: https://github.com/fabricjs/fabric.js/issues/5071
Just an update on this question, this issue was a bug that was fixed with Version 2.3.4. Using a resizefilter will now apply resizing based on the current zoom level, and works with toDataURL multipliers as well.
I'm using OSD to display a few pages from a PDF. Each page is lined up one on top of the other.
I'd like the viewer to start at the top of the image, zoomed to fit. I've played with various settings, but what seems to work for one image of three pages, doesn't work for another image of five. I can get close to what I want with this command:
viewer.viewport.panTo(new OpenSeadragon.Point(.5, .5));
viewer.viewport.zoomTo(1);
But I'll be honest that I don't quite understand what that means, and I have no idea how to set this as the "home" bounds. I've been through the documentation several times, but this escapes me.
Appreciate any guidance!
Rather than using panTo and zoomTo, I recommend using fitBounds instead. You'll want to base it off of the aspect ratio of your viewer so the result is snug. Something like so:
var oldBounds = viewer.viewport.getBounds();
var newBounds = new OpenSeadragon.Rect(0, 0, 1, oldBounds.height / oldBounds.width);
viewer.viewport.fitBounds(newBounds, true);
The true in the fitBounds is to make it snap there immediately instead of animating.
I am working on an educational tool that mainly uses the D3js library. To make parts of my code reusable, I want to put as much code as possible inside a constructor, so that I can work with instances of that constructor. However, a very weird bug shows up when I try to update parts (for instance the border-color) of the graphic: only a small part of the border changes color and, for extra weirdness, the rest of the border changes when I switch to a different in my browser and then come back.
This jsfiddle shows the problem. Upon loading the canvas border is black. When "Red"/"Blue" is clicked, the border should turn red/blue. In Firefox this works fine, but in both Chrome and Safari only a small part of the border changes color…
The code I use is the following:
var Canvas = function(B, H){
this.canvas = d3.select("#holder").append("svg:svg").attr("width",B).attr("height",H)
.style({'border':'5px solid black'});
this.red = function(){this.canvas.style({'border':'5px solid red'});};
this.blue = function(){this.canvas.style({'border':'5px solid blue'});};
}
var Canvas1 = new Canvas(200,70);
Click "Red"/"Blue" class the red/blue functions that should change the color:
$("#red").click(function(){Canvas1.red();});
$("#blue").click(function(){Canvas1.blue()});
Since this works fine with Firefox I suppose the problem has something to do with the Webkit, but I have no idea how to fix it…
Any help is much appreciated!
I've been using gRaphaël charts for a few weeks now, and every now and then I get some weird issues. A recurring theme is that the pie chart legend labels all get squish together in the wrong places. Picture > words:
The chart is created as you would expect, in this case:
var r = Raphael(domNode, 300, 120);
this.chart = r.piechart(55, 55, 50, [75, 25],
{
colors: [
"000-#d00-#900",
"000-#3a3-#070"
],
legend: ["Building", "Tertiary Education"],
legendpos: "east"
});
I then do some more basic styling, but turning that off doesn't help. The problem is clearly visible in the <svg> node (the text and circle nodes share overlapping positions), but I don't know where it comes from or why, and it only happens sometimes; other charts work just fine. There's nothing on the forums or issue tracker either, though I just realised I should probably ask there instead/as well.
Using Raphaël 2.1.0 and g.Raphael 0.51.
I have found the following blog post which deals with this exact problem. If the pie chart is rendered in an initially hidden element, gRaphael has problems to compute the positions properly resulting in this stacked legend:
So the solution is to render the facebox partial first, after the
facebox is shown, then you execute the Raphael Javascript. In other
word, make sure you generate the chart when the chart container is
there and not hidden!
I have solved this by moving the create pie chart function from the jQuery document ready directive to the on click event that will make the hidden elements visible.
Try to define your legend as following
{ legend: ["Building", "Tertiary Education"] , legendpos: "east"}
Its the only difference taht I could find between your and my working jsfiddle
I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.
Example:
archived: http://www.todospelaeducacao.org.br/
archived: http://code.google.com/p/svg2imap/
So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.
If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.
jQuery plugin for decorating image maps (highlights, select areas, tooltips):
http://www.outsharked.com/imagemapster/
Disclosure: I wrote it.
Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
A couple of options if you need something more advanced:
http://jqvmap.com/
http://jvectormap.com/
http://polymaps.org/
I think it's better to divide my answer to 2 parts:
A-Create everything from scratch (using SVG, JavaScript, and HTML5):
Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
(I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)
Add mouseover and click events to your polygons one by one
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"
onmouseover="mouseOverHandler(evt)"
onclick="clickHandler(evt)" />
Add a handler for each event in your JavaScript code and add your desired code to the handler
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server
B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):
Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.
Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:
Clickable CSS Maps
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]
Here's what I ment (of course you can put it before instead of the ):
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
Go to SVG to Script
with your SVG the default output is the map in SVG
Code which adds events is also added but is easily identified and can be altered as required.
I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.
I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.
Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea
It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.
You can also specify how many zones can be selected at the same time.
The following code may help you:
$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
alert($(this).attr("id"));
});
Source
You have quite a few options for this:
1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...
2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).
[disclaimer] Im the author of clickablemapbuilder.com :)
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
strong text