I use cytoscape.js for show relations between nodes.
I want to create different stylish labels for one node.
I want more complicate stylish labels, then in the cytoscape.org official example.
How can i do it?
Sample image of my problem:
I solved my problem with extention for create html labels for cytoscape.
Extention on github: cytoscape-node-html-label
Extention demo: demo
cy.nodeHtmlLabel(
[
{
query: 'node',
tpl: function(data){
return '<p class="line1">line 1</p><p class="line1">line 2</p>'}
}
]
);
.line1{
font-size: 10px;
}
.line1{
font-size: 12px;
}
First, there must be an area to draw the graph. Add a tag to index.html, then within the body section, add a div element named "cy", like so: . This creates the body of the webpage, which in turn holds a div element named cy. Naming the element makes it easy to later access and modify this element for styling and passing to Cytoscape.js.
index.html should now look like this:
<!doctype html>
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src='cytoscape.js'></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Next, the style of the graph area must be slightly modified via CSS (putting a graph into a 0 area div element is rather uninteresting). To accomplish this, add the following CSS code between and :
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
How about making the graph look nicer? Cytoscape.js provides a multitude of styling options for changing graph appearance. The initialization of the graph may be modified to change default style options, as follows:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}],
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red'
}
}]
});
Next up is displaying labels in the graph so that nodes can be identified. Labels are added via the 'label’ property of style. Since labels are already provided (via the id property of data), we’ll use those. If other data properties are provided, such as firstname, those could be used instead.
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red',
label: 'data(id)'
}
}]
The final common component of a graph in Cytoscape.js is the layout. Like style, elements, and containers, layout is also specified as a part of the object passed to cytoscape during construction. To the existing cy object, add (after elements):
layout: {
name: 'grid'
}
check this out, it will help you - http://blog.js.cytoscape.org/2016/05/24/getting-started/
Related
I want to give title to the graph image which we get when we save the graph as image in Echarts. Echarts does not have option for the same. So, is there any way that we can achieve our requirement.
Attaching a link for your reference from echarts. Which provide the option for saveAsImage
https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.saveAsImage
As attaching a link of echarts example which has save image icon on the right top corner
https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall
I also want to position the hover tooltip which we get on hover of the save image icon. they have some default options. But, I have to increase the space more.
I really thank the guys who can come up with the solution for the above requirement.
By default, the name of the image is the chart title.
You can set the title by using:
option: {
title: {
text: 'myTitle'
}
}
To provide a custom name, you can use the saveAsImage.name function:
option: {
toolbox: {
feature: {
saveAsImage: {
name: 'myImageName'
}
}
}
}
Bonus: To increase the space between the icons, you can set toolbox.itemGap, and maybe get the result you want:
option: {
toolbox: {
itemGap: 20,
bottom: 20,
...
}
}
Or customize the icons itself through toolbox.iconStyle. For example, by setting a transparent border:
option: {
toolbox: {
iconStyle: {
borderWidth: 10,
borderColor: rgba(0, 0, 0, 0),
...
}
}
}
Toolbox documentation
option: {
toolbox: {
feature: {
saveAsImage: {
title: 'Save',
}
}
}
}
I am trying to wrap the Javascript charting library Chartist in Polymer elements. Everything works as expected except the styling. The chart appears unstyled (just the way every chartist example does when no css is loaded).
I created a style module as explained in https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules, included it in my element with both a link[rel=import] and style tag and copied/pasted all contents of chartist.css into the style-module. Does not work in Firefox/Chrome.
To prove the style module is loaded and processed at all, I included a ul#message tag and styled it with a directive. Works like a charm.
I guess the problem is that chartist creates SVG charts. Does anyone know how to treat styling SVG or can point me to a direction?
Here is my code so far:
Style module:
<dom-module id="chartist-styles">
<template>
<style>
:host { display: inline-block; }
#messages { list-style-type: none; }
/* All the contents of chartist.css */
</style>
</template>
</dom-module>
Polymer element:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<!-- Includes chartist.js via script tag -->
<link rel="import" href="../chartist-import.html">
<link rel="import" href="../chartist-styles.html">
<dom-module id="test-charts-line">
<template>
<style include="chartist-styles"></style>
<div id="chartist" class="ct-chart"></div>
<ul id="messages"></ul>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'test-charts-line',
properties: {
chart: {
notify: true
},
data: {
type: Object,
value: function(){
return {};
}
},
options: {
type: Object,
value: function(){
{}
}
}
},
observers: [
'updateChart(data.*, options.*)'
],
updateChart: function(){
this.chart = null;
if(this.options == null){
this.chart = new Chartist.Line( '#chartist' , this.data );
} else {
this.chart = new Chartist.Line( '#chartist' , this.data, this.options );
}
let child = document.createElement('li');
child.textContent = 'blub';
Polymer.dom(this.$.messages).appendChild(child);
},
ready: function(){
// Taken from a getting-started example on
// https://gionkunz.github.io/chartist-js/examples.html
this.data = {
// A labels array that can contain any sort of values
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
// Our series array that contains series objects or
// in this case series data arrays
series: [
[5, 2, 4, 2, 0]
]
};
this.options = {
width: 300,
height: 200
};
}
});
})();
</script>
</dom-module>
Found the solution to my problem in the Polymer docs: styles for dynamically created DOM nodes can be applied by calling
ready: function() {
this.scopeSubtree(this.$.container, true);
}
where this.$.container references a DOM node in the template, in my above example it would be this.$.chartist.
Not for use on Polymer elements. If the subtree that you scope
contains any Polymer elements with local DOM, scopeSubtree will cause
the descendants' local DOM to be styled incorrectly.
Okay so i have the following highChart tag:
<highchart id="chart1" config="chartConfig" ></highchart>
Now in my system i have several tabs. it happens to be that the high chart is not under the first tab.
Now when i press the tab that contains the chart, the chart looks abit odd:
(You can't tell from this picture but it is only using like 30% of the total width)
But change the browser size and then changing it back to normal the chart places it self correctly inside the element (this also happens if i just open the console while i am inside the tab):
I am guessing that it has something to do with the width of the element once it has been created (maybe because it is within another tab) but i am unsure how to fix this.
I attempted to put a style on the element containg the highchart so that it would look something like this: <highchart id="chart1" config="chartConfig style="width: 100%"></highchart>
However this resulted in the chart running out of the frame.
My chart config
$scope.chartConfig = {
};
$scope.$watchGroup(['login_data'], function(newValues, oldValues) {
// newValues[0] --> $scope.line
// newValues[1] --> $scope.bar
if(newValues !== oldValues) {
$scope.chartConfig = {
options: {
chart: {
type: 'areaspline'
}
},
series: [{
data: $scope.login_data,
type: 'line',
name: 'Aktivitet'
}],
xAxis: {
categories: $scope.login_ticks
},
title: {
text: ''
},
loading: false
}
}
});
Can you try one of the following in your controller? (or perhaps both!)
$timeout(function() {
$scope.chartConfig.redraw();
});
$timeout(function() {
$scope.chartConfig.setSize();
});
Calling the reflow method solved my similar issue on showing chart in a modal. Hope this will help others :D
Add this to your controller after $scope.chartConfig:
$scope.reflow = function () {
$scope.$broadcast('highchartsng.reflow');
};
I'm trying to use C3.js(c3js.org) to make charts, but I want to specify everything but the data(and any other minor deviations unique to that chart) once then reuse that for all charts of that variation(a specific configuration of a chart).
All the documentation and all examples I've found for C3.js only deal with how you make a single chart. Applying that to multiple charts means a lot of repeated code and doesn't ensure consistency when making changes.
The only thing related to this that I've found is a concept on making reusable charts in D3.js(d3js.org), the underlying library used by C3.js, and an implementation inspired by that concept. That doesn't really help me because I want the higher-level abstraction that C3.js provides but these may give you an idea what I'm looking for.
I have found no info on this but one idea is to make a chart type that is based on an existing type but that also include the extra configuration(for example make a new chart type called 'horizontalbar' based on the existing 'bar' chart type).
Here is a chart I've made, bindto and columns are the unique parts of this chart, the rest should be part of a template, but I don't know how.
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 125.2],
['data2', 282.7],
['data3', 3211.1],
['data4', 212.2],
['data5', 131.1],
['data6', 329.7]
],
type: 'pie',
order: null
},
pie: {
label: {
format: function (value, ratio, id) {
return d3.format('.1f')(ratio*100)+'%'; //percent with one decimal
}
}
},
tooltip: {
format: {
value: function (value, ratio, id, index) {
return value+'mkr ('+d3.format('.1f')(ratio*100)+'%)'; //example: 155.2mkr (3.3%)
}
}
},
legend: {
item: {
onclick: function () {} //disable clicking to hide/show parts of the chart
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script>
<div id="chart"></div>
I have this in my html:
<script src="../static/js/test.js"></script> <!-- this is the js file contains the drawChart function -->
<div class='chart'>
<div id='chart1'></div>
</div>
<script>drawChart('chart1','pathToCsvData',ture, 200);</script>
in my js code:
function drawChart(toChart,dataURL,showLegend,chartHeight)
{
var chart1 = c3.generate({
bindto: toChart,
data: {
url: dataURL,
labels: false
},
color: {pattern: ['green','black']},
zoom: {enabled: false},
size: {height: chartHeight},
transition: {duration: 0},
legend: {show: showLegend}
});
}
the js code serve as a template, and I can as many different template I want, put them in functions, with customized chart parameters, and the call the js function in html code.
In my dojo.xhrGet I have specified this load::
load: function (data) {
// reset data display containers
dojo.addClass("search_results", "hide_on_load");
dojo.byId("search_results_found").innerHTML = "";
// populate table with new results.
dojo.byId("search_results_found").innerHTML = "" + data.length + " search result(s) found.";
// when data is from an XHR request, you must transform it into a store.
// See: http://stackoverflow.com/questions/2423459/datagrid-in-dojo-with-json-data-from-a-servlet
var items = dojo.map(data, function (res_row) {
return {
'Id': res_row.Id,
'Name': res_row.Name,
'VisitType': res_row.VisitType,
'VisitDate': res_row.VisitDate
};
});
var store = new dojo.data.ItemFileReadStore({
data: {
items: items
}
});
var res_layout = [
{field: 'Id', name: 'ID', width: '10%'},
{field: 'Name', name: 'Site Name', width: '50%'},
{field: 'VisitType', name: 'Visit Type', width: '20%'},
{field: 'VisitDate', name: 'Visit Date', width: '20%'}
];
// create a new grid:
var res_grid = new dojox.grid.DataGrid({
store: store,
structure: res_layout,
rowsPerPage: 10
}, document.createElement('div'));
// append the new grid to the div "search_results_table":
dojo.byId("search_results_table").appendChild(res_grid.domNode);
// Call startup, in order to render the grid:
res_grid.startup();
dojo.removeClass("search_results", "hide_on_load");
standby.hide();
},
And, the html is:
<!-- Search Results Table -->
<div id="search_results" class="hide_on_load">
<div id="search_results_found"></div>
<div id="search_results_table"></div>
</div>
At the end of this script, the grid does not show.
I removed the hide_on_load css class selector so that I could exclude it as being the issue. But, that did not help.
Looking at the console, there are no errors logged.
Also, writing the various objects (res_grid, store, etc.) all produce output that looks to be correct.
Can somebody provide some help on how to get it to show?
Thanks!
Update:
When I inspect the DOM after this code has run, I see the tabler created with the headers but then when I go to find the actual table with the search results (under div class=dojoxGridContent), it isn't there.
Update 2:
I have the styles specified too:
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table { margin: 0; }
</style>
Make sure you set a size through the style property on the div where you place your grid, and don't forget to import the CSS files for your grid, like :
<style type="text/css">
#import "dojoroot/dojox/grid/resources/Grid.css";
#import "dojoroot/dojox/grid/resources/soriaGrid.css";
.dojoxGrid table {
margin: 0;
}
</style>
Note : Replace soria by whatever theme you are using...
... and don't forget to set a size to your grid's dom node :
<div id="gridnode" style="width:100%; height:500px;"></div>
If you don't want a fix height you can declare the grid withautoHeight: true.
var res_grid = new dojox.grid.DataGrid({
store: store,
structure: res_layout,
rowsPerPage: 10,
autoHeight: true
}, document.createElement('div'));
With This attribute you don't need to add style to the parent container for it to display.