I am trying to create chart as below
But not sure how to create a marker as in image
Any pointer to add custom SVG image with a letter inside will help, Thanks
You can specify the shape of series.flags by using inbuilt shapes or add it as an image.
Demo:
https://jsfiddle.net/BlackLabel/8cv1tL0g/
API Reference:
https://api.highcharts.com/highstock/series.flags.shape
You can also use Highcharts.SVGRenderer to draw any shape on the chart.
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Related
I am using draw2d javascript library for drawing predefined shapes and custom shapes in it's canvas.
As I don't have any example made yet, I am trying to copy from it's documentation but doesn't seem to find a good way to research it as it contains a whole lot of it.
Here is the circle example.
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.shape.basic.Circle
and here are some more documentation with examples.
http://www.draw2d.org/draw2d_touch/jsdoc_6/
I have premade shapes with html and css and I am trying to drag and drop and render them on canvas like these in this image. Also when dropped, they should have input and output ports too.
Is it possible to convert this html/css to draw2d shapes?
So here this is made possible via extending draw2d's SVGFigure and thus we have ability to provide custom svg to render it as a custom shape.
Below links were useful in this context.
http://www.draw2d.org/draw2d_touch/jsdoc/#!/guide/extending_svg_figure-section-live-example
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_svg
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.SetFigure
https://github.com/freegroup/draw2d/tree/master/examples/shape_labeld
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_markdown
According to this link, it is possible to modify a SVG, depending on the parameters included in the URL used to access this SVG.
Is it possible to do so using the toSVG() method ?
Let's say I create a basic canvas with a few elements. Once I'm done, I export and save the result of my canvas.toSVG() on AWS.
I get this image
Is it possible to modify the way toSVG() behaves, so that adding ?color=red at the end of the URL would make my tshirt red ?
I tried using the example from the documentation, using replace() on my canvas objects, but this generates empty SVGs.
I am new to jointjs. I am working with shapes as instances of joint.shapes.devs.Model and am trying to replace the circle, representing an in/out port with a custom image. I would like to keep the current functionality where it is possible to create a new arrow by dragging the circle, snaplinks, and the rest of the great functionality offered by JointJs. The only thing I would like to do is to replace the magnet/inPort/circle with an image. Is this possible? If so, how?
Regards
It is indeed possible. The best way would be to look at how the joint.shapes.devs.Model is defined here: https://raw.githubusercontent.com/clientIO/joint/master/plugins/shapes/joint.shapes.devs.js and create your own custom shape that has the SVG <image> element in the ports instead of the current <circle>.
I added a data layer on my map and I'm using an svg image to represent the markers.
#points {
point-file: url(marker2.svg);
marker-width:10;
marker-fill:#fff;
}
since it's an SVG image, I'm trying to customize the fill color but it is not working. marker-fill seems to only work on the markers they provide, but not on SVG images. Is this possible to do using TileMill/Mapbox ? Is it possible with the JS API ?
UPDATE
From http://mapbox.com/blog/announcing-tilemill-0.10.0/, it looks like using marker-fill should have done the trick but that's not the case. Could the problem be with my svg image ?
Solved it, looks like if you're looking to customize the marker, you need
marker-file: url(marker2.svg); instead of point-file: url(marker2.svg);
I am working on implementing a gallery, I tried GridFieldManager for this, but the images of the thumbnail are not of same size. I sneaked through the gridfieldclass but there are no methods for making the cell size of each image constant.
Is it worth to use flowfieldmnager? When I tried overriding sublayout method for the above two managers it is not giving the desired reults.
Is it possible to sublayout flowfieldmanager?
Device : Blackberry 9780, OS 6.0
The below image is the desired result I am trying to get
I advice you to use a simple FlowFieldManager. But instead of BitmapField inside it, extend a Field to do the following:
setExtent to 1/4 of the Display width in the sublayout method
draw your own focus in the border of the image
draw your own borders and draw the image in the center of the field's extent