We Keep Coding

Resize nodes in vis js which has label inside e.g. Circle, Box

How to set size of shapes in vis js which can have label inside?
e.g.
Code1:
shape: 'circle',
color: {
border: 'black',
background: 'white'
},
borderWidth: 1,
borderWidthSelected: 2,
in above Code1, if there is nothing in label to put in shape circle, then how i can increase/decrease the size of same. If shape is anything for which label is put outside we can increase and decrease the size of icons. e.g.
Code2:
shape: 'icon',
icon: {
face: 'FontAwesome',
code: '\uf1db',
size: 100,
color: '#000000'
}
As in above Code2 for icon 'size' option is available.Is there any way to use 'size' option in Code1?

The documentation states
"...The size is used to determine the size of node shapes that do not
have the label inside of them. These shapes are: image, circularImage,
diamond, dot, star, triangle, triangleDown, square and icon..."
So the answer is no. (Details can be found here https://visjs.github.io/vis-network/docs/network/nodes.html)
But as an workaround you could do something like this:
shape: 'circle',
scaling: {
label: {
enabled: true,
min: 50,
max: 50
}
},
value: 1
Where as with the scaling.label.min and scaling.label.max property, you could, change the size of the node. (but you will need a value, for the node) I hope this helps.

How to change the background color of the Highcharts(HighMaps in specific) dynamically?

when a user selects a theme in a page,the backgroundcolor of the highchart should also change based on the user selection .
My code:
var colorCode="#fff";
var chart1=new Highcharts.mapChart('geoMap', {
chart: {
backgroundColor:colorCode,
type: 'map'
},
title: {
text: 'US'
},
legend: {
enabled: true
},
......
......
......
$('#theme1').click(function() {
// colorCode="default"
colorCode={
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(142, 158, 171)'],
[1, 'rgb(238, 242, 243)']
]
}
chart1.redraw();
});
But the chart isn't getting refreshed so the colorCode is not getting applied. Any kind of suggestion would be helpful.

You need to actually assign the new color to the chart options
chart1.options.chart.backgroundColor = colorCode
i made a small fiddle that takes the color from a dropdown (which would emulate your user changing the theme) and sets it as the background of you chart http://jsfiddle.net/grLrmxhd/1/

Cytoscape content background

I am wondering if it is possible to set the background color of an edge label with cytoscape? I am setting the rest of the edge styles like this.
style: cytoscape.stylesheet()
.selector("edge")
.css({
"line-color": "#444444",
"width": 4,
"content": "data(length)"
})

You can set an outline on edge labels: http://js.cytoscape.org/#style/labels

How to add tooltip for indicators plot using dojocharts

I am creating a bar chart using dojocharts and version is 1.9 .Here i add a Indicator to a bar chart. I want the add text with html tag(like break tag) and also tooltip on the Indicator. I have added a labelFunc to return the HTML I want, but it only shows as plain text. here html tag and tooltip for that indicators not working.Any one suggest me is it possible for add tooltip and html tag on indicator of dojocharts.
Below is my code
Chart.addPlot("indicator", { type: "Indicator",
vertical:false,
values:30,
offset: { y: -2, x: -50 },
lineStroke: { color: "green",style: "line" },
labels: true,
htmlLabels: true,
// start:true,
// labelStyle:"inside",
//maxBarSize: 35,
fontColor:"red",
// precision: 1,
labelFunc: max,
stroke: {color:"rgb(204, 204, 204)",height:40,width: 25},
outline: "purple",
fill: "#666"
});

Use the Tooltip plugin.
For an example see this tutorial https://dojotoolkit.org/documentation/tutorials/1.7/charting/
The plugin is called dojox.charting.action2d.Tooltip and it is described here https://dojotoolkit.org/api/?qs=1.7/dojox/charting/action2d/Tooltip

ExtJs 4 color theme for bar chart

I am using extJs 4 to draw chart similar to this http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/BarRenderer.html. However, I will have 2 or more segments for each bar and there can be any number of bars. I want to have totally different colors for all of the bars. Further, i want different shades of the current bar color for the segments of that bar. The same color codes need to be reflected in the legends.
Your help is greatly appreciated.

You would have to create a custom chart theme which specifies the colors. I did one for a line chart once. You may need to fiddle with it some to make it work for a barchart, if so, you can find all of the possible them options in %extjs-root%/src/chart/theme/Base.js. Heres what I had for the line chart:
// CUSTOM CHART THEME
Ext.chart.theme.myTheme = Ext.extend(Ext.chart.theme.Base, {
constructor: function(config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: ['rgb(0, 0, 0)',
'rgb(0,0,255)',
'rgb(255,0,0)',
'rgb(0,128,0)',
'rgb(128,0,128)'
],
}, config));
}
});
Make sure you include the theme in your bar chart config.
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: myChartStore,
theme: 'Events',
legend: {
position: 'right'
},
// other configs ...

I found a solution.
http://www.sencha.com/learn/drawing-and-charting/
Put this in your view:
var colors = ['#ff0000','#FF9900','#009933', '#888', '#999'];
var baseColor = '#eee';
Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',
constructor: function(config) {
this.callParent([Ext.apply({
colors: colors
}, config)]);
}
});
And then call the theme you created:
Ext.define('MyAPP.view.Graph.GrafPlazos',{
extend: 'Ext.chart.Chart',
alias : 'widget.plazocibar',
id: 'chart_plazosci',
xtype: 'chart',
style: 'background:#fff',
animate: true,
shadow: true,
store: 'Plazos.GPlazosci',
theme: 'Fancy',

Chart uses Theme as mixins
So you can directly use theme property called themeAttrs.
For example if you are in constructor of column/stacked column chart, want to change the color of columns You can specify
this.themeAttrs.colors = ['#F2C72B','#a5c249','#E88712','#9D5FFA'];