Develop Reference

GSAP + PaperJS position animation

I am trying to integrate it into an existing Paper.js application to replace the original .tweenTo function (http://paperjs.org/reference/tween/). The only issue I am facing so far is the "chaining" of the position or point property animations:
https://codepen.io/yevsim/pen/GRmPBZB
paper.install(window)
paper.setup(canvas);
const text = new PointText({
point: new Point(100, 100),
fontFamily: "sans-serif",
fontWeight: "bold",
fontSize: 48,
fillColor: 'black'
});
text.content = 'Move me';
const timeline = gsap.timeline();
timeline.to(text.point, { duration: 1, x: '+=100' });
timeline.to(text.point, { delay: 1, duration: 1, x: '+=100' });
For the reason unknown to me, it moves the text back to its original position before doing the second animation (i.e. instead of going from 100 -> 200 -> 300, it goes 100 -> 200 -> 100 -> 200). Chaining other properties animation e.g. width, height, color, opacity works as expected. I tried to play with replacing point with position, combining them together, but nothing worked for me.

I'm not really sure why but this will work if you store text.point into a variable and use this variable instead of a reference to the actual object when creating your timeline.
Based on your code, here a corrected version:
const text = new PointText({
point: new Point(100, 100),
fontFamily: 'sans-serif',
fontWeight: 'bold',
fontSize: 48,
fillColor: 'black',
content: 'Move me'
});
// Use a variable to reference the property to animate.
const point = text.point;
const timeline = gsap.timeline();
timeline.to(point, { duration: 1, x: '+=100' });
timeline.to(point, { delay: 1, duration: 1, x: '+=100' });

ExtJS 6 How to change the color of a sprite

How can I change the color of the drawing with a button I tried using the code below but it doesn't work, is there more efficient way of changing the color in sencha ext js like when a button is clicked a color grid will appear?
Used this example: https://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#free-paint
View
tbar: ['->', {
text: 'Color',
handler: function (button) {
var draw = Ext.getCmp('sprite');
if (strokeStyle == yellow) {
strokeStyle: new Ext.util.Color(255,255,0)
button.setText('Yellow');
} else {
strokeStyle: new Ext.util.Color(0,30,255)
button.setText('Blue');
}
}];
Component
me.sprite = surface.add({
type: 'path',
path: ['M', me.list[0], me.list[1], 'L', me.list[0] + 1e-1, me.list[1] + 1e-1],
lineWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: 'true',
strokeStyle: new Ext.util.Color(0,0,0)
});
surface.renderFrame();

Im not familiar with Ext.draw.* components but, according to the docs, to change color of a Ext.draw.sprite.Sprite you can use setAttributes() method like this:
sprite.setAttributes({
strokeStyle: color
});
To pick color you can use Ext.ux.colorpick.Field.
Here is fiddle to illustrate.

JustGauge.js Insert Comma

I am struggling to insert a comma into my JustGauge Chart.
So far I have the following code. most of it is working as expected;
window.onload = function() {
var g1 = new JustGage({
id: "g1",
value: 24692,
min: 0,
max: 30009,
title: 'Document Countdown',
titlePosition: 'above',
width: 800,
height: 800,
pointer: true,
textRenderer: function(val) {
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
gaugeWidthScale: 1.2,
noGradient: true,
customSectors: [{
color: '#32CD32',
lo: 0,
hi: 30009
}]
});
}
Fiddle https://jsfiddle.net/johnny_s/xsgpp4ng/1/
The 'textRenderer' part of the above code adds a comma to the 'value', I'm not sure how to do the same with 'max'.
I need to add a comma to the 'max' value - so it's '30,009'. When I try to add it manually the chart won't load.
Any help is appreciated.

This has been a feature request posted as request 193 and has been implemented as an extra property maxTxt in the update of February 3, 2016 and is part of release 1.2.7. Current version is 1.2.9.
Note that several features changed in version 1.2.9 compared to the version you used (1.2.2):
the structure of the customSectors: it is no longer an array. The array part is now moved into a subproperty ranges
Support for title has been removed, as this really does not belong to the "core business" of the widget; one can better control the position and style of such a title in the surrounding HTML/CSS.
There is a bug related to the noGradient setting: issue 270. The suggested fix has not been included in the latest release. Instead of tampering with the library yourself, I would suggest working around that issue by adding a customSectors.length property with a positive value.
I have included these changes also in the updated fiddle which uses version 1.2.9:
var g1 = new JustGage({
id: "g1",
value: 24692,
min: 0,
max: 30009,
maxTxt: "30,009", // <------ add this
// remove title attributes -- no longer supported
//title: 'Document Countdown',
//titlePosition: 'above',
width: 800,
height: 400, // <--- reduced to allow title to be closer to gauge
pointer: true,
textRenderer: function(val) {
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
gaugeWidthScale: 1.2,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
noGradient: true,
customSectors: { // <--- no longer an array...
ranges: [{ // <--- ... which has moved to this property
color: '#32CD32',
lo : 0,
hi : 30009
}],
length: 1 // fixes a bug
}
});
The HTML should contain the title. Something like this:
<div style="display: inline-block">
<h2 style="text-align:center;">Document Countdown</h2>
<div id="g1"></div>
</div>

Another way of doing it is add formatNumber: true when you initialize. It will format min max and value. You can also get rid of the textRenderer field.
I updated your fiddle
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: 24692, /* <-- just change this to your current value */
min: 0,
max: 30009, /* start amount */
title: 'Document Countdown',
titlePosition: 'above',
width: 800,
height: 800,
pointer: true,
formatNumber: true,
gaugeWidthScale: 1.2,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
noGradient: true,
customSectors: [{
color: '#32CD32',
lo: 0,
hi: 30009
}]
});
}

How to update current view in Highstock / Highcharts based on new Plotlines?

I have a graph, whereby users can add plotlines themselves by clicking a button. Often, those plotlines are added outside the current view of the graph, which means the user has to manually zoom out to search for the plotline they added. Is it possible for HighStock to dynamically change its current view based on added Plotlines?
Check out this example here:
http://jsfiddle.net/Ltgzwpo2/2/
If you click on the button, a plotline is added OUTSIDE of the current view, i.e. you need to zoom out to find the plotline. Is it possible for the chart to dynamically zoom out itself upon the adding of a plotline?
This is the code I use to add a plotline:
$("#button").click(function() {
chart.xAxis[0].addPlotLine({
value: Date.UTC(2015, 10, 5),
color: "green",
width: 1,
dashStyle: 'ShortDash',
label: {
text: "this appeared outside of the current view!",
align: 'left',
y: 5,
x: 3,
style: {
fontSize: "12px"
}
},
zIndex: 10
});
});

You can use axis.setExtremes() to set the visible area.
var value = Date.UTC(2015, 10, 5);
chart.xAxis[0].addPlotLine({
value: value,
color: "green",
width: 1,
dashStyle: 'ShortDash',
label: {
text: "this appeared outside of the current view!",
align: 'left',
y: 5,
x: 3,
style: {
fontSize: "12px"
}
},
zIndex: 10
});
var range = 1000 * 3600 * 24 * 30;
chart.xAxis[0].setExtremes(value - range, value + range)
example: http://jsfiddle.net/cqwk84dz/

Set maximum bar width in ExtJS 4 column chart?

I have a 250px wide column chart, it looks great when there are 10+ items in the series, but when there's only 2-3, the bars are drawn really wide, which looks somewhat odd.
_____
| |
| |
-----|-----
I can set the width in the series config:
{
style: { width: 25 }
}
This works, but the thinner bars are still left-aligned with their previous position, so they don't match up with the axis tick and label.
Like so:
_
| |
| |
-----|-----
I don't want to change the axis spacing, I want to end up with widely-spaced, 25px bars (that are correctly centered on the axis tick):
_
| |
| |
-----|-----
Any ideas?

renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Math.max(attr.x, attr.x + (attr.width - 50) / 2)
});
}

