I am trying to export my ag-grid as an Excel document. I added in excelStyles just for the header, but they aren't being applied to the document.
Here is the code:
var columnWidth = 100;
var params = {
columnWidth,
sheetName: 'Types',
suppressTextAsCDATA: false,
rowHeight: 25,
headerRowHeight: 25,
allColumns: true,
excelStyles: [
{
id: 'header',
font: {
color: '#000000',
bold: true
},
interior: {
color: '#bed4f7',
pattern: 'Solid'
}
}
]
}
gridOptions.api.exportDataAsExcel(params);
}
What do I need to change to make it work?
For anyone who makes the same stupid mistake I did, you need to define the excelStyles in the gridOptions, not the params!
Related
So I've read this post, where someone visualizes 4chan posts in a graph. It looks very cool so I wanted to try it out myself. Everything is working good but I'm having some problems with my visjs options.
I am trying to get as close to the options he used. Sadly he hasn't posted them anywhere.
This is what I've got so far:
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
customScalingFunction: function (min,max,total,value) { return value },
label: {
min: 8,
max: 30,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: {
barnesHut: {
springLength: 1000,
springConstant: 1,
avoidOverlap: 1
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
}
};
My Problem is, that they still don't seem quite right and I also have trouble with overlapping nodes.
JSFiddle
Sorry for the unclean code.
I want to change the underlying .css file of the vis.js library.
However, the changes are not reflected and I am even losing on features like "tooltips" or "navigation buttons".
I've tried to put the following into my .html file:
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js">
</script>
<link href="/node_modules/vis/dist/vis.css" rel="stylesheet" type="text/css" />
All I want is to change the color of the navigation buttons and the tooltips.
Cheers!
This Q is rather old, but just for the record:
From what I've seen, elements in VIS networks are styled via settings of the function passed to it when the graph is rendered. This is probably because vis.js renders the graph to a HTML canvas which is basically a black box for browser and it cannot apply any styling to it dynamically.
So, head over to the docs http://visjs.org/docs/network/ and read up what's possible. Generally, you can change color {fill, border, text}, font family, fontsize, shapes of nodes, style of edges, etc.
Also, very useful is the examples gallery: http://visjs.org/network_examples.html
Example of my settings:
var options = {
// tree style
layout: {
// this would make the tree directed
// hierarchical: {
// direction: LR,
// sortMethod: directed
// },
// this makes the tree always the same
randomSeed:2
},
interaction: {
dragNodes :false,
navigationButtons: true, // these need some more CSS
keyboard: true
},
// read the docs for this
physics: {
barnesHut: {
avoidOverlap: 0.99,
gravitationalConstant: -3300,
springLength: 150,
},
minVelocity: 0.75,
timestep: 0.9,
stabilization: {
enabled:true,
iterations:1000,
updateInterval:25
}
},
// general nodes settings
nodes: {
shape: 'box',
font: {
size: 14,
color: '#3f3f3f',
strokeWidth: 3,
strokeColor: 'white',
face: 'akrobat'
},
borderWidth: 2,
color: {
background: '#d7d7f3',
border: '#3030a9',
}
},
// settings for groups of nodes
groups: {
first: {
shape: 'diamond',
size: 5
},
second: {
shape: 'dot',
size: '8',
font: {
strokeWidth: 0,
size: 18
},
color: {
background: '#f3d7d7',
border: '#a93030'
}
}
},
// general edges setting
edges: {
font: {
align: 'middle',
face: 'arial'
},
smooth: {
forceDirection: none
}
}
};
I’m developing an app that creates pdfs automatically. Using the pdfmake, I can create the pdf easily but I can’t find anywhere how to put a background on the pdf. I found how to put images as a background but I can’t find how to put a solid color.
var docDefinition = {
pageSize: 'A3',
content: [{
text: $globals.mural.name,
style: 'header'
}, {
image: uri,
width: size.width,
height: size.height,
margin: size.margin,
alignment: 'center',
}],
styles: {
header: {
alignment: 'center',
fontSize: '70',
font: 'LaneNarrow',
color: $globals.mural.layout.textColor
}
}
};
As of now pdfMake doesn't seem to support directly adding background color to main content. For this one approach is to use the canvas method.
In doc defination you need to add
background: function () {
return {
canvas: PdfOrderUtilities.getCanvas()
};
},
//The actual function
public static getCanvas() {
return [
{
type: 'rect',
x: 0, y: 0, w: 600, h: 840,
//The background color
color: '#F4F6F9'
}
]
}
I have been using HighCharts extensively for one of my project. Recently I started using Annotation.js along with it.
ALthough, the library works well but I can't configure its usage at all. The link here provides options but they are not working for me
My issues:
I have multiple charts on a page. As soon as I use annotation.js , each of them shows annotation. how do I show them on desired charts. I tried
annotations :[{ enabledButtons : false}]
and
annotationOptions :{ enabledButtons : false}
Both of them had no affect.
2.I want to display the pallette (containing icons like square, circle etc..) at top-right.
I used xValue, yValue attribute,
I used x, y attribute,
I used 'anchorX and anchorY` attribute.
None of the above works for me.
I want just to show the text icon. How can I hide other icons (line, square and circle). Didn't get any way to try for this one.
Am I missing something here. Kindly suggest. My basic way of using chart config is as below:
chart: {
type: chartData.Type.toLowerCase()
//annotations: [],
},
annotationsOptions: {
xValue: 234,
yValue:12
},
title: {
text: chartData.xTitle ? chartData.xTitle : ""
},
xAxis: {
categories: chartData.Categories
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: chartData.yTitle ? chartData.yTitle : ""
},
plotLines: [{
value: 0,
width: 1,
color: "#808080"
}]
},
annotations: [{
xValue: 40,
yValue: 15
}],
plotOptions: {
line: {
marker: {
enabled: true
}
}
},
series: chartData['Series'][opt] ? chartData['Series'][opt] : chartData['Series'][opt.replace(/-|\s/g, "")],
}
I have tried annotations inside charts object as well.
You should be able to hide annotations buttons using:
annotationsOptions: {
enabledButtons: false
},
You can use annotationsOptions.buttons for changing the buttons you would like to display. Here you can see the code that will show only text butotn:
annotationsOptions: {
buttons: [{
annotationEvents: {
step: function() {}, // to be called during mouse drag for new annotation
stop: function(e) {
var ann = this,
chart = ann.chart,
index = chart.annotationInputIndex = chart.annotationInputIndex ? chart.annotationInputIndex : 1,
input = document.createElement('span'),
button;
input.innerHTML = '<input type="text" class="annotation-' + index + '" placeholder="Add text"><button class=""> Done </button>';
input.style.position = 'absolute';
input.style.left = e.pageX + 'px';
input.style.top = e.pageY + 'px';
document.body.appendChild(input);
input.querySelectorAll('input')[0].focus();
button = input.querySelectorAll('button')[0];
button.onclick = function() {
var parent = this.parentNode;
ann.update({
title: {
text: parent.querySelectorAll('input')[0].value
}
});
parent.parentNode.removeChild(parent);
};
chart.annotationInputIndex++;
} // to be called after mouse up / release
},
annotation: { // standard annotation options, used for new annotation
anchorX: 'left',
anchorY: 'top',
xAxis: 0,
yAxis: 0,
shape: {
// type: 'text'
}
},
symbol: { // button symbol options
shape: 'text', // shape, taken from Highcharts.symbols
size: 12,
style: {
'stroke-width': 2,
'stroke': 'black',
fill: 'red',
zIndex: 121
}
},
style: { // buton style itself
fill: 'black',
stroke: 'blue',
strokeWidth: 2,
},
size: 12, // buton size
states: { // states for button
selected: {
fill: '#9BD'
},
hover: {
fill: '#9BD'
}
}
}]
}
Here you can find an example how it may work: http://jsfiddle.net/7m3Mr/261/
You can move your buttons using:
annotationsOptions: {
buttonsOffsets: [0, -50],
},
Here you can find demo showing how it may work:
http://jsfiddle.net/7m3Mr/263/
I am trying to draw a vis.js network diagram and have vis load and position the nodes. I then want the physics to be disabled so the nodes can be moved by the user. I have tried this but it is not working.
var options = {
nodes: {
borderWidth:4,
size:60,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black'}
},
edges: {
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: 'black'
},
{ physics: enabled: false; };
Has anyone done this? if so can you provide an example or advice on best way to accomplish this. I have also read the explanation located here, but not being too familiar with java I can't figure the steps out.
Thanks
After some more work and help from the vis.js developer here is the completed code, minus the json data and some options. The trick is to use the "stabilizationIterationsDone" event and disable physics:
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: ...,
edges: ...,
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18,
avoidOverlap: 1.5
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 25
}
}
};
network = new vis.Network(container, data, options);
network.on("stabilizationIterationsDone", function () {
network.setOptions( { physics: false } );
});
I suppose you first want to let the network stabilize and only then disable physics? In that case you can load the Network with physics and stabilization enabled. Once the nodes are stabilized, the stabilized event is fired. Then you can disable the physics via network.setOptions
I was able to figure this out and the code now looks like this
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
borderWidth:1,
size:45,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black',
size: 11,
face :'arial',
},
},
edges: {
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: {
color:'#848484',
highlight:'#848484',
hover: '#848484',
},
font: {
color: '#343434',
size: 11, // px
face: 'arial',
background: 'none',
strokeWidth: 5, // px
strokeColor: '#ffffff',
align:'vertical'
},
smooth: {
enabled: false, //setting to true enables curved lines
//type: "dynamic",
//roundness: 0.5
},
}
};
network = new vis.Network(container, data, options);
network.setOptions({
physics: {enabled:false}
});
}
I had to move the network.setOptions() as shown in the new code and it is now working as desired.