Correct me if I'm wrong but I could have sworn chart.chartWidth used to return the exact width attribute as returned by getSVG().
I'll explain.
Say I target a div that forces a chart to render with the following as read via view source.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="270" height="300">
Now if I call chart.highcharts().chartWidth I'll get 270. Great!
But if I then call chart.highcharts().getSVG() I'll get this is an opening
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="600">
I've been using and adding to an export function that will combine multiple charts into a single and I typically need to do some scaling to get it to look nice. The scale is dependent on the originally rendered size, not the default and now it's causing a huge problem.
Shouldn't getSVG return svg representing the chart as it appears in html?
Have you tried sourceWidth or scale parameter?
Related
I have an HTML website which I am currently converting to Rails erb views.
It contains an SVG image called sprite.svg that contains all the icons for the websites.
For example an icon for search is represented this way:
<svg width="20px" height="20px">
<use xlink:href="images/sprite.svg#search-20"></use>
</svg>
And an icon for cross is represented this way:
<svg width="20px" height="20px">
<use xlink:href="images/sprite.svg#cross-20"></use>
</svg>
I am trying to import this to a rails erb views like this:
First, I added the sprite.svg image to the project this way app/assets/images/sprite.svg
And then I referenced it this way:
<svg width="20px" height="20px">
<%= image_tag('sprite#search-20') %>
</svg>
but the icon doesn't seem to show up.
Can someone help me to figure out a better way to represent this in order for all the SVG icons in the svg image to show in the rails application views. Thanks in advance.
You shouldn't use the image_tag to display the svgs in the view. In order to show them up you can either use render or a helper method to "translate" the svg and then call it in your view.
This should help: How do I display SVG image in Rails?
I have an inline svg with a filter applied to it for shadow effect on the right and buttom of the SVG .
<div id="d78" class="drag" style="width: 52px; margin: 0 auto;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 138 138" >
<defs>
<filter id="blurFilter2" y="-10" height="40" x="-10" width="150">
<feOffset in="SourceAlpha" dx="3" dy="3" result="offset2"></feOffset>
<feGaussianBlur in="offset2" stdDeviation="3" result="blur2">/feGaussianBlur>
<feMerge>
<feMergeNode in="blur2"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<rect class="rrfNode" fill="#4B4F54" x="0" y="0" width="130" height="130" style="filter: url(#blurFilter2); " />
</svg>
The container div is draggable and resizeable through jquery UI plugin . The container div has a color picker icon attached to it which when clicked displays the color palette and on choosing any color the svg rect changes to that particular color for which I have written some jquery .
Now when I resize the svg and then try to use the color picker to change color of the svg rect , the svg just disappears from view even though I can see that the svg color is getting set when I inspect the element in the Chrome browser .
The jquery code to change color is :
$(document).on('changeColor','.fa-eyedropper',function(e) {
$(this).parents(".ui-draggable").find(".rrfNode").css({ fill: color.toHex()});
});
The invisible svg reappears again after I resize the svg .
When I delete the filter this problem gets resolved . But I need to keep both the resize and the color picker along with the filter .
I suspect that it is a problem with the filter , but I cannot figure that out . After searching and trying to solve this bug for 2 days I am posing this question . Please help .
Found out the reason behind this strange behaviour . The filter id in all the svg images were the same so any change to any of the svgs would result in the shadows of other svg images disappearing along with the content of the images, in effect the image will disappear. I changed the filter ids for the svg images , such that all svgs have unique filter ids and that has solved my problem . It was a very silly mistake on my part.
I am trying to generate PDF documents server side containing data tables and charts generated by HighCharts. I am using highchart-serverside-export and iText.
I have been able to generate the documents but the chart images are grainy when printed. From what I understand, iText uses 72dpi by default when inserting an image. The correct way to get higher fidelity images is to start with a larger image and scale it down using one of the scaling functions such as scalePercent().
I can easily generate a larger chart image by passing in larger height and width parameters to Highcharts. The problem is that when you increase the dimensions of the chart, the content does not scale up (eg. font size of lables). In fact, you get more detail in some places (eg. more axis ticks). The reason this is a problem is that when you then apply the scaling down via iText, these items become very small and hard to read.
I have looked at the Highcharts API and cannot see a way to get Highcharts to scale up the contents rather than add more detail. How do I get this to work?
If the approach I am using is completely wrong, the wider question is how do I get print resolution server-side Highcharts charts? I have to use iText but am willing to try an alternative technology to do the chart rendering.
try this
exporting: {
sourceWidth: 1000,
sourceHeight: 400,
},
Link to JsFiddle
You can specify the width of the exported image using the exporting.width property.
This will not increase the size of the div or add/remove details or anything of that sort, it will simply scale the generated svg according to the specified width, maintaining the aspect ratio. Hence also scaling everything including texts etc.
exporting: {
width:2000 // or scale down to 100
}
Upscaling exported images / pdf | Highcharts & Highstock # jsFiddle
I have an SVG path like this:
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" style="fill:none;stroke:black;stroke-width:2" />
</svg>
I can render the path but can't seem to find a way to make the path animate so that it looks like it is "being draw" as if with pencil. The animate node works for single coords but not for paths.
I will eventually end up using this animation in an iPhone app either with a parser or with a UIWebView.
Try animating the 'stroke-dashoffset' (note that you need a matching 'stroke-dasharray' with it), see this example. The length of the path that needs to be computed to be able to use this successfully can be fetched via script like:
var pathlength = yourPathElm.getTotalLength()
View source on the example to see how it's done.
I tried for a long while to do this without having to add extra scripts to the header (that I have no idea of javascript didn't help), so here's the solution:
<path d="..." stroke-dasharray="">
<animate attributeName="stroke-dashoffset" from="" to="0" dur="1s" begin="0s"
onload="var length = parentNode.getTotalLength();
parentNode.setAttribute('stroke-dasharray',length+','+length);
this.setAttribute('from',length)" />
</path>
I added extra line breaks for readability here.
This is legal in SVG (although not in HTML) because the svg:animate element allows onload, which most HTML elements do not.
Once you've rendered your SVG path, to make it look like it's being drawn with a pencil, you could simply cover it all with an opaque layer, and then animate the movement of this layer along the path.
To find the CGPath along which you'll move the layer you can use this library:
https://github.com/arielelkin/PocketSVG
This will parse the SVG data into a UIBezierPath. Then:
SvgToBezier *myBezier = [[SvgToBezier alloc] initFromSVGPathNodeDAttr:#"M176.17,369.617c0,0,335.106-189.361,214.894,38.298s129.787,282.978,178.723,42.553C618.724,210.042,834.681,87.702,790,307.915" rect:CGRectMake(0,0,1024,768)];
UIBezierPath *myPath = myBezier.bezier;
CAKeyframeAnimation *mySVGPathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
bounceAnimLeft.duration = 3;
bounceAnimLeft.path = myPath.CGPath;
[myObjectToMove.layer addAnimation:mySVGPathAnimation forKey:#"pathAnimation"];
I'm trying to draw a label on a polygon of an svg file. The problem I'm facing is to find out roughly the center of this polygon to place the label, as the path's coordinates are in svg format and need to be parsed. Is there an easier way to determine the center of an svg polygon (maybe someone can point out a javascript library or a snippet)? I'm using Raphael javascript library to manipulate the svg, but it doesn't seem to go beyond the standard svg functionality.
You could try the following approximation for doing something similar to the polygon suggestion, based on SVG DOM methods:
var totalPathLength = pathelm.getTotalLength();
var step = totalPathLength / 100;
for(var dist=0; dist < totalPathLength; dist+=step)
{
var pt = pathelm.getPointAtLength(dist);
addToAverage(pt.x, pt.y);
}
I think the simplest approach is to use the center of the path element's boundingbox (pathelm.getBBox()), that's simpler than the polygon suggestion.
The simplest thing you could try doing is to calculate the center by taking the average of all the points in the polygon. It should work for all but the most irregular of polygons. I've used the same algorithm to good effect in my programs.
Best of luck.
Insert a text tag inside the svg and position it by calculating the width and hight
<svg width="447pt" height="559pt" viewBox="0 0 894 1118" version="1.1" xmlns="http://www.w3.org/2000/svg">
............
............
<text x="450" y="300" font-family="Verdana" font-size="15" fill="red" >
Text To Show
</text>
</svg>