Using vis.js to populate nodes and links from json file - javascript
I running basic html and json file to visualize nodes and links using vis.js. Json files contain list of nodes and links/edges. I refer to SO sample here to run it... example . I test using the examples and it does work and show all the nodes and links. I replace the json file with my own data and when i execute the code... it just show the nodes without any link.
My Json file
{
"nodes": [
{
"id": "openflow:1",
"tpid": [
"openflow:1:2",
"openflow:1:1",
"openflow:1:LOCAL"
]
},
{
"id": "host:00:00:00:00:00:01",
"ip": "10.0.0.1",
"mac": "00:00:00:00:00:01",
"tpid": [
"host:00:00:00:00:00:01"
]
},
{
"id": "openflow:2",
"tpid": [
"openflow:2:LOCAL",
"openflow:2:1",
"openflow:2:2"
]
},
{
"id": "host:00:00:00:00:00:02",
"ip": "10.0.0.2",
"mac": "00:00:00:00:00:02",
"tpid": [
"host:00:00:00:00:00:02"
]
}
],
"edges": [
{
"id": "host:00:00:00:00:00:01/openflow:1:1",
"source": "host:00:00:00:00:00:01",
"target": "openflow:1:1"
},
{
"id": "openflow:2:1/host:00:00:00:00:00:02",
"source": "openflow:2:1",
"target": "host:00:00:00:00:00:02"
},
{
"id": "openflow:1:2",
"source": "openflow:1:2",
"target": "openflow:2:2"
},
{
"id": "openflow:2:2",
"source": "openflow:2:2",
"target": "openflow:1:2"
},
{
"id": "openflow:1:1/host:00:00:00:00:00:01",
"source": "openflow:1:1",
"target": "host:00:00:00:00:00:01"
},
{
"id": "host:00:00:00:00:00:02/openflow:2:1",
"source": "host:00:00:00:00:00:02",
"target": "openflow:2:1", "color":{"color":"green", "highlight":"blue"}, "arrows":{"target":{"scaleFactor":"1.25", "type":"circle"}}
}
]
}
This is the html file
i<!doctype html>
<HTML>
<HEAD>
<meta charset="utf-8" />
<TITLE>[vis.js] Network | Basic Usage | TEST: Load External JSON Datafile</TITLE>
<!-- NPM (http://visjs.org/index.html#download_install): -->
<!-- <script type="text/javascript" src="node_modules/vis/dist/vis.min.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<!-- Needed for JSON file import (https://stackoverflow.com/questions/33392557/vis-js-simple-example-edges-do-not-show): -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- http://visjs.org/index.html#download_install -->
<!-- <link rel="stylesheet" type="text/css" href="node_modules/vis/dist/vis.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
<style type="text/css">
#mynetwork {
/* width: 600px; */
width: 100%;
height: 800px;
border: 2px solid lightgray;
}
</style>
</HEAD>
<BODY>
<div id="mynetwork"></div>
<!-- Add an invisible <div> element to the document, to hold the JSON data: -->
<div id="networkJSON-results" class="results" style="display:none"></div>
<script type="text/javascript">
// -------------------------------------------------------------------------
// OPTIONS:
// http://visjs.org/docs/network/#modules
// http://visjs.org/docs/network/edges.html#
// http://visjs.org/docs/network/physics.html#
var options = {
edges: {
arrows: {
target: {enabled: true, scaleFactor:0.75, type:'arrow'},
// to: {enabled: false, scaleFactor:0.5, type:'bar'},
middle: {enabled: false, scalefactor:1, type:'arrow'},
source: {enabled: true, scaleFactor:0.3, type:'arrow'}
// from: {enabled: false, scaleFactor:0.5, type:'arrow'}
},
arrowStrikethrough: true,
chosen: true,
color: {
// color:'#848484',
color:'red',
highlight:'#848484',
hover: '#848484',
inherit: 'from',
opacity:1.0
},
dashes: false,
font: {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
strokeWidth: 2, // px
strokeColor: '#ffffff',
align: 'horizontal',
multi: false,
vadjust: 0,
bold: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold'
},
ital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'italic'
},
boldital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold italic'
},
mono: {
color: '#343434',
size: 15, // px
face: 'courier new',
vadjust: 2,
mod: ''
}
}
},
// http://visjs.org/docs/network/physics.html#
physics: {
enabled: true,
barnesHut: {
gravitationalConstant: -2000,
centralGravity: 0.3,
// springLength: 95,
springLength: 175,
springConstant: 0.04,
damping: 0.09,
avoidOverlap: 0
},
forceAtlas2Based: {
gravitationalConstant: -50,
centralGravity: 0.01,
springConstant: 0.08,
springLength: 100,
damping: 0.4,
avoidOverlap: 0
},
repulsion: {
centralGravity: 0.2,
springLength: 200,
springConstant: 0.05,
nodeDistance: 100,
damping: 0.09
},
hierarchicalRepulsion: {
centralGravity: 0.0,
springLength: 100,
springConstant: 0.01,
nodeDistance: 120,
damping: 0.09
},
maxVelocity: 50,
minVelocity: 0.1,
solver: 'barnesHut',
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 100,
onlyDynamicEdges: false,
fit: true
},
timestep: 0.5,
adaptiveTimestep: true
},
};
// -------------------------------------------------------------------------
// IMPORT DATA FROM EXTERNAL JSON FILE:
// Per: https://github.com/ikwattro/blog/blob/master/sources/easy-graph-visualization-with-vis-dot-js.adoc:
// NOTES:
// 1. Must use double quotes ("; not ') in that JSON file;
// 2. Cannot have comments in that file, only data! See:
// https://stackoverflow.com/questions/244777/can-comments-be-used-in-json
// 3. Per the path below, place the "test.json" file in a "data" subdirectory.
var json = $.getJSON("data/11-test2.json")
.done(function(data){
var data = {
nodes: data.nodes,
edges: data.edges
};
var network = new vis.Network(container, data, options);
});
var container = document.getElementById('mynetwork');
</script>
</BODY>
</HTML>
The output only nodes without links/edges
I have check it few times but couldn't find the bottleneck... appreciate someone to advise..what could be wrong here... Thanks
22/11/19-
Appreciate someone who knows about this problem... I have edit my json file and change source/target --> to/from and still the same...link not visible...
*23/11/19-
Still not clue to resolve the problem. Thanks for your advises.
as you say edges are not structured as { id, source, target } but as { id, from, to }. The same applies to options.edges.arrows.
This also seems problematic (two variables named data in the same scope, more like bad practice though):
.done(function(data){
var data = {
nodes: data.nodes,
edges: data.edges
};
The actual answer to your question is that you connect edges to nodes you don't have. For example the first edge goes from host:00:00:00:00:00:01 to openflow:1:1. But there is no node openflow:1:1 (there is openflow:1, maybe you meant that). Since it points nowhere it's invalid and therefore ignored.
PS: The 4.21.0 version line is pretty old and not updated anymore. See https://visjs.github.io/vis-network/examples/network/basic_usage/standalone.html for up to date Vis Network.
Related
use JS Classes (CDN) with react (rewrite code), vanillaJS works
I would like to use JS classes from a cdn within a react component. This is the cdn: https://cdn.jsdelivr.net/gh/Mikhus/canvas-gauges#gh-pages/download/2.1.7/all/gauge.min.js I have already written the vanillaJS Code, that works well, however I have not idea how to implement this with react. The object that is drawn into a canvas is first instantiated with a set of different values, then it is drawn on the canvas, then you can access the values from outside. I works well with vanillaJS!! CDN or local file: <script src="./lib/canvas-gauges.min.js"></script> html canvas: <canvas id="barometer" </canvas> instantiating object and drawing it on the canvas: const barometer = new RadialGauge({ renderTo: canvas, title: 'hPa', width: 400, height: 400, units: `${location}`, minValue: 960, maxValue: 1060, majorTicks: [ "", "970", "980", "990", "1000", "1010", "1020", "1030", "1040", "1050", "", ], minorTicks: 10, ticksAngle: 270, startAngle: 45, strokeTicks: true, highlights: [ { "from": 960, "to": 1005, "color": "rgba(0,0,255,0.8)" }, { "from": 1005, "to": 1023, "color": "rgba(0, 151, 19, 0.3)" }, { "from": 1023, "to": 1060, "color": "rgba(241, 90, 34, 0.9)" } ], valueInt: 1, valueDec: 0, colorPlate: "beige", colorMajorTicks: "#686868", colorMinorTicks: "#686868", colorTitle: "#000", colorUnits: "#000", colorNumbers: "#686868", valueBox: true, colorNeedleShadowUp: true, colorNeedleShadowDown: true, colorNeedle: "#f59042", colorNeedleEnd: "#f59042", colorNeedleCircleOuter: "rgba(200, 200, 200, 1)", colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)", borderShadowWidth: 0, borders: false, borderInnerWidth: 0, borderMiddleWidth: 0, borderOuterWidth: 20, colorBorderOuter: "silver", colorBorderOuterEnd: "black", needleType: "arrow", needleWidth: 2, needleCircleSize: 7, needleCircleOuter: true, needleCircleInner: false, animationDuration: 1500, animationRule: "dequint", fontNumbers: "Arial", fontTitle: "Arial", fontUnits: "Arial", fontValue: "Arial", fontValueStyle: "italic", fontNumbersSize: 16, // fontNumbersStyle: "italic", fontNumbersWeight: "bold", fontTitleSize: 16, fontUnitsSize: 16, fontValueSize: 16, animatedValue: true, }); barometer.draw(); Then the values of that object can be accessed simply like this: barometer.value = 1024; Now, I would like to do the same thing with react! There is also a node module called react-canvas-gauges, here I can make an import like this: import { RadialGauge, LinearGauge} from "react-canvas-gauges"; I can render then: render() { <RadialGauge title= "hPa" width = "400"... /> } The point is, I figured out that I must update the value from "OUTSIDE", instantiating the object, drawing it on the canvas and then updating the value, and that is not possible (or against the philosophy of react) doing this with these JSX Components from "OUTSIDE"
import json file to create a network in vis.js
I am using vis.js to create a mapping, I using file saveAndLoad.html in the example code. The save function is good, I can export json file. But when I load the json file in import function it doesn't create a mapping for me. I don't know what is my misunderstanding please help. this is the import function. function importNetwork() { /*var inputValue = exportArea.value; var inputData = JSON.parse(inputValue); var data = { nodes: getNodeData(inputData), edges: getEdgeData(inputData) } network = new vis.Network(container, data, {});*/ var gephiJSON = loadJSON("./1.json"); // code in importing_from_gephi. // you can customize the result like with these options. These are explained below. // These are the default options. var parserOptions = { edges: { inheritColors: false }, nodes: { fixed: true, parseColor: false } } // parse the gephi file to receive an object // containing nodes and edges in vis format. var parsed = vis.network.convertGephi(gephiJSON, parserOptions); // provide data in the normal fashion var data = { nodes: parsed.nodes, edged: parsed.edges }; // create a network var network = new vis.Network(container, data); resizeExportArea(); }
I searched quite a bit for a solution to the obstensively simple task of loading an external JSON datafile into a vis.js Network. Here is a working solution. Read my comments in the HTML file (below), for more information: I installed vis.js via NPM, but you can also just download / source the vis.min.js file; The code provided by visjs.org in the "full options" tab for the Network module edge options was buggy, due to extra commas, etc. I included a working copy in my HTML code (ditto re: the "physics" options). As noted in the comments in my HTML file, the formatting of the JSON datafile is very particular: use double quotation marks; curly braces { } are not quoted (e.g., if you want to define per-edge attributes, in that file); .... json_test.html <!doctype html> <HTML> <HEAD> <meta charset="utf-8" /> <TITLE>[vis.js] Network | Basic Usage | TEST: Load External JSON Datafile</TITLE> <!-- NPM (http://visjs.org/index.html#download_install): --> <!-- <script type="text/javascript" src="node_modules/vis/dist/vis.min.js"></script> --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script> <!-- Needed for JSON file import (https://stackoverflow.com/questions/33392557/vis-js-simple-example-edges-do-not-show): --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- http://visjs.org/index.html#download_install --> <!-- <link rel="stylesheet" type="text/css" href="node_modules/vis/dist/vis.css"> --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css"> <style type="text/css"> #mynetwork { /* width: 600px; */ width: 100%; height: 800px; border: 2px solid lightgray; } </style> </HEAD> <BODY> <div id="mynetwork"></div> <!-- Add an invisible <div> element to the document, to hold the JSON data: --> <div id="networkJSON-results" class="results" style="display:none"></div> <script type="text/javascript"> // ------------------------------------------------------------------------- // OPTIONS: // http://visjs.org/docs/network/#modules // http://visjs.org/docs/network/edges.html# // http://visjs.org/docs/network/physics.html# var options = { edges: { arrows: { to: {enabled: true, scaleFactor:0.75, type:'arrow'}, // to: {enabled: false, scaleFactor:0.5, type:'bar'}, middle: {enabled: false, scalefactor:1, type:'arrow'}, from: {enabled: true, scaleFactor:0.3, type:'arrow'} // from: {enabled: false, scaleFactor:0.5, type:'arrow'} }, arrowStrikethrough: true, chosen: true, color: { // color:'#848484', color:'red', highlight:'#848484', hover: '#848484', inherit: 'from', opacity:1.0 }, dashes: false, font: { color: '#343434', size: 14, // px face: 'arial', background: 'none', strokeWidth: 2, // px strokeColor: '#ffffff', align: 'horizontal', multi: false, vadjust: 0, bold: { color: '#343434', size: 14, // px face: 'arial', vadjust: 0, mod: 'bold' }, ital: { color: '#343434', size: 14, // px face: 'arial', vadjust: 0, mod: 'italic' }, boldital: { color: '#343434', size: 14, // px face: 'arial', vadjust: 0, mod: 'bold italic' }, mono: { color: '#343434', size: 15, // px face: 'courier new', vadjust: 2, mod: '' } } }, // http://visjs.org/docs/network/physics.html# physics: { enabled: true, barnesHut: { gravitationalConstant: -2000, centralGravity: 0.3, // springLength: 95, springLength: 175, springConstant: 0.04, damping: 0.09, avoidOverlap: 0 }, forceAtlas2Based: { gravitationalConstant: -50, centralGravity: 0.01, springConstant: 0.08, springLength: 100, damping: 0.4, avoidOverlap: 0 }, repulsion: { centralGravity: 0.2, springLength: 200, springConstant: 0.05, nodeDistance: 100, damping: 0.09 }, hierarchicalRepulsion: { centralGravity: 0.0, springLength: 100, springConstant: 0.01, nodeDistance: 120, damping: 0.09 }, maxVelocity: 50, minVelocity: 0.1, solver: 'barnesHut', stabilization: { enabled: true, iterations: 1000, updateInterval: 100, onlyDynamicEdges: false, fit: true }, timestep: 0.5, adaptiveTimestep: true }, }; // ------------------------------------------------------------------------- // IMPORT DATA FROM EXTERNAL JSON FILE: // Per: https://github.com/ikwattro/blog/blob/master/sources/easy-graph-visualization-with-vis-dot-js.adoc: // NOTES: // 1. Must use double quotes ("; not ') in that JSON file; // 2. Cannot have comments in that file, only data! See: // https://stackoverflow.com/questions/244777/can-comments-be-used-in-json // 3. Per the path below, place the "test.json" file in a "data" subdirectory. var json = $.getJSON("data/test.json") .done(function(data){ var data = { nodes: data.nodes, edges: data.edges }; var network = new vis.Network(container, data, options); }); var container = document.getElementById('mynetwork'); </script> </BODY> </HTML> test.json {"nodes":[ {"id":"1", "label":"Node 1"} ,{"id":"2", "label":"Node 2\nline 2"} ,{"id":"3", "label":"Node 3"} ,{"id":"4", "label":"Node 4"} ,{"id":"5", "label":"Node 5"} ], "edges":[ {"from":"1", "to":"2", "label":"apples"} ,{"from":"1", "to":"3", "label":"bananas"} ,{"from":"2", "to":"4", "label":"cherries"} ,{"from":"2", "to":"5", "label":"dates"} ,{"from":"2", "to":"3", "label":"EAGLES!", "color":{"color":"green", "highlight":"blue"}, "arrows":{"to":{"scaleFactor":"1.25", "type":"circle"}}} ] } Output
i cant link local json file to the webpage
i am doing a school proget where i have to link a json data local file to a http webpage to get the data but i can't get the results. the code below is the json local code which i want to put in the webpage instead of this code $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) ?({ "xData": [0.001567,0.011765,0.022194,0.032316,0.04266,0.063668,0.074477,0.085323,0.09576,0.106078,0.116096,0.137524,0.148342,0.159059,0.170005,0.180716,0.191407,0.212538,0.222819,0.233929,0.244239,0.255301,0.266081,0.287527,0.298115,0.309392,0.320217,0.330928,0.341401,0.361717,0.372173,0.382337,0.39294,0.403072,0.413454,0.434618,0.444845,0.455745,0.465785,0.475987,0.486064,0.507086,0.517517,0.527961,0.538242,0.548414,0.558444,0.578941,0.589212,0.599472,0.60977,0.620178,0.630189,0.650782,0.661001,0.671137,0.681175,0.691235,0.702012,0.722644,0.733166,0.743824,0.754059,0.764109,0.774519,0.795597,0.805721,0.81592,0.826139,0.836369,0.846826,0.86771,0.87803,0.888342,0.898695,0.908723,0.91922,0.939802,0.950378,0.960776,0.971377,0.981843,0.992312,1.013125,1.023302,1.033488,1.043822,1.054203,1.065019,1.086078,1.09635,1.106421,1.117028,1.127541,1.138599,1.159588,1.170167,1.180741,1.190794,1.201112,1.211355,1.233278,1.243477,1.254957,1.265227,1.276378,1.285656,1.297311,1.308367,1.318715,1.329589,1.340834,1.352388,1.375063,1.385369,1.396291,1.408156,1.418989,1.429535,1.451141,1.462205,1.473011,1.483844,1.494311,1.514761,1.525336,1.535858,1.546476,1.557325,1.567512,1.590091,1.600925,1.612303,1.622558,1.633071,1.643555,1.66484,1.675722,1.685986,1.696733,1.706895,1.719102,1.741295,1.752144,1.762688,1.773713,1.784052,1.795705,1.817305,1.827465,1.838408,1.849369,1.860023,1.871438,1.89257,1.90323,1.914398,1.924634,1.934642,1.945212,1.966275,1.976294,1.986422,1.996652,2.008005,2.018309,2.041139,2.051221,2.0613,2.072507,2.08342,2.094075,2.114574,2.125286,2.135765,2.146845,2.157966,2.169391,2.190921,2.200899,2.212709,2.222671,2.232908,2.244001,2.264898,2.275703,2.286885,2.298115,2.310186,2.32059,2.344695,2.354843,2.366387,2.379001,2.390328,2.402215,2.423134,2.433156,2.444912,2.457061,2.468253,2.478978,2.499832,2.513223,2.52561,2.538429,2.548659,2.560809,2.581308,2.592816,2.603963,2.615992,2.626242,2.638223,2.660346,2.671583,2.681938,2.69265,2.70588,2.716296,2.740081,2.75085,2.761319,2.772027,2.782659,2.793531,2.816194,2.828031,2.839243,2.851443,2.863884,2.874359,2.895246,2.906506,2.91761,2.92786,2.938937,2.950218,2.973357,2.98366,2.994639,3.005213,3.01666,3.02761,3.050025,3.061713,3.071828,3.082787,3.093422,3.105289,3.127231,3.138982,3.149755,3.160217,3.171299,3.191571,3.202226,3.213225,3.223987,3.234092,3.244644,3.265939,3.276411,3.286489,3.297156,3.307909,3.319018,3.34064,3.351107,3.361683,3.373136,3.384768,3.395457,3.417722,3.429096,3.439122,3.449679,3.459868,3.469997,3.492679,3.503647,3.514941,3.525858,3.538746,3.550422,3.572255,3.58452,3.595367,3.605736,3.617401,3.628324,3.652523,3.663679,3.67378,3.684605,3.695595,3.705843,3.728706,3.739169,3.750205,3.761258,3.771771,3.781911,3.804724,3.81631,3.826313,3.837847,3.85049,3.860999,3.88262,3.892937,3.903053,3.913656,3.924698,3.935126,3.956362,3.966543,3.976899,3.98752,3.997644,4.008721,4.029852,4.040633,4.051006,4.06126,4.071761,4.083526,4.10749,4.117855,4.128661,4.13934,4.151117,4.1624,4.184736,4.194826,4.205098,4.215261,4.225325,4.236367,4.262012,4.273794,4.285743,4.297226,4.308086,4.318245,4.340246,4.351486,4.363196,4.374465,4.387109,4.398635,4.421101,4.432135,4.444666,4.456226,4.467413,4.477804,4.498505,4.510413,4.522595,4.534044,4.545944,4.558048,4.580379,4.59312,4.605616,4.618065,4.631266,4.644086,4.667943,4.67948,4.691266,4.703019,4.715923,4.725932,4.752312,4.765224,4.777128,4.787361,4.800435,4.823353,4.836044,4.848602,4.860302,4.871112,4.882779,4.904695,4.914823,4.927074,4.938111,4.949586,4.960761,4.982911,4.9942,5.004246,5.016296,5.027215,5.038043,5.058885,5.070303,5.080649,5.093865,5.104424,5.114903,5.134965,5.146346,5.15634,5.168547,5.179066,5.191167,5.214242,5.224914,5.237573,5.249537,5.261586,5.272517,5.296154,5.306348,5.316773,5.327153,5.339961,5.350638,5.376502,5.389277,5.402142,5.412197,5.42399,5.434873,5.458466,5.470907,5.482679,5.493339,5.50574,5.516349,5.538897,5.549552,5.56083,5.571879,5.583764,5.59509,5.619028,5.629925,5.640716,5.650957,5.661787,5.671957,5.693974,5.704919,5.717491,5.731152,5.744728,5.755687,5.778668,5.791951,5.80409,5.815697,5.828482,5.840501,5.864145,5.875704,5.887893,5.900147,5.912517,5.924894,5.948897,5.959155,5.970262,5.981632,5.992996,6.00356,6.027256,6.038776,6.050959,6.061351,6.071864,6.082436,6.104054,6.115602,6.127623,6.139058,6.150639,6.161323,6.183013,6.194359,6.206269,6.218033,6.2281,6.240494,6.262584,6.275326,6.287166,6.298953,6.310644,6.321583,6.345676,6.356738,6.366782,6.377931,6.388519,6.397159], "datasets": [{ "name": "Speed", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "km/h", "type": "line", "valueDecimals": 1 }, { "name": "Elevation", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "m", "type": "area", "valueDecimals": 0 }, { "name": "Consumo Carburante", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "l", "type": "area", "valueDecimals": 0 }] }); <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <style type="text/css"> .chart { min-width: 320px; max-width: 800px; height: 220px; margin: 0 auto; } </style> <!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> </style> <script type="text/javascript"> /* The purpose of this demo is to demonstrate how multiple charts on the same page can be linked through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a small variation for each data set, and a mouse/touch event handler to bind the charts together. */ $(function () { /** * In order to synchronize tooltips and crosshairs, override the * built-in events with handlers defined on the parent element. */ $('#container').bind('mousemove touchmove', function (e) { var chart, point, i; for (i = 0; i < Highcharts.charts.length; i = i + 1) { chart = Highcharts.charts[i]; e = chart.pointer.normalize(e); // Find coordinates within the chart point = chart.series[0].searchPoint(e, true); // Get the hovered point if (point) { point.onMouseOver(); // Show the hover marker chart.tooltip.refresh(point); // Show the tooltip chart.xAxis[0].drawCrosshair(e, point); // Show the crosshair } } }); /** * Override the reset function, we don't need to hide the tooltips and crosshairs. */ Highcharts.Pointer.prototype.reset = function () { return undefined; }; /** * Synchronize zooming through the setExtremes event handler. */ function syncExtremes(e) { var thisChart = this.chart; if (e.trigger !== 'syncExtremes') { // Prevent feedback loop Highcharts.each(Highcharts.charts, function (chart) { if (chart !== thisChart) { if (chart.xAxis[0].setExtremes) { // It is null while updating chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' }); } } }); } } // Get the data. The contents of the data file can be viewed at // https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json // here i want to add my own json file which is local but i cant add it.. //********************** Problem ************************************** $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) { $.each(activity.datasets, function (i, dataset) { // Add X values dataset.data = Highcharts.map(dataset.data, function (val, j) { return [activity.xData[j], val]; }); $('<div class="chart">') .appendTo('#container') .highcharts({ chart: { marginLeft: 40, // Keep all charts left aligned spacingTop: 20, spacingBottom: 20, zoomType: 'x' }, title: { text: dataset.name, align: 'left', margin: 0, x: 30 }, credits: { enabled: false }, legend: { enabled: false }, xAxis: { crosshair: true, events: { setExtremes: syncExtremes }, labels: { format: '{value} km' } }, yAxis: { title: { text: null } }, tooltip: { positioner: function () { return { x: this.chart.chartWidth - this.label.width, // right aligned y: -1 // align to title }; }, borderWidth: 0, backgroundColor: 'none', pointFormat: '{point.y}', headerFormat: '', shadow: false, style: { fontSize: '18px' }, valueDecimals: dataset.valueDecimals }, series: [{ data: dataset.data, name: dataset.name, type: dataset.type, color: Highcharts.getOptions().colors[i], fillOpacity: 0.3, tooltip: { valueSuffix: ' ' + dataset.unit } }] }); }); }); }); </script> <body> <script src="https://code.highcharts.com/highcharts.js"></script> <div id="container"></div> <!-- ******************************************************************************************** --> </body> </html>
save the below structure into local json file: { "xData": [0.001567,0.011765,0.022194,0.032316,0.04266,0.063668,0.074477,0.085323,0.09576,0.106078,0.116096,0.137524,0.148342,0.159059,0.170005,0.180716,0.191407,0.212538,0.222819,0.233929,0.244239,0.255301,0.266081,0.287527,0.298115,0.309392,0.320217,0.330928,0.341401,0.361717,0.372173,0.382337,0.39294,0.403072,0.413454,0.434618,0.444845,0.455745,0.465785,0.475987,0.486064,0.507086,0.517517,0.527961,0.538242,0.548414,0.558444,0.578941,0.589212,0.599472,0.60977,0.620178,0.630189,0.650782,0.661001,0.671137,0.681175,0.691235,0.702012,0.722644,0.733166,0.743824,0.754059,0.764109,0.774519,0.795597,0.805721,0.81592,0.826139,0.836369,0.846826,0.86771,0.87803,0.888342,0.898695,0.908723,0.91922,0.939802,0.950378,0.960776,0.971377,0.981843,0.992312,1.013125,1.023302,1.033488,1.043822,1.054203,1.065019,1.086078,1.09635,1.106421,1.117028,1.127541,1.138599,1.159588,1.170167,1.180741,1.190794,1.201112,1.211355,1.233278,1.243477,1.254957,1.265227,1.276378,1.285656,1.297311,1.308367,1.318715,1.329589,1.340834,1.352388,1.375063,1.385369,1.396291,1.408156,1.418989,1.429535,1.451141,1.462205,1.473011,1.483844,1.494311,1.514761,1.525336,1.535858,1.546476,1.557325,1.567512,1.590091,1.600925,1.612303,1.622558,1.633071,1.643555,1.66484,1.675722,1.685986,1.696733,1.706895,1.719102,1.741295,1.752144,1.762688,1.773713,1.784052,1.795705,1.817305,1.827465,1.838408,1.849369,1.860023,1.871438,1.89257,1.90323,1.914398,1.924634,1.934642,1.945212,1.966275,1.976294,1.986422,1.996652,2.008005,2.018309,2.041139,2.051221,2.0613,2.072507,2.08342,2.094075,2.114574,2.125286,2.135765,2.146845,2.157966,2.169391,2.190921,2.200899,2.212709,2.222671,2.232908,2.244001,2.264898,2.275703,2.286885,2.298115,2.310186,2.32059,2.344695,2.354843,2.366387,2.379001,2.390328,2.402215,2.423134,2.433156,2.444912,2.457061,2.468253,2.478978,2.499832,2.513223,2.52561,2.538429,2.548659,2.560809,2.581308,2.592816,2.603963,2.615992,2.626242,2.638223,2.660346,2.671583,2.681938,2.69265,2.70588,2.716296,2.740081,2.75085,2.761319,2.772027,2.782659,2.793531,2.816194,2.828031,2.839243,2.851443,2.863884,2.874359,2.895246,2.906506,2.91761,2.92786,2.938937,2.950218,2.973357,2.98366,2.994639,3.005213,3.01666,3.02761,3.050025,3.061713,3.071828,3.082787,3.093422,3.105289,3.127231,3.138982,3.149755,3.160217,3.171299,3.191571,3.202226,3.213225,3.223987,3.234092,3.244644,3.265939,3.276411,3.286489,3.297156,3.307909,3.319018,3.34064,3.351107,3.361683,3.373136,3.384768,3.395457,3.417722,3.429096,3.439122,3.449679,3.459868,3.469997,3.492679,3.503647,3.514941,3.525858,3.538746,3.550422,3.572255,3.58452,3.595367,3.605736,3.617401,3.628324,3.652523,3.663679,3.67378,3.684605,3.695595,3.705843,3.728706,3.739169,3.750205,3.761258,3.771771,3.781911,3.804724,3.81631,3.826313,3.837847,3.85049,3.860999,3.88262,3.892937,3.903053,3.913656,3.924698,3.935126,3.956362,3.966543,3.976899,3.98752,3.997644,4.008721,4.029852,4.040633,4.051006,4.06126,4.071761,4.083526,4.10749,4.117855,4.128661,4.13934,4.151117,4.1624,4.184736,4.194826,4.205098,4.215261,4.225325,4.236367,4.262012,4.273794,4.285743,4.297226,4.308086,4.318245,4.340246,4.351486,4.363196,4.374465,4.387109,4.398635,4.421101,4.432135,4.444666,4.456226,4.467413,4.477804,4.498505,4.510413,4.522595,4.534044,4.545944,4.558048,4.580379,4.59312,4.605616,4.618065,4.631266,4.644086,4.667943,4.67948,4.691266,4.703019,4.715923,4.725932,4.752312,4.765224,4.777128,4.787361,4.800435,4.823353,4.836044,4.848602,4.860302,4.871112,4.882779,4.904695,4.914823,4.927074,4.938111,4.949586,4.960761,4.982911,4.9942,5.004246,5.016296,5.027215,5.038043,5.058885,5.070303,5.080649,5.093865,5.104424,5.114903,5.134965,5.146346,5.15634,5.168547,5.179066,5.191167,5.214242,5.224914,5.237573,5.249537,5.261586,5.272517,5.296154,5.306348,5.316773,5.327153,5.339961,5.350638,5.376502,5.389277,5.402142,5.412197,5.42399,5.434873,5.458466,5.470907,5.482679,5.493339,5.50574,5.516349,5.538897,5.549552,5.56083,5.571879,5.583764,5.59509,5.619028,5.629925,5.640716,5.650957,5.661787,5.671957,5.693974,5.704919,5.717491,5.731152,5.744728,5.755687,5.778668,5.791951,5.80409,5.815697,5.828482,5.840501,5.864145,5.875704,5.887893,5.900147,5.912517,5.924894,5.948897,5.959155,5.970262,5.981632,5.992996,6.00356,6.027256,6.038776,6.050959,6.061351,6.071864,6.082436,6.104054,6.115602,6.127623,6.139058,6.150639,6.161323,6.183013,6.194359,6.206269,6.218033,6.2281,6.240494,6.262584,6.275326,6.287166,6.298953,6.310644,6.321583,6.345676,6.356738,6.366782,6.377931,6.388519,6.397159], "datasets": [{ "name": "Speed", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "km/h", "type": "line", "valueDecimals": 1 }, { "name": "Elevation", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "m", "type": "area", "valueDecimals": 0 }, { "name": "Consumo Carburante", "data": [10,20,30,40,50,60,70,80,90,100], "unit": "l", "type": "area", "valueDecimals": 0 }] } Anyway, the most preferable way is to use getJson method: $.getJSON( "test.json", function( data ) { var items = []; $.each( data, function( key, val ) { ... process data }); ... });
Flot Categories Plugin Ordering Incorrect
Thanks in advance for your time. I have the following code for a Flot Chart <script src="js/plugins/flot/jquery.flot.js"></script> <script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script> <script src="js/plugins/flot/jquery.flot.spline.js"></script> <script src="js/plugins/flot/jquery.flot.resize.js"></script> <script src="js/plugins/flot/jquery.flot.categories.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(function() { var data = [{ "label": "Commission", "color": "#1ab394", "data": [["Oct", ],["Nov", ],["Dec", ],["Jan", ],["Feb", ],["Mar", ],["Apr", ],["May", 14],["Jun", 0],["Jul", 5],["Aug", 12],["Sep", 7]] }, { "label": "EPL", "color": "#1C84C6", "data": [["Oct", 0],["Nov", 0],["Dec", 0],["Jan", 0],["Feb", 0],["Mar", 0],["Apr", 0],["May", 1.75],["Jun", 0.00],["Jul", 0.17],["Aug", 0.39],["Sep", 0.35]] }]; var options = { series: { lines: { show: false, fill: true }, splines: { show: true, tension: 0.4, lineWidth: 1, fill: 0.4 }, points: { radius: 0, show: true }, shadowSize: 2 }, grid: { borderColor: '#eee', borderWidth: 1, hoverable: true, backgroundColor: '#fff' }, tooltip: true, tooltipOpts: { content: function (label, x, y) { return x + ' : ' + y; } }, xaxis: { tickColor: '#eee', mode: 'categories' }, yaxis: { tickColor: '#eee' }, shadowSize: 0 }; var chart = $('.dashchart'); if(chart.length) $.plot(chart, data, options); }); })(window, document, window.jQuery); </script> The docs state... By default, the labels are ordered as they are met in the data series. If you need a different ordering, you can specify "categories" on the axis options and list the categories there: https://code.google.com/p/flot/source/browse/trunk/jquery.flot.categories.js?r=341 However the x axis ordering is not the same as the data series, as seen in the screenshot below Any idea why this may be.
I figured this out. Hope it helps someone some day Seems Flot doesnt like empty values in the data series "data": [["Oct", ],["Nov", ],["Dec", ],["Jan", ],["Feb", ],["Mar", ],["Apr", ],["May", 14],["Jun", 0],["Jul", 5],["Aug", 12],["Sep", 7]] changed to this and it works fine "data": [["Oct", 0],["Nov", 0],["Dec", 0],["Jan", 0],["Feb", 0],["Mar", ]0,["Apr", 0],["May", 14],["Jun", 0],["Jul", 5],["Aug", 12],["Sep", 7]]
Add a horizontal line to the chart
I have a requirement to have horizontal lines in Kendo Line Chart to denote maximum and minimum values as well as high limit and low limit.
Another solution would be to add plotbands. Example: <div id="chart"></div> <script> $("#chart").kendoChart({ valueAxis: { plotBands: [ { from: 89, to: 90, color: "red" } ] } }); </script>
Adding striplines or Horizontal Lines (Min/Max/Average) via Kendo-chart Render Event Handler I wanted to add a complete solution here so it can be used for variety reasons. Using kendo 2015.3.1111 version, IE11/10 I had the same challenge to add upper and lower limit lines similar to MS-Chart strip lines. Kendo 2015.3.1111 and prior versions don't support this feature. My solution is Add a stripline property to kendo-chart value-axis property Use render event handler to draw lines provided by the stripline property per value axis A value axis (y-axis) may have multiple striplines Make sure have the following references in the <head> <link href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> Here is the stripline property. I leave the implementation of level position up to you. valueAxis: [{ name:.. labels:{..} stripLine: [{ value: 78, color: "blue", borderwidth: "1px", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot" dashstyle: "dot", label: "In Max", labelposition: "", labelfont: "12 sans-serif" }, { value: 70, color: "blue", borderwidth: "1px", dashstyle: "dot", label: "In Min", labelposition: "", labelfont: "12 sans-serif" }] } Second Important point is the number of value axes (y-axes). Kendo-chart "value-axis" property has either the value axis or the array of value axes. Render event handler should figure out object versus array render: function (e) { if (e.sender.options.valueAxis.length) { $.each(e.sender.options.valueAxis, function (i, value) { drawStriptLine(e.sender, value); }); } else { drawStriptLine(e.sender, e.sender.options.valueAxis); } } You can see the drawStripline in the Code snippet below. Here are some notes about the code. Make sure the axis names match axis.slot is the data point. If you know how many data point you have, your data axis starts from 0 to your last data point number. Putting a higher number will return the last point. Otherwise line will be drawn from 0 to last point you specified in the end slot. KendoChart property renderAs is optional, however canvas doesn't raise the render event handler, so use VML or SVG Chrome (tested version Version 52.0.2743.116 m) doesn't support dotted and dashed lines yet (solid line only), IE11/10 supports all the dash styles plotBands implementation is also demonstrated as an alternative to Render Event Handler <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> <!--<link href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" rel="stylesheet" />--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>--> <!--<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>--> </head> <body> <div id="chart" /> <script> var mPlotBands = []; mPlotBands.push({ from: 60, to: 61, color: "red", borderwidth: "3px", borderstyle: "dashed", label: "Min", labelposition: "" }) mPlotBands.push({ from: 95, to: 94, color: "red", borderwidth: "3px", borderstyle: "dashed", label: "Max", labelposition: "" }); $("#chart").kendoChart({ renderAs: "VML", //"canvas", "SVG", "VML" title: { text: "Average In/Out Temperatures" }, legend: { position: "bottom" }, seriesDefaults: { type: "line" }, series: [{ name: "In Temperature", data: [74, 74, 76, 78, 74, 70], axis: "intemperature" }, { name: "Out Temperature", data: [45, 65, 75, 95, 80, 70], axis: "outtemperature" }], categoryAxis: { name: "CategoryAxis", categories: ["May", "June", "July", "Aug", "Sep", "Oct"] }, valueAxis: [{ name: "intemperature", labels: { format: "{0}F" }, min: 50, max: 110, plotBands: [], stripLine: [{ value: 78, color: "blue", borderwidth: "1px", dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot" label: "In Max", labelposition: "", labelfont: "12 sans-serif" }, { value: 70, color: "blue", borderwidth: "1px", dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot" label: "In Min", labelposition: "", labelfont: "12 sans-serif" }] }, { name: "outtemperature", labels: { format: "{0}F" }, plotBands: mPlotBands, stripLine: [{ value: 75, color: "green", borderwidth: "3px", dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot" label: "Out Avg", labelposition: "", labelfont: "italic 12 sans-serif" }] }], render: function(e) { if (e.sender.options.valueAxis.length) { $.each(e.sender.options.valueAxis, function(i, value) { drawStriptLine(e.sender, value); }); } else { drawStriptLine(e.sender, e.sender.options.valueAxis); } } }); function drawStriptLine(chart, yaxis) { var axis = chart.getAxis(yaxis.name); var stripline; $.each(yaxis.stripLine, function(i, stripline) { // Locate value slot var slot = axis.slot(stripline.value); // Locate last category slot. Trying to get the last slot on the right given data x-axis plots var categoryAxis = chart.getAxis("CategoryAxis"); var categorySlotBeg = categoryAxis.slot(0); var categorySlotEnd = categoryAxis.slot(100000); // Render a line element var line = new kendo.drawing.Path({ stroke: { color: stripline.color, width: stripline.borderwidth, dashType: stripline.dashstyle } }); line.moveTo([categorySlotBeg.origin.x, slot.origin.y]).lineTo([categorySlotEnd.origin.x, slot.origin.y]); var labelPos = [categorySlotEnd.origin.x - 50, slot.origin.y - 20]; var label = new kendo.drawing.Text(stripline.label, labelPos, { fill: { color: stripline.color }, font: stripline.labelfont }); var group = new kendo.drawing.Group(); group.append(line, label); chart.surface.draw(group); }); } </script> </body> </html> Hope this helps. References http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands
Simply add one more line series with the chart. This will create a hr line in chart. We will be able to manage the line position also.