I want to completely remove, not hide, the x and y-axis in my Zingcharts. I have a graph that does not need an x or y axis, and although I can hide them, they are taking up valuable space, which results in a compressed graph. Is there anyway to do this?
Sounds like you may be setting scales to visible: false, but there is still a lot of space around the chart where these items used to be.
You can eliminate this space by setting items to visible:false, setting associated line-color attributes to "none" and adding:
"plotarea":{
"margin":"0 0"
}
to your JSON. Below is an example with this spacing removed using the method described above. Click the "run code snippet" button to see the resulting chart.
var myConfig = {
"type": "line",
"scale-x":{
"line-color":"none",
"item":{
"visible":false
},
"tick":{
"line-color":"none"
}
},
"scale-y":{
"line-color":"none",
"item":{
"visible":false
},
"tick":{
"line-color":"none"
}
},
"plotarea":{
"margin":"0 0"
},
"series": [
{
"values":[20,40,25,50,15,45,33,34]
},
{
"values":[5,30,21,18,59,50,28,33]
},
{
"values":[30,5,18,21,33,41,29,15]
},
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= 'https://cdn.zingchart.com/2.1.2/zingchart.min.js'></script>
<script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/2.1.2/modules/';</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>
If you're setting scales to visible:false, that may create some issues. Instead, adjusting the styling so they are simply not seen can prevent conflicts with other functionality. I'm on the ZingChart team, so please let me know if this answers your question or if you would like additional clarification.
Related
I have a fairly simple hierarchical structure of nodes, but when vis.js draws them, the order of nodes on each level doesn't make much sense - there are a lot of crossed edges (screenshot: Default Layout )
I am hoping to get a layout similar to that given here:
Expected Layout
My vis.js options are as follows;
{
"layout": {
"hierarchical": {
"direction": "LR",
"sortMethod": "directed",
"nodeSpacing": 200,
"treeSpacing": 400
}
},
"edges": {
"smooth": {
"type": "continuous"
}
},
"nodes": {
"physics": false
}
};
What is the best method to produce this sorted layout?
I suggest your try enabling physics, which will sort out the edges crossing, etc.
However, in hierarchical layout, it's a good idea to disable the engine once it's done the first iterations by catching the 'stabilizationIterationsDone' event as follows:
network.on("stabilizationIterationsDone", function(){
network.setOptions( { physics: false } );
});
you should remove the quotation marks. these are object's properties, not strings. it should look like this:
layout: {
hierarchical: {
direction: "LR",
sortMethod: "directed",
nodeSpacing: 200,
treeSpacing: 400
}
},
edges: {
smooth: {
type: "continuous"
}
},
nodes: {
physics: false
}
Trying to get this with the Webix Treetable. I can only set fixed rowHeight property. So here I face two problems:
Height of the rows
Position of the 'plus' icons (always on top)
Current treetable config is
rowHeight:100, rowLineHeight:34,
columns:[{
id:"value",
template:"{common.treetable()} #value#",
fillspace:true
}],
Code sample: http://webix.com/snippet/23a6b79f
you can use the $height attribute in data, like in example.
If you load data remotly, you can obviously pass it.
webix.ui({
view:"treetable",
rowHeight:100, rowLineHeight:34,
columns:[{
id:"value",
template:"{common.treetable()} #value#",
fillspace:true
}],
data: [{
id:1,
$height:30,
value:"Root",
open:true,
data:[{
id:"11",
value:"Text 1<br>Text 2<br>Text 3",
data:[
{ id:"111", value:"Should be small too", $height:30}
]
}]
}]
});
http://webix.com/snippet/59a17d61
I have a problem with vis.js, I cannot increase the size of a node and the font of its label.
nodes.push({id: el, label: currentNode.hostName,font: {color:'#FF9900', face:'courier',size:300}, group: "Domain", color:{background: getColor(currentNode) , border: getColor(currentNode) }, value: 10000, title: label,labelHighlightBold: true, borderWidthSelected: 7 });
Domain: {
shape: 'triangleDown',
shapeProperties: {
useImageSize: false,
size:3333
}
}
Thank you
you can define the font size inside the option for creating the network
var options = {
nodes : {
shape : 'dot',
size : 15,
color : '#ECBF26', // select color
font : {
size : 16,
color : '#ffffff'
},
borderWidth : 2
},
Well, I know its a little late, but I just started working with viz.js so you can do it like this:
Assuming you have your nodes save in NODES
NODES.update({ id: yourNodeId, size: 100 });
With the same method you can pretty much change anything (except for theid, which I havent been able to change like this yet) on your nodes or edges.
You can find that here, although I must admit that I ve seen better documentation for a library.
http://visjs.org/docs/data/dataset.html
Can anyone suggest a Javascript chart library that could produce such chart: Refer this Image
The emphasis here is on two separate areas: history and schedule. Each of them should have a different title and background color. Basically, it would be great if each area is configurable separately.
I tried Google Charts but did not see how to implement it in a clean way. I could create two charts with a specific layout, but I would prefer a more dynamic and correct way of doing that.
If you're looking for a charting library to accomplish this, ZingChart would do the trick. By setting "layout" in the graphset object to "x2" and creating two separate chart objects, your charts are set up side-by-side but can still be manipulated individually. I've included a demo below for reference. Run it to see the chart.
You can download the entire library for free on the site. If you have any questions, I'm on the team and happy to help! You can reach us at support#zingchart.com.
var myChart = {
"layout":"x2",
"background-color":"#eee",
"border-color":"#000",
"border-width":2,
"graphset":[
{
"type":"bar",
"background-color":"#eee",
"width":"60%",
"x":0,
"y":0,
"title":{
"text":"Chart 1",
"text-align":"left",
"font-color":"black",
"background-color":"#ddd"
},
"scale-x":{
"values":["2007","2008","2009","2010","2011","2012","2013","2014"],
"label":{
"text":"History",
"offset-x":-125,
"padding-top":10
},
"tick":{
"visible":false
},
"guide":{
"visible":false
}
},
"scale-y":{
"values":"0:12:2",
"guide":{
"line-style":"solid"
}
},
"plot":{
"stacked":true
},
"plotarea":{
"margin-right":0,
"background-color":"#ddd"
},
"legend":{
"shared":true,
"visible":false
},
"series":[
{
"values":[3,5,5,5,8,6,4,3],
"background-color":"#018BD3"
},
{
"values":[null,null,null,null,3,null,null,null],
"background-color":"#F27D30"
},
{
"values":[],
"background-color":"#F2D134"
},
{
"values":[null,null,null,null,null,2,null,2],
"background-color":"#14AE13"
}
]
},
{
"type":"bar",
"background-color":"#eee",
"width":"40%",
"x":"60%",
"y":0,
"title":{
"text":"Chart 2",
"text-align":"left",
"font-color":"black",
"background-color":"#ccc"
},
"scale-x":{
"values":["2015","2016","2017"],
"tick":{
"visible":false
},
"guide":{
"visible":false
},
"label":{
"text":"Schedule",
"offset-x":-25,
"padding-top":10
}
},
"scale-y":{
"values":"0:12:2",
"line-color":"#777",
"tick":{
"visible":false
},
"item":{
"visible":false
},
"guide":{
"line-style":"solid"
}
},
"plot":{
"stacked":true
},
"plotarea":{
"margin-left":0,
"margin-right":"50%",
"background-color":"#ccc"
},
"legend":{
"shared":true
},
"series":[
{
"values":[7,1,0],
"background-color":"#018BD3"
},
{
"values":[],
"background-color":"#F27D30"
},
{
"values":[3,6,1],
"background-color":"#F2D134"
},
{
"values":[1,null,null],
"background-color":"#14AE13"
}
]
}
]
};
zingchart.render({
id : "myChart",
height : "300px",
width : "100%",
data : myChart
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
You can try d3Js - examples library.
The possible solution is you have to define Two graph separately with using <div> tag.
Give each of them separate CSS values (for colors and your specific needs), And then define both <div> under single division.
First try to edit JsFiddle
You can try LightningChart JS library. We have an extensive dashboard API which allows you to group multiple independent and customizable charts into a layout which can then also be resized on the fly.
You should take a look at our interactive examples for this specific use case Dashboard Example.
Full disclosure: I am a developer for LightningChart, I think you may find this very useful.
I'm using the D3PlUS JS library (http://d3plus.org/) and I need to implement a treemap chart with a json recursive structure. I could just to do a first level treemap chart, but I couldn't do mack my code to be multilevel.
example.json
[
{
"id":"First cell",
"value": 10,
"child":
[
{
"id":"Child first cel",
"value": 10,
"child":[]
}
]
},
{
"id":"Second cell",
"value": 90,
"child":
[
{
"id":"Child second cell 1",
"value": 10,
"child":[]
},
{
"id":"Child second cell 2",
"value": 20,
"child":[]
},{
"id":"Child second cell 3",
"value": 10,
"child":[]
}
]
}
]
<!doctype html>
<meta charset="utf-8">
<link href="http://d3plus.org/css/d3plus.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://d3plus.org/js/d3.js"></script>
<script src="http://d3plus.org/js/d3.geo.tile.js"></script>
<script src="http://d3plus.org/js/topojson.js"></script>
<script src="http://d3plus.org/js/modernizr.js"></script>
<script src="http://d3plus.org/js/d3plus.js"></script>
<!-- create container element for visualization -->
<div id="viz"></div>
<script>
// instantiate d3plus
var visualization = d3plus.viz()
.container("#viz") // container DIV to hold the visualization
.data("data/exemple.json")
.type("tree_map") // visualization type
.id("id") // key for which our data is unique on
.size("value") // sizing of blocks
.draw() // finally, draw the visualization!
</script>
Anybody can help me?
Two modifications were necessary:
changing the data to what is expected by the chart, paying special attention to getting the IDs right (see docs). This was the trickiest part.
nesting the ids in the config param, in accordance with the data: .id(["id","cid"])
Here is a complete working PLUNK.
EDIT: Per OP request, I added one more level to the treemap. It is important to keep the id hierarchy, so now the config param is: .id(["id","cid","gid"]). Also, make sure to remove the value field in the json file for all records that have children...otherwise, D3plus will consider that as part of the values to display with the children.