So I recently found a neat tool called Patternizer (maybe you've heard of it) which has an easy to use interface that creates patterns, which you can then instantly get the code for and use along with their js library.
So to properly use the library and the given code it requires a canvas element, so to make things easy I took their example element and id: <canvas id="bgCanvas"></canvas> and put that right after my header end tag.
The javascript for the simple pattern I created is:
bgCanvas.patternizer({
stripes : [
{
color: '#000000',
rotation: 315,
opacity: 50,
mode: 'normal',
width: 3,
gap: 98,
offset: 123
},
{
color: '#000000',
rotation: 45,
opacity: 50,
mode: 'normal',
width: 3,
gap: 98,
offset: 123
},
{
color: '#0d050a',
rotation: 25,
opacity: 60,
mode: 'normal',
width: 100,
gap: 100,
offset: 156
},
{
color: '#0d050a',
rotation: 335,
opacity: 60,
mode: 'normal',
width: 100,
gap: 100,
offset: 156
}
],
bg : '#231d1d'
});
Now. It works, however I noticed the canvas element is extremely small:
As you can see, the canvas (in the top left) is much too small. So my first instinct was to change it's CSS to: canvas {width: 100%; height: 100%; to which I further added: z-index: -1;position:absolute;}
however heres what I got next:
As you can see the canvas is much bigger, however, the pattern has simply blown up and loses it's previous scale and quality. Is there a simple fix to this in CSS I'm missing? Please help!
Thanks,
-- micoxion
I think you need to specify the canvas height and width in the html of the element like stated on the patternizer docs.
https://info.patternizer.com/docs/
If what you need is a nice simple pattern i would recommend using a CSS only solution like the one found on http://lea.verou.me/css3patterns/
Using js and a canvas for this is too much trouble.
EDIT: If you are using those patterns i recommend passing the code through https://autoprefixer.github.io so it has the correct prefixes and works in all browsers.
You can learn more about css patterns and techniques at https://css-tricks.com/stripes-css/
Related
So I am trying to implement an "Import Graph" feature to my JointJS app. All of the elements I am working with inherit from devs.Model such that,
var myCustomShape = new joint.shapes.devs.Model();
These shapes include custom attributes on top of devs.Model that include sub-objects and function attributes.
Importing my graph with JSON.parse results in Error:
joint.js:13580 Uncaught Error: dia.ElementView: markup required
at child.renderMarkup (joint.js:13580)
at child.render (joint.js:13616)
at child.protoProps.render (joint.js:9692)
at child.renderView (joint.js:17645)
at child.resetViews (joint.js:17691)
at triggerEvents (backbone.js:370)
at triggerApi (backbone.js:356)
at eventsApi (backbone.js:155)
at child.Events.trigger (backbone.js:346)
at triggerEvents (backbone.js:371)
I read on the JointJS docs:
Keep in mind the general limitations of the JSON format. Some commonly used >native JavaScript data types (including Function, Date, and undefined) are >not supported. The variables that have values of these types will not be >persisted. Among other things, this means that if persistence is important in >your application, you should choose to define custom element/link subtypes >instead of embedding custom functions into default joint.dia.Element and >joint.dia.Link types.
Additionally, if you want to make use of the JSON objects and directly store >them into MongoDB, you should remember its additional restriction on object >keys starting with the . (dot) or $ (dollar sign) symbols. Those are reserved >for internal use of the MongoDB system. This is significant in the context of >JointJS because it precludes the use of CSS-style selectors in the attrs >arrays of your Elements and Links. Therefore, if persistence is important to >you and you want to save data directly to MongoDB, you should always define >custom subelement selectors in the markup of your custom elements instead of >relying on CSS-style selectors.
I am wondering if there are any known work arounds here that I can use to save my graph along with all of my custom elements. Please be gentle, this is my first javascript app, first time working with JSON and first time working with JointJS.
I have answered my own question.
If you inherit from a shape without extending it, there is no need for any markup in your declaration of your new shape. Here is the old way of declaring a shape that I was using:
OLD CODE DON'T USE THIS
var myCustomShape = new joint.shapes.devs.Model({
position: { x:50, y:50 },
size: { width: 75, height: 75 },
inPorts: ['Input'],
outPorts: ['Output'],
attrs: {
'.label': {
text: 'Source',
fill: 'black'
},
rect: {
fill: 'springgreen'
}
},
type: 'custom.myCustomShape'
});
So I switched over to extending the devs.Model shape and then make a new of my type like so:
NEW WORKING CODE :)
joint.shapes.custom.myCustomShape = joint.shapes.devs.Model.extend({
markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><image/><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
defaults: joint.util.deepSupplement({
type: 'custom.myCustomShape',
size: { width: 75, height: 75 },
rect: {
stroke: '#d1d1d1',
fill: 'white'
},
circle: {
stroke: 'gray'
},
'.label': {
text: 'Base',
'ref-y': -20
},
'.inPorts circle': {
fill: '#c8c8c8'
},
'.outPorts circle': {
fill: '#262626'
},
}, joint.shapes.devs.Model.prototype.defaults)
});
And is used by:
var customShape= new joint.shapes.custom.myCustomShape({
attrs: {
'.label': {
text: 'My Shape',
fill: 'black'
},
rect: {
fill: 'springgreen'
}
},
position: { x: 50, y: 50 },
size: { width: 75, height: 75 }
});
graph.addCell(customShape);
When exporting and importing graphs with shapes declared like this, everything works properly.
Is there a way to side scroll (I mean, on x axis) eCharts graph bar? I have a huge amount of data that needs to be displayed, so it cannot "fit" only browsers width, because the whole graph will be very hard to read (Every column loses on width).
My echarts version: ^4.0.4
My chart
You can add the attribute called dataZoom inside the object called options then pass this obj to the .setOption.
dataZoom: [
{
show: true,
start: 94,
end: 100
},
{
type: 'inside',
start: 94,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
I saw this example but i don't know what you want precisely.
https://ecomfe.github.io/echarts-examples/public/editor.html?c=mix-zoom-on-value
I found this example that can help you:
Bar Chart with scrolling options
Here I have referred the open source javascript graph library for your slider chart requirement.
Plotly.js
I'm trying to plot a quite huge network (i.e., ~1k nodes and ~1k edges) with vis.js 4.21.0. Here is my options object:
var options = {
autoResize: true,
height: '400px',
clickToUse: false,
layout: {
hierarchical: {
direction: 'UD',
sortMethod: 'directed',
}
},
physics: {
stabilization: false,
barnesHut: {
gravitationalConstant: -80000,
springConstant: 0.001,
springLength: 200
}
},
nodes: {
shape: 'dot',
size: 20,
font: {
size: 15,
color: '#ffffff'
},
borderWidth: 2
},
groups: groups,
};
The problem is that it takes up to 4 minutes to render (see this simplified JSFiddle). In this example, much huger than the mine, the network is rendered almost instantaneously.
How can I speed up the rendering process of my chart?
Wait, your fiddle doesn't have all the options you mention in your post. For instance, the network is not shown at all before several minutes passes, but if you add physics: { stabilization: false } it is shown at once (although it is not static at that point and slowly relaxes). Moreover, adding barnesHut: { ... } to physics and adjusting springConstant changes the speed of relaxation.
But here's a tricky part: compare the unrelaxed tree (with stabilization: false) that you have with vis.js 4.21.0 and the one that you get with 4.19.1! It looks much nicer:
than this mess:
This was reported earlier and probably deserves more digging but what I can say for sure is 4.19.1 makes the initial tree much nicer to see stuff even before getting relaxed. With this version you can even go physcis: false and get this:
I'd consider using this approach although it has drawbacks:
the version with physics suffers from that to some extent too, so...
I am trying to change the default shadow color (when hovering over a bunch of bars for example: https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-label-rotation)
Focusing on this example on this code part:
option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}, .......
..............................
............................................
the type variable has 3 options as stated in the documentation:
https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.tooltip.axisPointer.type
but I couldn't find anything that can control the color of the shadow.
I want it in a much lighter gray color than it is by default.
Is there any other way to set the shadows color?
I have been exploring echarts.js for a while.. and sadly, except of the fact that all charts graphics are amazing, unfortunately - I find more cons than pros :(
Try this:
axisPointer.shadowStyle.color
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // color at 0% position
}, {
offset: 1, color: 'blue' // color at 100% position
}],
globalCoord: false // false by default
}
It is given in their documentation. Check this out: https://ecomfe.github.io/echarts-doc/public/en/option.html#axisPointer
I would like to get shadow like effect in line graphs in Highcharts. I searched for this property but couldn't find it anywhere.
This can be done by using the shadow property, like this:
plotOptions: {
series: {
shadow: {
color: 'red',
offsetX: 0,
offsetY: 5,
opacity: 0.2,
width: 5
}
}
},
Working example: http://jsfiddle.net/ewolden/zfscoz4f/2/