I am using the force directed graph in angular nv3d. I would like to customize the text color on the nodes as well as modify the tool tip. Ive also been trying to figure out how to force the nodes to be more sparse. Here is my chart object:
chart: {
type: 'forceDirectedGraph',
height: 450,
color: function(d) {
return color(d.Name);
},
tooltipContent: function (key) {
return '<h3>' + key + '</h3>';
},
margin: {top: 20, right: 20, bottom: 20, left: 20},
nodeExtras: function(node) {
node && node
.append('text')
.attr('dx', 15)
.attr('dy', '.35em')
.text(function(d) {
return d.Name;
})
.style('font-size', '25px');
},
},
};
As you can see, I tried adding the tooltipContent property to the chart object to no avail. Any help would be greatly appreciated, thanks!
To customize the tool tip do the following
chart: {
type: 'forceDirectedGraph',
... /* All properties */
height : 400,
tooltip : {
contentGenerator : function (obj) { return "<div> **custom formating** </div>"}
}
}
Related
<div id="barcat"></div>
<!-- Plotly chart will be drawn inside this DIV -->
<script>
Plotly.d3.json('http://192.168.2.11:8983/solr/first_csv_solr/select?facet.field=categories&facet=on&q=*:*&facet.pivot=categories&wt=json&omitHeader=true', function (err, rows) {
function unpack(rows, key) {
return rows.map(function (row) { return row[key]; });
}
var data = [{
x: unpack(rows, 'value'),
y: unpack(rows, 'count'),
type: 'bar',
marker: {
color: 'rgb(158,202,225)',
opacity: 0.6,
line: {
color: 'rgb(8,48,107)',
width: 0.5
}
}
}];
console.log("data")
var layout = {
height: 500,
width: 600,
// color: 'rgb(31,119,180)'
}
Plotly.newPlot('barcat', data, layout);
})
</script>
I am getting the counts of factes but when i try to convert in csv it show only relevent column name. I want response as csv so i can connect in d3.js .
even i try to convert in json also but it not showing in standard json format.because it show header in json response
http://IP:8983/solr/first_csv_solr/select?facet.field=categories&facet=on&q=*:*&facet.pivot=categories&wt=json&omitHeader=true
I have to implement progress bar in ag-grid table column , i have search in ag-grid documentation section but there is nothing. any other website for the same.
Thank you in advanced.
You can use cellRenderer config of a column to specify which function or compnent should be rendered in the cell.
Here is a link to examples that does not really talk about rendering the progressbar but it shows quite a few examples to render custom elements in the cell. You can modify the HTML of these to return and render an HTML div as per your requirement.
https://www.ag-grid.com/javascript-grid-cell-rendering-components/
Do like this may be it will help you (it is JavaScript version). to get more info click on below link . may be it will help you
https://docs.google.com/document/d/10K54wwj12IH9P1CI1Uv2k3MD__P8-LQDYqL8ofe9Exk/edit?usp=sharing
process bar is from https://getbootstrap.com/docs/4.0/components/progress/
const columnDefs = [
{
headerName: "Process Bar",
minWidth: 150,
field: "process_bar",
sortable: true,
valueFormatter: function (params) {
if (params.value !== undefined) {
if(params.value==""){
return '<div class="progress">
<div class="progress-bar" role="progressbar"style="width: 25%;" aria-valuenow="'+params.value+'" aria-valuemin="0" aria-valuemax="100">25%
</div>
</div>';
}else{
return params.value;
}
}
}
}
];
const gridOptions = {
defaultColDef: {
flex: 1,
resizable: true,
},
getRowStyle: params => {
if (params.data != undefined){
if (params.data.rowColor=="blue") {
return { background: '#f9f9f9' };
}else{
return { background: 'white' };
}
}
},
components: {
loadingRenderer: function (params) {
if (params.value !== undefined) {
return params.value;
} else {
return '<img src="loading.gif">';
}
},
},
singleClickEdit: true,
rowBuffer: 0,
rowSelection: 'multiple',
caseSensitive: false,
rowModelType: 'infinite',
columnDefs: columnDefs,
pagination: false,
paginationPageSize:100,
cacheOverflowSize: 2,
maxConcurrentDatasourceRequests: 1,
infiniteInitialRowCount: 1000,
maxBlocksInCache: 10,
overlayNoRowsTemplate:'<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow;">No Data Found!</span>',
};
One possible way: create your own loading overlay for the grid.
https://www.ag-grid.com/javascript-grid-overlays/
or
https://www.ag-grid.com/javascript-grid-overlay-component/
In the overlay, you can use any progress bar of choice (e.g. Bootstrap).
I'm using some custom attributes while I'm creating my objects. For example in this case "name" and "icon":
$scope.addRoundRect = function () {
var coord = getRandomLeftTop();
var roundrect = (new fabric.Rect({
left: coord.left,
top: coord.top,
fill: '#' + getRandomColor(),
width: 250,
height: 250,
opacity: 1,
scaleX: 1,
scaleY: 1,
angle: 0,
rx: 10,
ry: 10,
strokeWidth: 0,
name: "Rounded Rectangle",
icon: "crop-square"
}));
canvas.add(roundrect).setActiveObject(roundrect);
};
This is my copy/paste function. As you can see I have already tried to paste the relevant attributes – bu I think that they are simply not cloned with the object:
function copy() {
canvas.getActiveObject().clone(function (cloned) {
_clipboard = cloned;
});
}
function paste() {
_clipboard.clone(function (clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
name: clonedObj.name,
icon: clonedObj.icon,
});
if (clonedObj.type === 'activeSelection') {
clonedObj.canvas = canvas;
clonedObj.forEachObject(function (obj) {
canvas.add(obj);
});
clonedObj.setCoords();
} else {
canvas.add(clonedObj);
}
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
});
To make it short: is there a way to clone and paste also this attributes without having to modify the source (ie. impleneting a full fledged custom attribute in the JSO serialization)?
var canvas = new fabric.Canvas('c');
var roundrect = new fabric.Rect({
left: 50,
top: 30,
fill: 'blue',
width: 250,
height: 250,
opacity: 1,
scaleX: 1,
scaleY: 1,
angle: 0,
rx: 10,
ry: 10,
strokeWidth: 0,
name: "Rounded Rectangle",
icon: "crop-square"
});
canvas.add(roundrect).setActiveObject(roundrect);
var customProperties = 'name icon'.split(' ');
function copy() {
canvas.getActiveObject().clone(function(cloned) {
console.log(cloned);
_clipboard = cloned;
}, customProperties);
}
function paste() {
// clone again, so you can do multiple copies.
_clipboard.clone(function(clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
});
if (clonedObj.type === 'activeSelection') {
// active selection needs a reference to the canvas.
clonedObj.canvas = canvas;
clonedObj.forEachObject(function (obj) {
canvas.add(obj);
});
// this should solve the unselectability
clonedObj.setCoords();
} else {
canvas.add(clonedObj);
}
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
console.log(clonedObj);
_clipboard = clonedObj;
},customProperties);
}
canvas {
border: blue dotted 2px;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<button onclick='copy()'>copy</button>
<button onclick='paste()'>paste</button><br>
<canvas id="c" width="400" height="400"></canvas>
object.clone accepts callback function and any additional property you want to include as another parameter. You can send your name and icon as properties to include.
And in paste you no need to clone that object if you are doing so, make sure there also send you are including your additional properties.
Can any one help why my line chart is not plotting correctly? I have put my code with data at : http://jsfiddle.net/madasuk/U9KH5/4/
can any one help to plot it correctly? lines in the graph are jumbled up and tool tip is also not appearing?
function addLineChart(){
var chart;
nv.addGraph(function() {
chart = nv.models.lineChart()
.options({
margin: {left: 100, bottom: 100},
// x: function(d,i) { return i},
x : (function(d,i) {
return new Date(d.x);
}),
showXAxis: true,
showYAxis: true,
transitionDuration: 250
})
;
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
chart.xAxis
.axisLabel("Time (s)")
// .tickFormat(d3.format(',.1f'));
.tickFormat(function(d) {
return d3.time.format('%m/%d/%y')(new Date(d))
});
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format(',.2f'))
// .tickFormat(d3.format(',g'));
;
d3.select('#chart1 svg')
.datum(cumulativeMSIData())
.call(chart);
//TODO: Figure out a good way to do this automatically
nv.utils.windowResize(chart.update);
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
}
I have a question related the chart export.
Please see Jsfiddle here
I added a text label using chart.renderer.text on the Yaxis for the latest value of series.
If I directly click button "Export Image". There is no problem, the label can be displayed. I'm using the following way to export image. draw_labels() is a function to draw yaxis label.
$("#b").click(function () {
chart.exportChart(null, {
chart: {
backgroundColor: '#FFFFFF',
width: 972,
height: 480,
events: {
load: function () {
draw_labels(this);
}
}
}
});
});
The problem is after I clicked range selector or change Xaxis range. When I try to export the
chart to image, there is no labels are drawn. The following is the complete code.
The following is the complete code:
$(function () {
var chart;
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: function () {
draw_labels(this);
$("#b").click(function () {
chart.exportChart(null, {
chart: {
backgroundColor: '#FFFFFF',
width: 972,
height: 480,
events: {
load: function () {
draw_labels(this);
}
}
}
});
});
}
}
},
series: [{
name: 'AAPL',
id: 'test',
data: data,
tooltip: {
valueDecimals: 2
}
}],
navigator: {
enabled: false
},
yAxis: {
tickWidth: 0,
id: 'value_axis',
type: 'linear',
gridLineColor: '#EEE',
lineColor: '#D0CDC9',
lineWidth: 0,
minorTickInterval: null,
opposite: true,
offset: 0
},
xAxis: {
events: {
afterSetExtremes: function (e) {
console.log('test');
$('[id="test_text"]').remove();
draw_labels(chart);
}
}
}
});
});
function draw_labels(chart) {
$(chart.series).each(function (i, serie) {
var s_id = serie.options.id;
var temp_id = s_id;
var point = serie.points[serie.points.length - 1];
if (point) {
var pre, post;
if (point.y) {
var last_value_dis = (point.y).toFixed(1);
yaxis_name = 'value_axis';
//Get Yaxis position
var y_axis = chart.get(yaxis_name);
offsite_yaxis = 0;
element_text = chart.renderer.text(
//the text to render
'<span style="font-size:10px;font-weight:bold;color:' + serie.color + ';">' + last_value_dis + '</span>',
//the 'x' position
y_axis.width + y_axis.offset,
//the 'y' position
chart.plotTop + point.plotY + 3).attr({
id: temp_id + '_text',
zIndex: 999
}).add();
}
}
});
}
});
Here, I have fixed it for you. Here is a saved image:
Following changes have been done:
Added a redraw event to your exportchart
redraw: function () {
$("#test_text").remove() ;
draw_labels(this);
}
Changed this line in afterSetExtremes
$('[id="test_text"]').remove();
to
$("#test_text").remove() ;
Earlier one was not working as expected, so I had to change it.
Problem with disappearing text is related with id, when I removed it, label appears. But then I came across second issue, wrong y position. So i declare global variable, then when you call your function, set position of label, and use in chart exporting this variable. As a result label is exported correct.
http://jsfiddle.net/UGbpJ/11/