Im working on a graph vizualization project and am using JSnetworkx. So far I have been able to change edge width and color but am having 0 luck trying to get it to display edge labels. Please help.
var G = new jsnx.DiGraph();
G.addNodesFrom([1,2,3,4,5,[9,{color: '#008A00'}]], {color: '#0064C7'});
G.addCycle([1,2,3,4,5]);
G.addEdgesFrom([[1,9], [9,1]],{label:"edge_1"});
jsnx.draw(G, {
element: '#canvas',
withLabels: true,
nodeStyle: {
fill: function(d) {
return d.data.color;
}
},
edge_style:{
'stroke-width':5,
fill: "black"
},
labelStyle: {fill: 'pink'},
stickyDrag: true
});
Below is a prototype that worked for me.
var G = new jsnx.Graph();
G.addNodesFrom([
['a', { color: 'red' }],
['b', { color: 'green' }],
['c', { color: 'white' }]
]);
G.addEdgesFrom([
['a', 'b', { label: 'a to b label' }],
['a', 'c', { label: 'a to c label' }]
]);
jsnx.draw(G, {
element: '#canvas',
layoutAttr: {
friction : 0,
gravity : 0,
linkDistance: 400
},
withLabels: true,
withEdgeLabels: true,
nodeStyle: {
fill: function (d) {
return d.data.color;
}
},
edgeLabels: function (d) {
return d.data.label;
}
});
Related
I have a data portal, in which a user can visualize the data by graph or by map. Strange thing is, that when I click on the map symbol and the new page is being loaded with the map instead of the graph now, the correctly colored map appears for a very short moment, but is then overridden or overlaid by an empty map.
Here is a short video which demonstrates the problem. And here is the site.
When I reload the page, it sometimes work.
Here is the code for the map:
$(function () {
$.getJSON('map.csv', function (data)
{
// Initiate the chart
$('#container').highcharts('Map', {
title:
{
text: "Medium size cities (More than 300 000 people in 2014), % total",
style:
{
fontFamily: 'Arial',
fontSize: '20px',
/* fontWeight: 'bold', */
lineHeight: '22px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
subtitle:
{
text: "2035",
style:
{
fontFamily: 'Arial',
fontSize: '14px',
/* fontWeight: 'bold', */
lineHeight: '22px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
legend:
{
title:
{
text: "% of population",
style:
{
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
y: -20
},
mapNavigation:
{
enabled: true,
buttonOptions:
{
verticalAlign: 'middle'
}
},
tooltip:
{
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
padding: 0,
formatter: function ()
{
return '<b>' + this.point.name + '</b><br>'
+ this.point.value + '<br>'
+ this.series.name ;
}
},
credits:
{
position:
{
align: 'left',
x: 10,
y: -5
},
style:
{
fontSize: '11px',
lineHeight: '12px'
},
mapText: '',
text: 'Source: World Urbanization Prospects; UN Environment Live',
href: 'http://esa.un.org/unpd/wup/'
},
colorAxis:
{
max: 100 },
plotOptions: {
series: {
point: {
events: {
click: function (e) {
location.href = 'graphexe_gegslive.php?selectedID=ulv_8&selectedCountries%5B%5D=' + this.id + '&selectedLanguage=en&selectedDatasettype=&selectedYears=all&type=gegslive&selectedYear=2016&selectedModule=graph';
}
}
}
}
},
series : [
{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'iso2'],
name: "% of population",
states:
{
hover:
{
color: '#BADA55'
}
}
}]
});
});
});
</script>
What is causing this problem? Thanks for any hints.
You are loading the chart twice and both times this is done asynchronously.
The order is unstable, but one time you are loading empty data (jQuery's getJSON has data as an empty array) and the second load is with correct data.
You should check why there are two places where the chart is created and why one time the data is wrong.
Font color in chartjs is light gray, then when you want to print from page, it does not appear.
I change the font color of chartjs in options attribute, but it does not work.
How can I change the font color in chartjs angular
public options:any = {
legend: {
labels: {
// This more specific font property overrides the global property
fontColor: 'red',
fontSize: '30'
}
}
};
in template :
<canvas baseChart
height=100
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[colors]="chartColors"
[chartType]="barChartType"
[options]="options"
>
</canvas>
I use chartjs like following in ts file.
This is my complete ts file:
import { Component, Input, OnInit } from '#angular/core';
import { Test } from './models/test.model';
#Component({
selector: 'app-customer-report-test',
templateUrl: './customer-report-test.component.html',
styleUrls: ['./customer-report-test.component.css']
})
export class CustomerReportTestComponent implements OnInit {
#Input('test') test: Test = new Test();
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels:string[];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public barChartData:any[];
backgroundColorList: string[];
public chartColors: any[] = [
{
backgroundColor: this.backgroundColorList
}];
public options:any;
constructor() { }
//----------------------------------------------------------------------------
ngOnInit() {
//set Label
this.barChartLabels = [];
for(let i=1; i<= this.test.data_array.length; i++){
this.barChartLabels.push('' + i);
}
//set data chart
this.barChartData = [{data: this.test.data_array, label: this.test.test_type[1]}]
this.test.test_type[1]}, {data: [20,20, 20, 20],type: "line",label: ['0', '1', '2', '3'] ,fill:'none'}]
// set color to line according to state_array
this.backgroundColorList = [];
if(this.test.state_array.length != 0){
for(let i=0; i<this.test.data_array.length; i++){
if(this.test.state_array[i] == 0){
this.backgroundColorList.push('#069ed6');
}else if(this.test.state_array[i] == 1){
this.backgroundColorList.push('#F5482D');
}else if(this.test.state_array[i] == 2){
this.backgroundColorList.push('#CAC409');
}
}
}
else{
for(let d of this.test.data_array){
this.backgroundColorList.push('#069ed6');
}
}
this.chartColors = [
{
backgroundColor: this.backgroundColorList
}];
this.options = {
responsive: true,
title: {
display: true,
text: 'Custom Chart Title'
},
legend: {
display: true,
labels: {
fontColor: 'red'
}
}
};
}
}
for changing the color of numbers and lines in coordinate plane,we can do:
for example in xAxes:
xAxes: [{
gridLines: {
display: true,
color: "red" // this here
},
ticks: {
fontColor: "red", // this here
}
}],
and font and color of labels:
legend: {
display: true,
labels:{
fontSize: 10,
fontColor: 'red',
}
},
DEMO.
You may try to edit the source code.
1. Go to the link /node_modules/chart.js/src/core/core.js in your node modules folder.
2. edit the following code i.e the core.js file. change the
defaultFontColor: '#0000ff'
to any color you want. I have implemented this in my code for pie chart. and it worked.
`
defaults._set('global', {
responsive: true,
responsiveAnimationDuration: 0,
maintainAspectRatio: true,
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
hover: {
onHover: null,
mode: 'nearest',
intersect: true,
animationDuration: 400
},
onClick: null,
defaultColor: 'rgba(0,0,0,0.1)',
defaultFontColor: '#0000ff',
defaultFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
defaultFontSize: 12,
defaultFontStyle: 'normal',
showLines: true,
// Element defaults defined in element extensions
elements: {},
// Layout options such as padding
layout: {
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
}
});
module.exports = function() {
// Occupy the global variable of Chart, and create a simple base class
var Chart = function(item, config) {
this.construct(item, config);
return this;
};
Chart.Chart = Chart;
return Chart;
};`
I looked into dia.Link.prototype.attr with a few examples and understand that Link attributes can be directly defined this way:
joint.dia.Link.define('flow.Link', {
router: {
name: 'normal'
},
connector: {
name: 'normal'
},
attrs: {
'.tool-options': {
'data-tooltip-class-name': 'small',
'data-tooltip': 'Inspect me',
'data-tooltip-position': 'left'
},
'.marker-source': {
fill: 'none',
stroke: 'none'
},
'.connection-wrap': {
fill: 'none'
},
'.connection' : {
stroke: '#0000ff',
strokeWidth: 2,
strokeDasharray: '0',
fill: 'none'
},
'.marker-target': {
fill: '#0000ff',
stroke: '#0000ff',
d: 'M 10 0 L 0 5 L 10 10 z'
},
}
});
But is there a way I can define in here the default dia.Link.prototype.label attributes? E.g.:
joint.dia.Link.define('flow.Link', {
labels: {
'.label': {
position: 1, // label at the target
attrs: {
text: { fill: 'blue', text: 'My default link label' },
rect: { fill: 'yellow' },
}
}
},
// other properties ...
});
I tried several variations of the above code without success, but since .labels is a group of link, wouldn't something like this be possible?
An alternative to this I attempted was to programmatically style the first default label through link.label(index, properties, opt), but once I add, for example, one more label to the link through the inspector, both labels attributes are lost (the former and the added one)...
Right now it is not possible to change the default label attributes (unless the dia.LinkView.prototype.updateLabels() method is overriden). I've created an issue in the JointJS repository.
If you add labels through the ui.Inspector plugin, you can modify the labels inspector definition, so that every new label has the desired properties. For that use the defaultValue field option and make the inspector field invisible as shown in the example below.
labels: {
type: 'list',
item: {
type: 'object',
properties: {
attrs: {
text: {
text: {
type: 'text',
defaultValue: 'label',
},
// `labels/{n}/attrs/text/fill` fake field
fill: {
type: 'text',
// The value of the property,
// which is set when a new label is created
defaultValue: 'blue',
// Make this field invisible
// So the user won't be able to change it
attrs: { '.field': { style: 'display:none' }}
}
},
rect: {
// `labels/{n}/attrs/rect/fill` fake field
fill: {
type: 'text',
defaultValue: 'yellow',
attrs: { '.field': { style: 'display:none' }}
}
}
}
}
}
}
i just want to change the default background color of a grid row after it had been selected and when i press a button. I'm using sencha extjs 4.2.
Anyone could help me please?
Thank you in advance
Task can be solved using column renderer: http://jsfiddle.net/bLgSA/10/
var button = Ext.create('Ext.button.Button', {
text: 'btn',
listeners: {
click: function() {
var sm = grid.getSelectionModel();
if (sm.hasSelection()) {
var rec = sm.getSelection()[0];
if (rec.get("color") == "black")
rec.set("color", "red");
else
rec.set("color", "black");
}
}
}
});
var renderer = function(value, metaData, record) {
metaData.style = 'color:'+record.get("color");
return value;
}
var grid = Ext.create('Ext.grid.Panel', {
height: 300,
width: 400,
title: 'hello',
columns: [
{text: 'c1', dataIndex: 'id', renderer: renderer},
{text: 'c2', dataIndex: 'label', renderer: renderer}
],
store: Ext.create('Ext.data.Store', {
fields: ['id', 'label', 'color'],
data: [
{id: 0, label: 'a', color: 'black'},
{id: 1, label: 'b', color: 'red'}
]
})
});
grid.render(Ext.getBody());
button.render(Ext.getBody());
This is the way to select a one row at a time and highlight as selected row to add css class
function rowHighlight()
{
$('#facCodes tr').click(function(event){
$(this).addClass("click").siblings().removeClass("click");
});
}
I have a Highcharts pie chart here: http://jsfiddle.net/6PbbR/52/
$(function () {
var chart;
$(document).ready(function() {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color]
]
};
});
// Build the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
shadow: true,
},
tooltip: {
enabled: false
},
title: {
text: ""
},
plotOptions: {
pie: {
allowPointSelect: true,
size:'68%',
cursor: 'pointer',
shadow: true,
dataLabels: {
enabled: true,
distance: -40,
style: {
width: '100px'
},
color: '#fff',
connectorColor: '#000000',
formatter: function() {
return '<b style="font-family:arial;font-size:10px;font-weight:bold">'+ this.point.name +'</b> ';
}
}
}
},
series: [{
type: 'pie',
name: 'Income Investments',
data: [
['FLOATING RATE FUNDS', 16.667],
{
name: 'Corporate Capital Trust',
y: 16.667,
sliced: true,
selected: true
},
['BONDS', 16.667],
['ANNUITIES', 16.667],
['REITs', 16.667],
['CDs', 16.667]
]
}],
colors: [
'#83a3c6',
'#98012e',
'#19699b',
'#ae9e8e',
'#5283b0',
'#958370'
],
});
});
});
Two questions:
1) I'm not happy with how I inserted inline style in plotOptions{pie{formatter. Where is a better place to do this using the API, instead of brute-forcing inline style?
2) I would like to change the font-family for the red wedge (and possibly tweak fix its positioning/margins). What's the best way of doing this?
Edit: Ideally, I can accomplish my needs without needing to go outside the above function. Is it possible to attach style to just one data point using the API?
It's a simple html, so you can add a class or id and then style using css.
js
formatter: function() {
return '<b id="myTooltipId">'+ this.point.name +'</b> ';
}
css
#myTooltipId {
font-family: arial;
font-size: 10px;
font-weight:bold
}
Update:
Inside formatter you can get the slice properties using this.
So you just have to check if the slice is the one you want.
formatter: function() {
// key is the slice name
if (this.key == 'CDs') {
return '<b id="myTooltipId">'+ this.point.name +'</b> ';
} else {
return this.value;
}
}