How I can add 3 lines to the graphic in xCharts? For make graphic with 2 lines I should write:
var data = {
"xScale": "time",
"yScale": "linear",
"type": "line",
"main": [
{
"data": getStatistic(), // Some JSON data
},
],
"comp": [
{
"type": "line",
"data": getStatistic(), // Some JSON data
},
],
};
But adding one more "comp" element doesn't work. On library website I not found graphic with more than two lines...
The answer can be found here: https://github.com/tenXer/xcharts/issues/21
main data and comp are data both Arrays. They can take many different data sets. The documentation might not explain this very well...
You can provide multiple data sets to the main Array to accomplish what you'd like. In example, here is how you might draw both pizza and tacos:
{
"main": [
{
"className": ".pizza",
"data": [
{
"x": "2012-11-05",
"y": 12
},
{
"x": "2012-11-06",
"y": 8
}
]
},
{
"className": ".tacos",
"data": [
{
"x": "2012-11-05",
"y": 8
},
{
"x": "2012-11-06",
"y": 11
}
]
}
]
}
You can add more data sets to this main Array. There is no limit.
Related
We are using Cytoscape + neo4j + spring boot + REST. We've tried to use some formats pass to frontend, however didn't work that well. So looking for best structure to use Cytoscape js.
========
Added later.
For example response from neo4j apoc export json query would be like this:
{
"application": {
"type": "node",
"id": "hhj354",
"labels": [
"Application"
],
"properties": {
"appid": "A90378",
"name": "hkjgj",
"status": "In Production"
}
},
"changes": [
{
"node": {
"type": "node",
"id": "fdsf324",
"labels": [
"Change"
],
"properties": {
"type": "gjhk",
"startdate": "2019-11-21 02:11:32"
}
},
"group": "2019-11",
"relation": sfd
},
{
"node": {
"type": "node",
"id": "fdsf324",
"labels": [
"Change"
],
"properties": {
"type": "gjhk",
"startdate": "2019-11-21 02:11:32"
}
},
"group": "2019-11",
"relation": sfd
},
{
"node": {
"type": "node",
"id": "fdsf324",
"labels": [
"Change"
],
"properties": {
"type": "gjhk",
"startdate": "2019-11-21 02:11:32"
}
},
"group": "2019-11",
"relation": 453
}
]
}
I need some detailed parsing codes. Parsing in backend or front end both ok as long as short enough.
Thanks in advance.
As far as I'm concerned, the front-end should do the less calculations as possible.
Therefore, try to send a JSON as close as possible to the format specified in the specs of cytoscape.js
The basic idea of graph is that it's composed of nodes and edges, those elements (as cytoscape calls them) have ids that can help you select them in a easier way.
No Calculation in Back-End
If you want to use built-in format .json from CALL apoc.export.json.all("all.json",{useTypes:true})then you will have for example to do some transformation in the front-end:
responseJson => {
responseJson.map(element => {
return {
group: element.type,
data : {
id: `${element.type}${element.id}`,
myFavouriteProperty: element.property
}
}
}
I would like to create a jsonpath to take first part of whole json. I have trouble because I dont have any key for sub jsons.
For Example, I have this json;
[
[
"name",
"surname",
"age"
],
[
{
"X": "Mike",
"Y": "Tyson"
},
{
"X": "Irina",
"Y": "Shat"
}
]
]
I want to divide this json to 2 different json;
[
"name",
"surname",
"age"
]
[
{
"X": "Mike",
"Y": "Tyson"
},
{
"X": "Irina",
"Y": "Shat"
}
]
I try to use index but doesn't work.
I'm using highcharts to make some data charts in a project and at the moment, doing it in 2D it works perfectly:
Chart working in 2D
This is a set of percentages for each month, with a red line that indicates the goal % to easily visualize whether or not a set of data is over or under that percentage.
The problem is now that I'm trying to make it 3D to give it more of a 'pop', I include the 3D library and enable it but the graph turns out like this:
Chart NOT working in 3D
Even though the bars display as intended, the line messes up and is nowhere near where it should be.
I've tried changing from spline to scatter with no success. Does anyone have any idea as to how I can fix this, or maybe a different way to present this "goal" so that you can easily see which bars are over or under it.
Thanks in advance!
PS: This is the JSON for the Highcharts options I'm using for 3D:
{
"chart": {
"options3d": {
"enabled": true,
"alpha": 0,
"beta": 0,
"depth": 20
}
},
"title": {
"text": "Title"
},
"xAxis": {
"categories": [
"a",
"b"
],
"crosshair": false,
"gridLineWidth": 1,
"min": 0,
"max": 1
},
"yAxis": {
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
"plotOptions": {
"column": {
"pointPadding": 0.2,
"borderWidth": 0
},
"scatter": {
"width": 10,
"height": 100,
"depth": 10
}
},
"series": [
{
"name": "ENERO",
"type": "column",
"data": [
99.8,
99.77
]
},
{
"name": "FEBRERO",
"type": "column",
"data": [
100,
99.83
]
},
{
"lineWidth": 1,
"name": "Meta (99.8%)",
"type": "scatter",
"color": "#FF0000",
"marker": {
"enabled": false
},
"legend": {
"enabled": false
},
"data": [
[
-1,
99.8,
2
],
[
2,
99.8,
2
]
]
}
]
}
The line chart is not fully supported in 3d, but if your goal is draw a line only, you can use plotLines.
"yAxis": {
"plotLines":[{
"value": 99.5,
"width": 2,
"color": 'red'
}],
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
Demo:
http://jsfiddle.net/v66zt28y
I would like to read node/edges information for a graph (sigma.js)
from a JSON variable. While it's quite easy to use an external JSON file
as input via a JSON parser, I could not find a way to use a JSON object
directly defined in the JavaScript code.
There seems to exist a method called 'read', but I could not get
it to work (Source: https://github.com/jacomyal/sigma.js/wiki/Graph-API).
Could someone give me a hint?
This is what I would like to have:
data = {
"nodes": [
{
"id": "n0",
"label": "A node",
"x": 0,
"y": 0,
"size": 3
},
{
"id": "n1",
"label": "Another node",
"x": 3,
"y": 1,
"size": 2
},
],
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1"
},
]
}
sigma.parsers.json( data , {
container: 'container',
settings: {
defaultNodeColor: '#ec5148'
}
});
Thank you, cheers, Michael
Add your data as follows:
s = new sigma({
graph: data,
container: 'container',
settings: {
defaultNodeColor: '#ec5148'
}
});
See also: json-is-not-read-by-sigma-js
Basically I want to be able, in Javascript (JQuery optionally), to search into a JSON with nested elements for a particular element and edit it.
Ex. search for "components" with id 110 and change the name to "video card".
Notice the following JSON is just an example. I am wondering if javascript libraries or good tricks exist to do such a thing, I don't think traversing the whole json or writing my own methods is the best solution.
{
"computers": [
{
"id": 10,
"components": [
{
"id": 56,
"name": "processor"
},
{
"id": 24,
"name": "ram"
}
]
},
{
"id": 11,
"components": [
{
"id": 110,
"name": "graphic card"
},
{
"id": 322,
"name": "motherboard"
}
]
}
]
}
You could try linq.js.
You can use this javascript lib, DefiantJS (http://defiantjs.com), with which you can filter matches using XPath on JSON structures. To put it in JS code:
var data = {
"computers": [
{
"id": 10,
"components": [
{ "id": 56, "name": "processor" },
{ "id": 24, "name": "ram" }
]
},
{
"id": 11,
"components": [
{ "id": 110, "name": "graphic card" },
{ "id": 322, "name": "motherboard" }
]
}
]
},
res = JSON.search( data, '//components[id=110]' );
res[0].name = 'video card';
Here is a working fiddle;
http://jsfiddle.net/g8fZw/
DefiantJS extends the global object JSON with the method "search" and returns an array with matches (empty array if no matches were found). You can try out the lib and XPath queries using the XPath Evaluator here:
http://www.defiantjs.com/#xpath_evaluator