Related
I'm exploring Highcharts and it seems like a very comprehensive package! I have a question regarding legend colors.
I notice that when I use a linear color gradient for a line, the color next to the legend (I believe it's called the symbolColor) may or may not show up, depending on the format I use:
1) symbolColor works fine: linearGradient: [ 00, 00, 00, 350 ]
2) symbolColor doesn't show up: linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }
I'd rather use the second format; it's easier and the first is not responsive.
Should the symbolColor always show up and this is an obscure issue/bug? Or am I doing something wrong? I also just noticed that if the marker is enabled in the plotOptions for series, symbolColor works fine with the second format. But I have many data points and don't want to use markers.
The fiddle graph has two lines -- purple and green -- and while the purple symbolColor using method (1) looks fine, you'll notice that the green symbolColor using method (2) doesn't show up.
https://jsfiddle.net/jwinkle/s6d9ah17/6/
In your HTML file, add:
<script src="https://code.highcharts.com/maps/modules/map.src.js"></script>
Above your chart code add:
Highcharts.addEvent(Highcharts.Chart.prototype, 'render', function() {
this.series.forEach(function(series) {
if (series.legendLine) {
var pathDef = series.legendLine.attr('d').split(' ');
pathDef[5] = parseFloat(pathDef[2]) + 0.0001;
series.legendLine.attr({
d: pathDef
});
}
})
});
The fix is in adding a smidge to your path definition (you can test this by going into the svg path element in dev tools and changing the last number in the 'd' attribute to a float:
<path fill="none" d="M 0 11 L 16 11" ... ></path>
becomes:
<path fill="none" d="M 0 11 L 16 11.1" ... ></path>
The function above goes through each series and massages the line data adding the fractional value in the right place. Total hack. However why the line does not appear if it does have this fractional value, I don't know. I would also test this across browsers to see that it works consistently as it may not (I tested in Chrome).
Here is a somewhat related issue where I cribbed the fix: https://www.highcharts.com/forum/viewtopic.php?t=38588
(Most of it is addressing a completely different problem, but the legend lines did show up so I investigated why).
If you don't want to use the extra library, you could probably write a native js function to find the legend lines and manipulate them in the same way.
Here, you can find a nice explanation of the problem.
The difference results from the fact that Highcharts uses 'userSpaceOnUse' as a default value for gradientUnits if a gradient is defined as an array.
Highcharts source code:
// Keep < 2.2 kompatibility
if (isArray(gradAttr)) {
(colorOptions as any)[gradName] = gradAttr = {
x1: gradAttr[0] as number,
y1: gradAttr[1] as number,
x2: gradAttr[2] as number,
y2: gradAttr[3] as number,
gradientUnits: 'userSpaceOnUse'
};
}
As a possible solution, you can set gradientUnits also for linearGradient defined as an object:
color: {
linearGradient: {
...,
gradientUnits: 'userSpaceOnUse'
},
...
}
Live demo: http://jsfiddle.net/BlackLabel/yz6sagxj/
Or modify the paths very slightly so that they are not perfectly horizontal
chart: {
events: {
render: function() {
this.series.forEach(function(series) {
if (series.legendLine) {
var pathDef = series.legendLine.attr('d').split(' ');
pathDef[5] = parseFloat(pathDef[2]) + 0.0001;
series.legendLine.attr({
d: pathDef
});
}
})
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/L1kzg0cn/
Github thread: https://github.com/highcharts/highcharts/issues/1936
In addition to #Katharine's solution, here's another I discovered.
If I enable the marker in one series (setting the radius to 0) and then put the data in a second series which is linked to the previous, it works. (If I do it all in one series, there is again no legend color.)
series: [{
name: 'purple', lineWidth: 3, color: {
linearGradient: [ 00, 00, 00, 350 ],
//linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1, },
stops: [
[0, 'purple'], // start
[1, 'black'] // end
],
},
data: [ 100, 95, 80, 60, 35, 50, 20, 10, 3, 2, 30, 40, ],
},{
marker: {
enabled: true,
radius: 0,
},
name: 'green', color: 'green', lineWidth: 3,
},{
linkedTo: ':previous',
lineWidth: 3, color: {
//linearGradient: [ 00, 00, 00, 350 ],
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1, },
stops: [
[0, 'green'], // start
[1, 'black'] // end
],
},
data: [ 100, 100, 95, 80, 60, 35, 50, 20, 10, 3, 2, 30, ],
}],
Here's the "fixed" fiddle: https://jsfiddle.net/jwinkle/wztq78n1/6/
I reported the original issue as a possible bug to Highcharts, and they confirmed that it's an SVG rendering problem out of their control.
I try to understand the data in the BoxTextured Model for the TEXCOORD_0 accessor.
As seen in the capture, the datas seems correct for POSITION and NORMALS but why values in the TEXCOORD_0 accessor aren't in range of "max": [ 1.0, 1.0 ], "min": [ 0.0, 0.0 ] but have a "max": [ 6.0, 1.0 ] ?
{
"bufferView": 2,
"byteOffset": 0,
"componentType": 5126,
"count": 24,
"max": [
6.0,
1.0
],
"min": [
0.0,
0.0
],
"type": "VEC2"
}
Should those be normalized ?
My texture applied is totally wrong : Rendered with uv test texture.
Where is my misunderstanding ?
Thank you
(I know I have a problem with my face orientation but that's another problem)
The 6.0 comes from the number of faces on the cube. Note that the sampler specifies REPEAT (10497):
"samplers": [
{
"magFilter": 9729,
"minFilter": 9986,
"wrapS": 10497,
"wrapT": 10497
}
],
so the image will be tiled repeatedly. It's just a simple way to get the logo rendered on all six faces of the cube.
Edit: since I wasn't clear originally, I'm having trouble working out an AS2 inventory with stacking consumables and equippable weapons/armor, my code below is the arrays holding the values I've been working on for years but haven't figured any viable way to make work. I'm looking for help/ideas of how I can make an array hold these values and make them stack
Since about 2008, I've been working on a flash RPG. While I'm making headway, my biggest roadblock is the lack of item system which is becoming increasingly hard to create in AS2 as all of the great coders are slowly refusing to touch flash anymore. It's far too late to start over in a different language, my main file is a well over 500mb .fla
Honestly, I'd pay whoever can figure this out cause this game has a few other issues I'd like help with after this is solved. I'll throw down $50 usd to whoever can make a good item system with these reqs
Has to be able to draw from a database of different item types (consumable, weapon, armor, accessory)
Consumables must be able to "stack" (weapons, armor, accessories dont need to stack)
Consumables must be able to directly affect hp/mp values (heal and the like)
Weapons Armour acc. must have values attached to them so they can affect the character's stats when equipped (ex.strength +10 or something)
Items must be able to be bought and sold
Items must be able to be displayed in text (movieclips of each item is not really necessary)
AS2
Pretty much this below : (Final Fantasy item/inventory example)
File size is not an issue whatsoever, these items must be able to be rendered in game
Literally if possible, use Final Fantasy 7 (or any FF game) as a basis for how the item system should work. If you can get it close to that, I'll pay you immediately. This is the code I was working on...
//ITEM SYSTEM
//this array will hold all items, inside of it, hopefully to be called inside of itself
//0.......1............2........3......4.... array element values
//name, description, effect, price, item type
_global.itemlist = [
//CONSUMABLES
["Sweetroot", "Restores 50 HP", 50, 100, "consumable"],
["Sugarroot", "Restores 100 HP", 100, 500, "consumable"],
["Candyroot", "Fully restores HP", 9999, 5000, "consumable"],
["Bitterroot", "Restores 50 MP", 50, 200, "consumable"],
["Sourroot", "Restores 100 MP", 100, 600, "consumable"],
["Tartroot", "Fully restores MP", 9999, 10000, "consumable"]
];
//0.......1............2....3....4...5....6.....7. array element values
//name, description, user, str, sta, def, mst, item type
_global.weaponlist = [
//WEAPONS
["Secred", "A mysterious zanbato with seals on the blade", "azul", 50, 0, 25, 10, "weapon"],
["Illuminite", "A thin weapon with a diamond rod for focusing light", "aseru", 50, 10, 10, 50, "weapon"],
["Fists", "A bare handed attack", "malforn", 50, 0, 55, 0, "weapon"],
["Kazeshini", "An oddly shaped blade for quick attacks ", "vayle", 20, 10, 25, 10, "weapon"],
["Yamato", "A katana with a blue hilt and a lightweight blade", "aoizi", 50, 20, 35, 50, "weapon"],
["Saleria", "A heavy scythe made from chenre absorbing crystal", "laava", 50, 20, 35, 50, "weapon"]
];
//0.......1............2....3....4...5....6...7 array element values
//name, description, str, sta, def, mst, price, item type
_global.armorlist = [
["Clothes", "light clothing", 0, 10, 10, 0, 500, "armor"],
["Armor", "plated armor", 0, 20, 20, 0, 5000,"armor"],
["Chain", "a thick chain for attack or defense", 20, 10, 10, 0, 500,"armor"],
["Shawl", "thin fabric worn by women", 0, 0, 5, 10, 7000,"armor"],
["Bodysuit", "a thick full body suit", 10, 20, 20, 0, 7500,"armor"],
["Spiked Araments", "armor covered in spikes, increases attack strength", 30, 0, 20, 0, 8000,"armor"]
];
//0.......1............2....3....4...5....6...7 array element values
//name, description, str, sta, def, mst, price, item type
_global.acclist = [
["Blade Ring", "raises attack", 30, 0, 0, 0, 500,"accesory"],
["Vigor Ring", "raises stamina", 0, 30, 0, 0, 500,"accesory"],
["Shield Ring", "raises defense", 0, 0, 30, 0, 500,"accesory"],
["Chenre Ring", "raises mental", 0, 0, 0, 30, 500,"accesory"],
["Knife Ring", "greatly raises attack", 120, 0, 0, 0, 50000,"accesory"],
["Vehemence Ring", "greatly raises stamina", 0, 120, 0, 0, 50000,"accesory"],
["Aegis Ring", "greatly raises defense", 0, 0, 120, 0, 50000,"accesory"],
["Aura Ring", "greatly raises mental", 0, 0, 0, 120, 50000,"accesory"]
];
get item Name with item[0][0];
get item Description with item[0][1];
get item Effect with item[0][2];
Example : If item[0] is being addressed then... (item[0] [0] =
Secred (as Name). Then item[0] [1] = Fists (as Description), and so on. trace(item[0][4]); should trace the name Sweetroot.
I am using Skobbler map for iOS application.
Is it possible to set priority for POI category so when multiple POIs group, icon of that category be on top?
So if info icon has higher priority it should be shown in group icon instead of restaurant.
I tried to set priority tag of category in json style file but it didn't work.
From my understanding, you desire the Information POI to be made visible at a lower zoom level instead of the current Restaurant POI.
If this is the case, you can achieve this by changing which POI should remain at the lower zoom level, so when you zoom out only that specific POI will be visible.
This can be done by editing in the .json file the "zoom" which is found at the bottom of the document .
From there, you find the code snippet for your desired zoom level -for example at lvl 17, it should contain the next line "level" : 17, then you should change in the "poi":[........] array the ID of Restaurant which is 179 with the ID for Informations which is 128 and there you go, now when zooming from lvl 18 to lvl 17 from those 3 POIs only Information will be visible.
Here I will add a snippet for zoom lvl 7 (because it has less POIs,shapes,roads) to aid you when searching for the zoom level declaration in the .json file:
{
"3dzoomfactor" : 1.0,
"attribute" : [ 0, 1, 2, 10, 11, 12, 20, 40, 41, 42, 43, 44 ],
"level" : 7,
"maxFC" : [ 3, 2, 2, 2 ],
"poi" : [ 69, 211, 193, 418, 382, 383, 82, 416 ],
"road" : [ 9, 24, 13 ],
"shape" : [ 1016, 1015, 1031 ],
"worldtexture" : [ true, true, true, true ]
}
I am a bit confused by the documentation regarding the notation for point values when it comes to 3+ value charts such as HeatMap and BoxPlot.
I see that point values can be supplied as n length arrays:
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080]...
]
And that they can be config objects with additional/custom properties:
data: [{
name: 'Point 1',
color: '#00FF00',
x: 1,
y: 3
}, {
name: 'Point 2',
color: '#FF00FF',
x: 2,
y: 5
}]
But how does one use the config object notation for HeatMap/BoxPlot when the only documented value properties seem to be 'x' and 'y'?
Is there a supported property of the config object that will be interpreted as the n length array? Something like this?
data: [{
name: 'Point 1',
color: '#00FF00',
values: [1,2,3]
}, {
name: 'Point 2',
color: '#FF00FF',
values: [4,5,6]
}]
It depends on the type of chart.
For HeatMap (reference):
A heat map has an X and Y axis like any cartesian series. The point definitions however, take three values, x, y as well as value, which serves as the value for color coding the point. These values can also be given as an array of three numbers.
In other words you could do { x: 0, y: 1, value: 10 } or [0,1,10].
For BoxPlot (reference):
Each point in a box plot has five values: low, q1, median, q3 and high. Highcharts recognizes three ways of defining a point:
Object literal. The X value is optional.
{ x: Date.UTC(2013, 1, 7), low: 0, q1: 1, median: 2, q3: 3, high: 4 }
Array of 5 values. The X value is inferred.
[0, 1, 2, 3, 4]
Array of 6 values. The X value is the first position.
[Date.UTC(2013, 1, 7), 0, 1, 2, 3, 4]