In this case i'm using JIT Hypertree. I am going to differentiate a node's color from the other's so that every node on the tree have their own color. Is there anyway to change the individual color so it would be different from other node?
I just managed to change the color of all nodes, but not individual.
Node: {
dim: 9,
color: "#009933"
},
You have to set the overridable property to true there on Node.
Node: {
dim: 9,
overridable: true
},
Then, after loading data and before drawing, iterate over the nodes and use setData to set the individual colors. Here's an example that uses random colors, but you could also plug colors into your JSON data and pull it from there:
ht.graph.eachNode(function(node) {
node.setData('color', "hsl("+Math.random()*360+",100%,50%)");
});
Now, shameless plug: I wrote a library to generate colors based on, say, IDs. So if you don't want to handpick colors and you want the colors to have a persistent relation to the data, it would help. Here's the example of using that.
ht.graph.eachNode(function(node) {
node.setData('color', $.fn.autumn.getColor(node.id));
});
Related
I'm using Echarts v5.2.2 (in an Angular project, with ngx-echarts) to render a line chart using multiple series. I have a listener for the 'highlight' event. This event is giving me an object with a batch of seriesIndex and dataIndex but it doesn't provide the color of each series.
Is there a way to get the colors that were dynamically assigned by echarts?
This is what I'm trying to implement:
Listen when the mouse pointer snapped into a graph line point.
Doing this via this.chartInstance.on('highlight', this.handleShowTip);.
Use the batch of seriesIndex & dataIndex where the mouse pointer snapped to render a table using color, x & y value as columns (the table is placed outside the graph.
I understand that I could use the tooltip's formatter option with a callback function which will provide the series colors in its arguments... and I could broadcast these arguments outside my graph component to render what I need anywhere I want, but this does not feel correct (a formatter is aimed to return HTML or string) and I wonder if there's a better way to get the generated series colors.
Thank you!
The Echarts uses a built-in palette based on the theme. The easiest way to get a set of colors is this:
myChart.getOption().color
To get the colors that are mapped to the series, you can do the following:
myChart.getModel().getSeries().map(s => {
return {
seriesIndex: s.seriesIndex,
seriesColor: myChart.getVisual({
seriesIndex: s.seriesIndex
}, 'color')
}
})
And the result will be something like this:
[
{
"seriesIndex":0,
"seriesColor":"#5470c6"
},
{
"seriesIndex":1,
"seriesColor":"#91cc75"
},
{
"seriesIndex":2,
"seriesColor":"#fac858"
},
{
"seriesIndex":3,
"seriesColor":"#ee6666"
},
{
"seriesIndex":4,
"seriesColor":"#73c0de"
}
]
I'm developing an application where I'm using apex charts to create a brush chart. However, I want my brush to control multiple charts instead a single one, as the example shows.
Before I start working with callbacks I'm wondering if there is an easy-way of make this work with that library, for example by passing an array of targets:
brush:{
target: 'chart2',
enabled: true
},
Thanks in advance,
I think this might be undocumented, but apparently apexcharts lets you define this:
brush: { enabled: true, targets: ['candles', 'candles_2nd'] },
I found in the lib-code that it actually handles it like this:
var targets = w.config.chart.brush.targets || [w.config.chart.brush.target]; // retro compatibility with single target option
Regards,
Jim
There are many beautiful charts on Geographical Maps that can be drawn with AmCharts JS library as in https://www.amcharts.com/demos/#javascript-maps
However, I was wondering if it is possible to create a Custom Map. For example, I want to create a Global map with all Color-coded countries, but want to show US and Canada as one individual Country without any intermediate boundary between them. All other Countries should remain same.
Really appreciate for any pointer on above direction.
Thanks,
With amCharts v4, we have switched to using GeoJSON for our maps.
While I'm sure there's some kind of way to merge geographical polygons using mapshaper, I haven't tried it out myself yet and have been getting comfortable using the free software, QGIS.
There's already a tutorial out there on merging polygons if you're interested. I'll give a quick, specific rundown here anyway.
Download & install QGIS, then go ahead and grab the latest version of amCharts v4 worldLow.json (or worldHigh.json if you want more detail), in this case I've used worldLow.json:
https://github.com/amcharts/amcharts4-geodata/blob/master/dist/script/json/worldLow.json
Raw file:
https://raw.githubusercontent.com/amcharts/amcharts4-geodata/master/dist/script/json/worldLow.json
Make a copy of the .json file or otherwise rename it, it will be overwritten in the steps below.
Open QGIS and start a new project
Menu: Layer -> Add Vector Layer -> Source(s) -> Vector Dataset(s): Choose above file -> Add
Enable editing on the layer by either: Clicking pencil icon, Menu: Layer -> Toggle Editing, or in the bottom left Layers panel right click the layer and select Toggle Editing in the context menu
Menu: Edit -> Select -> Select feature(s)
Select the US and Canada polygons.
Menu: Edit -> Merge selected features (near the bottom)
Save your project, save layer edits, now your json file will be updated.
It should look something like this:
https://gist.github.com/notacouch/485b8525a360c15690f1ab23cbf04940
Now to refer to this in your map, you can do so via:
// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.geodataSource.url = "https://gist.githubusercontent.com/notacouch/485b8525a360c15690f1ab23cbf04940/raw/e6742c279571ae02166027817351a4250b1bea69/worldLow--canadia.json";
In addition, you can generate a new color per country by using the default ColorSet, e.g.
// Have amCharts generate a new color for each mapPolygon once they're available
//
// Learn more about Event Listeners:
// {#link https://www.amcharts.com/docs/v4/concepts/event-listeners/}
polygonSeries.events.on("datavalidated", function() {
polygonSeries.mapPolygons.each(function(polygon, index) {
// Learn more about ColorSets:
// {#link https://www.amcharts.com/docs/v4/concepts/colors/#Color_sets}
polygon.fill = chart.colors.getIndex(index);
});
});
// Create hover state and set alternative fill color
//
// Learn more about States:
// {#link https://www.amcharts.com/docs/v4/concepts/states/}
var hs = polygonTemplate.states.create("hover");
// Darken the polygon's current color
//
// Learn more about Adapters:
// {#link https://www.amcharts.com/docs/v4/concepts/adapters/}
hs.adapter.add("fill", function(fill) {
return fill.brighten(-0.2);
});
Here's a demo with all that thrown together:
https://codepen.io/team/amcharts/pen/abd95bebcfb65a74d9472043d63351fc
That's probably undesirable, you can also color via data binding, or via a heat map.
For customizing maps in v4 in general, I recommend checking out our guide on Creating custom maps. Between mapshaper, QGIS, and all the map-related files out there, there's bound to be a way to get the customization you want and possibly in short order, too.
Hope this helps.
I am making an augmented reality app using Wikitude SDK. Upon image recognition i am displaying a 2D image on the top of the scanned image. This process need to be repeated for multiple image that need to be scanned.
I tried following approach, but failed to obtain the result.
Approach 1:
I am storing the name of all the images that need to be scanned (target images) in an array and passing the array as argument to the aurgmented reality function
AR.Trackable2DObject like mentioned below:
var arr1=["Mango", "Guava","Papaya","Banana"];
for(var i=0;i<4;i++)
{
var getTargetName1= new AR.Trackable2DObject(this.tracker, arr1[i],
{
drawables: {
cam: [new AR.ImageDrawable(new
AR.ImageResource("assets/"+arr1[i]+".png"), 1, {
offsetX: -0.15,
offsetY: 0,
onClick:function(arObject)
{
}
})]
},
onEnterFieldOfVision:function(targetName)
{
// arr.push(targetName);
alert(targetName);
//alert("assets/"+targetName+".png");
},onExitFieldOfVision: function onExitFieldOfVisionFn() {
}
});
}
In the above case object AR.Trackable2DObject is created,upon image recognition the elements of array are compared with the element of tracker(both are passed as argument to the above AR object) and based on any match a 2D drawable is overlayed using AR.ImageDrawable object.
The issue with above approach is that AR.Trackable2DObject is not able to read all of the elements in the array while comparing it to the tracker. WHich is therefore not overlaying any 2D drawable after image recognition is successful.
If someone can explain how the function call to AR.Trackable2DObject works with an array?
Please respond i can give more input to your replies.
When you have multiple target images in your target archive and you have only one overlay image you don't pass the whole archive as a parameter, you pass second parameter like that: "*". That means on any picture from target archive display overlayOne.
var pageOne = new AR.Trackable2DObject(this.tracker, "*", {
drawables: {
cam: overlayOne
}
});
If you want to build this overlay only on some images, not on all, make a naming convention inside your wtc file. For example instead of "apple" and "banana" name them "word_apple" and "word_banana". And in AR.Trackable2DObject pass as second parameter "word_*".
P.S. It doesn't work with array.
I am doing research in graph theory and need to visualize graphs in real time.
(That is, if the graph data changes, its representation changes with it.)
InfoVis seems to meet that goal, but I am struggling to put together a simple 'Hello, World' page that just displays a graph on-screen with clickable nodes (where clicking causes the node to change color).
I have a working installation of JIT (the given examples work),
I just need a minimal example of InfoVis to get started,
and it is proving difficult to piece one together from the documentation.
Fiddle example.
This isn't exactly minimal, but you can probably remove some more stuff to make it so. I took code from the graph manipulation example, and removed some superfluous CSS and JS.
To get the nodes to change color, I added this line to the "onClick" function:
node.data["$color"] = "#FF0000";
The minimal elements seem to be:
a JSON data structure
instantiate the $jit.ForceDirected object, and call loadJSON
There's also a bunch of boilerplate code for cross-browser compatibility (checking for canvas support, etc).
The pared-down JSON structure looks like this:
// define three nodes
var json = [
{ // first node
// node identifier
id: "graphnode1",
// node label
name: "A graph node (#1)"
// the node's color, shape, and size
data: {
$color: "#FFFFFF",
$type: "circle",
$dim: 10
},
// this node is adjacent to nodes 2 and 3
adjacencies: [
"graphnode2",
{
nodeTo: "graphnode2",
// make the connector blue
data: {
"$color": "#0000FF"
}
},
"graphnode3",
{
nodeTo: "graphnode3",
}
]
},
// second node
{
id: "graphnode2",
name: "Another graph node (#2)"
},
// third node
{
id: "graphnode3",
name: "Another graph node (#3)"
}
];
Here's the outline of the initial code:
var json = {
// structure here
};
var fd = new $jit.ForceDirected({
// create canvas in "infovis" DOM element
injectInto: 'infovis',
// many other options here
});
fd.loadJSON(json);