Since i included the for loop i get this error: Warning: Uglification failed.
Unexpected token: punc (.).
This is the js code that im trying to build:
chart: {
type: 'column',
events: {
load: function () {
for (i = 0; i <= captionLabel.length; i++) {
var label = this.renderer.label(captionLabel[i]);
}
.css({
width: '400px',
fontSize: '9px'
})
.attr({
'r': 2,
'padding': 5
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 20, // offset
verticalAlign: 'bottom',
y: 0 // offset
}), null, 'spacingBox');
}
},
marginBottom: 120
},
Any idea why i get this error when i try to build this file?
You have .(dot) right after closing }, which throws error. Try following code
chart: {
type: 'column',
events: {
load: function () {
for (i = 0; i <= captionLabel.length; i++) {
var label = this.renderer.label(captionLabel[i]);
label.css({
width: '400px',
fontSize: '9px'
})
.attr({
'r': 2,
'padding': 5
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 20, // offset
verticalAlign: 'bottom',
y: 0 // offset
}), null, 'spacingBox');
}
}
},
marginBottom: 120
}
Related
I'm using rappidjs 3.2 and I'm trying to make a stencil shape that changes shape when I drop it to the paper. For testing purposes I want to just print in the console the type of shape throught dragEndClone (As far as I understood from documentation this is what I need to use).
Stencil :
var stencil = new joint.ui.Stencil({
paper: paper,
scaleClones: true,
width: 240,
groups: {
myShapesGroup1: { index: 1, label: 'My Shapes' }
},
dropAnimation: true,
groupsToggleButtons: true,
search: {
'*': ['type', 'attrs/label/text']
},
layout: true, // Use default Grid Layout
dragEndClone: function (el) {
console.log(el.get('type'));
}
});
document.querySelector('.stencil-container').appendChild(stencil.el);
Shape :
joint.dia.Element.define('standard.Rectangle', {
attrs: {
body: {
refWidth: '100%',
refHeight: '100%',
strokeWidth: 0,
stroke: '#000000',
fill: {
type: 'linearGradient',
stops: [
{ offset: '0%', color: '#FEB663' },
{ offset: '100%', color: '#31D0C6' }
],
// Top-to-bottom gradient.
attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' }
}
},
label: {
textVerticalAnchor: 'middle',
textAnchor: 'middle',
rx: '1%',
refX: '50%',
refY: '50%',
fontSize: 14,
fill: '#333333',
text: 'Siemans'
}
}
}, {
markup: [{ tagName: 'rect', selector: 'body' }, { tagName: 'text', selector: 'label' }]
});
Add shape to stencil :
stencil.render().load({ myShapesGroup1: [{ type: 'standard.Rectangle' }] });
The code previously shown gives me this error :
rappid.js:50779 Uncaught TypeError: Cannot read property 'getBBox' of undefined
at child.drop (rappid.js:50779)
at child.onDragEnd (rappid.js:50638)
at HTMLDocument.dispatch (jquery.js:5429)
at HTMLDocument.elemData.handle
dragEndClone needs to return an element.
dragEndClone: function (el) {
console.log(el.get('type'));
return el.clone();
}
I have to add an number in space behind the chart. Something like this
Here is the Fiddle
Here is my code
title: {
text: title,
align: 'left',
x: 10,
style: {
color: '#000000',
fontSize: '20px',
fontWeight: '600',
lineHeight: '29px'
},
},
subtitle: {
text: subtitle,
align: 'left',
x: 10,
style: {
color: '#4A4A4A',
fontSize: '14px',
},
y: 50,
},
How I can I do this?
You can add text using Highcharts.SVGRenderer.text. Check the code and demo posted below.
Code:
chart: {
type: 'areaspline',
width: 300,
height: 275,
events: {
load: function() {
var chart = this,
number = 853;
chart.renderer.text(number, 50, 70)
.css({
color: '#8b8bff',
fontSize: 26,
fontWeight: 'bold'
})
.add()
.toFront();
}
}
}
Demo:
http://jsfiddle.net/BlackLabel/kqay3e7g/1/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
Is it possible to render charts and animate them step by step?
Right now I got three area-datasets in my chart which I need to animate step by step. Dataset/area 1 shall start and after this is finished, Dataset/area 2 need to start and then 3.
I cannot find an option for that, is this even possible with Highcharts?
Right now the Animation goes from left,bottom to right,up - is there an option for an animation direction? I want to start the animation from the full width (fully expanded on the xAxis) to go upwarts the yAxis.
My Options:
var $chart = $('#chart');
var chart = new Highcharts.Chart({
chart: {
renderTo: $chart[0],
type: 'area',
style: {
fontFamily: 'Arial, sans-serif'
}
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'bottom',
itemMarginBottom: 15,
borderWidth: 0,
itemStyle: {
color: '#9a9a9a',
fontWeight: '300',
fontSize: '16px',
useHTML: true,
}
},
title: false,
xAxis: {
categories: ['0', '5', '10', '15', '20', '25', '30'],
lineColor: '#9a9a9a',
minTickInterval: 5,
title: {
text: 'Years',
style: {
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
},
labels: {
style: {
color: '#9a9a9a',
fontSize: '14px'
}
}
},
yAxis: {
min: 0,
tickAmount:5,
minorTickInterval: 0,
minorGridLineColor: '#9a9a9a',
gridLineWidth: 1,
maxPadding: 0.1,
title: {
text: 'Eur',
style: {
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
},
labels: {
format: '{value:,.0f}',
style: {
color: '#9a9a9a',
fontSize: '14px'
}
}
},
tooltip: {
backgroundColor: '#FCFFC5'
},
plotOptions: {
series: {
borderWidth: 0,
pointPadding: 0.2,
groupPadding: 0,
style: {
color: '#000',
fontSize: '16px',
fontWeight: '300'
}
}
},
series: [
{
name: '2',
legendIndex: 2,
color: '#83bd3f',
animation: {
duration: 3000
},
data: [1042,
2128,
3259,
4438,
5666,
6946,
7652
]
},
{
name: '1',
legendIndex: 1,
color: '#24356d',
animation: {
duration: 2000
},
data: [1024,2073,3146,
4246,
5372,
6525,
7705
]
},
{
name: 'Eingezahlte Rate',
legendIndex: 0,
color: '#9a9a9a',
animation: {
duration: 1000
},
data: [
1000,
2000,
3000,
4000,
5000,
6000,
7000
]
}
]
});`
Thanks
You can use series.afterAnimate event in which you can fire animation for another series.
In your first series set afterAnimate like this:
events: {
afterAnimate: function () {
this.chart.get('1').update({
visible: true,
animation: {
duration: 2000
},
events: {
afterAnimate: function () {
this.chart.get('2').update({
visible: true,
animation: {
duration: 3000
}
})
}
}
})
}
},
For the other series, initially you can disable animation or/and set their visibility to false:
series: [{
name: '2',
id: '2',
legendIndex: 2,
color: '#83bd3f',
animation: {
duration: 0
},
visible: false,
To change the direction of the animation you need to wrap series.animate
method and change how the clipping rect is animated.
(function(H) {
H.wrap(H.seriesTypes.area.prototype, 'animate', function(proceed, init) {
var series = this,
chart = series.chart,
clipRect,
animation = H.animObject(series.options.animation),
sharedClipKey,
newH;
if (init) {
return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
} else {
sharedClipKey = this.sharedClipKey;
clipRect = chart[sharedClipKey];
if (clipRect) {
clipRect.attr({
y: chart.plotSizeY,
height: 0,
width: chart.plotSizeX
}).animate({
y: 0,
height: chart.plotSizeY
}, animation);
}
if (chart[sharedClipKey + 'm']) {
chart[sharedClipKey + 'm'].attr({
y: chart.plotSizeY,
height: 0,
width: chart.plotSizeX + 99
}).animate({
y: 0,
height: chart.plotSizeY
}, animation);
}
// Delete this function to allow it only once
series.animate = null;
}
});
})(Highcharts)
example: http://jsfiddle.net/0esjvmgL/
I use jointjs / rappid.
I would like to change the attributes of a port (e.g. the color of the inPort: in0_2) when the cell is moved. How can I get access to these attributes?
Example of a cell: http://www.epro.de/exchange/virtual-reality/jointjs/celltest.jpg
I guess it's easy - I have tried different ways but can't find a solution.
Any hints?
I use the following code to create the cell and the ports.
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper-container'),
width: 1000,
height: 1000,
gridSize: 10,
drawGrid: true,
model: graph,
});
var l_st0 = myShapes ();
l_st0.set ('inPorts',(['in0_1', 'in0_2']));
l_st0.set ('outPorts',(['outx']));
l_st0.attr ('.label/text','MinTest');
l_st0.position (100,100);
graph.addCell(l_st0);
l_st0.on ('change:position', function() {
console.log (" change port color ");
});
function myShapes (){
joint.shapes.devs.GenericBasic = joint.shapes.devs.Model.extend({
portMarkup: '<rect class="port-body"/>',
defaults: joint.util.deepSupplement({
type: 'devs.GenericBasic',
inPorts: [],
outPorts: [],
attrs: {
'.label': {
'ref-x': .5,
'ref-y': 5,
'font-size': 12,
'text-anchor': 'middle',
fill: '#000'
},
'.body': {
'ref-width': '100%',
'ref-height': '100%',
stroke: '#000'
}
},
ports: {
groups: {
'in': {
attrs: {
'.port-label': {
'font-size': 12,
'text-anchor': 'start',
x: -10,
fill: '#000000'
},
'.port-body': {
stroke: '#000000',
'text-anchor': 'start',
x:-20,
width: 20,
height: 0.5
}
},
label: {
position: {
name: 'right',
args: {
y: 0
}
}
}
},
'out': {
attrs: {
'.port-label': {
'font-size': 12,
fill: '#000',
'text-anchor': 'start',
x: -40
},
'.port-body': {
stroke: '#000000',
width: 20,
height: 0.5
}
},
label: {
position: {
name: 'right',
args: {
y: 0
}
}
}
}
}
}
}, joint.shapes.devs.Model.prototype.defaults)
});
joint.shapes.devs.GenericModelView = joint.shapes.devs.ModelView;
var mx = new joint.shapes.devs.GenericBasic ({
size: { width: 80, height: 100 },
attrs: {
rect: {
stroke: 'black',
'stroke-width': 1
},
}
});
return mx;
}
I solved it this way - like it is described in the jointjs documentation.
l_st0.on ('change:position', function() {
//optimization is missing
var l_portsIn = this.get ('inPorts');
if (l_portsIn.length>0){
this.portProp (l_portsIn[0],'attrs/rect',{stroke: 'red' });
}
}
I am trying to create a donut chart but the problem is its overlapping with legends which is causing an issue. i want it to move a bit upward .
Javascript :
$('#divCustomerServicePieChart').highcharts({
chart: {
type: 'pie'
},
//colors: [
// '#4572A7',
// '#AA4643'],
tooltip: {
valueSuffix: '',
enabled : false
},
title: {
text: '',// retJson.Title,
margin : 0
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom',
align: 'left',
floating: true,
enabled: true,
labelFormatter: function () {
return this.name;
}
},
plotOptions: {
pie: {
borderColor: '#ffffff',
borderWidth: '4px',
innerSize: '60%',
size: '100%',
dataLabels: {
enabled: true, distance: -20, color: 'white',
formatter: function () {
return this.point.y;
}
}
// ,columns: { colorByPoint: true }
}
},
series: retJson.d.Series,
},
function (chart) { // on complete
var xpos = '50%';
var ypos = '30%';
var circleradius = 55;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: 'red',
}).add();
// Render the text
chart.renderer.text('<span style="color: white;font-weight:bold;">' + retJson.d.CenterText + '</span>', 80, 150).css({
width: circleradius * 2,
fontSize: '25px',
textAlign: 'center'
}).attr({
zIndex: 999
}).add();
chart.attr({ transform: "translate(200,40)" });
});
Set center, for example:
plotOptions: {
pie: {
borderColor: '#ffffff',
borderWidth: '4px',
innerSize: '60%',
size: '100%',
center: ['50%', '30%'], // set center
dataLabels: {
enabled: true, distance: -20, color: 'white',
formatter: function () {
return this.point.y;
}
}
// ,columns: { colorByPoint: true }
}
},