Maybe a bit to late but this is my solution
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Ext.getCmp('chart_id').axes.items[1].inflections[value][0] - 25
});
}
In this example I read the x axe and find any given point (label stripes) than I looped though my bars, you can use a count or something and use in instead of value. Hope it works!

//try like below
series:[
{...
style:{
minBarWidth:5,
maxBarWidth:5
}
},
{...}
]

I think the problem is that the chart you are looking for is Cartesian one and the column chart doesn't work for you because it hasn't any exact X value.
So, I simulate the Cartesian chart (like Line chart) to look like the column chart like this:
It's a trick somehow but it works fine for me.
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['min-X','max-X']
}, {
type: 'Numeric',
position: 'left',
fields: ['min-Y','max-Y']
}],
series: [{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line1-X',
yField: 'line1-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line2-X',
yField: 'line2-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line3-X',
yField: 'line3-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line4-X',
yField: 'line4-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
}]
And the data:
{
line1-X: 2, line1-Y: 0,
line2-X: 5, line2-Y: 0,
line3-X: 5.5, line3-Y: 0,
line4-X: 8, line4-Y: 0,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
},{
line1-X: 2, line1-Y: 40,
line2-X: 5, line2-Y: 80,
line3-X: 5.5, line3-Y: 60,
line4-X: 8, line4-Y: 100,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
}
But in this approach you have to know the maximum number of Columns(Lines) you have. And each time insert Zero(0) data to one you don't want to show. If you don't know the number of Columns(Lines) you have to create them dynamically.
This is my idea and it works the way I want it. Maybe it helps you to find your solution.

try using the "gutter" property to set the gap between the column.