How can I save a Cytoscape network as a flat JSON file?
The cytoscape.js examples at cytoscape.org typically store the underlying network data as a flat data.json file (e.g. colas-graph, see also https://js.cytoscape.org/#notation/elements-json).
This is in contrast to the grouped or keyed format obtained when saving a graph as a Cytoscape JSON file (in Cytoscape: file > Export > Network to File > Cytoscape JSON (*.cyjs)).
Note: the documentation indicates that I can use cy.json() to export a JSON representation of the graph, but I am unsure how to call this command (I am relatively new to javascript).
You just have to call the cytoscape object .json() for taking a json object and then download it as you like
here there is an example. I think StackOverflow is blocking downloading file but if you copy and paste this code it should be work
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
content: "data(id)"
}
},
{
selector: "edge",
style: {
"curve-style": "bezier",
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [{
data: {
id: "a"
}
}, {
data: {
id: "b"
}
}],
edges: [{
data: {
id: "ab",
source: "a",
target: "b"
}
}]
},
layout: {
name: "grid"
}
}));
cy.ready(function() {
const json = cy.json(); // take json from cytoscape
// download json as you want
const data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json));
const a = document.createElement('a');
a.href = 'data:' + data;
a.download = 'data.json';
a.innerHTML = 'download JSON';
const container = document.getElementById('container');
container.appendChild(a);
});
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
<div id="container" style="position:absolute;top:10;left:10;z-index:1"></div>
</body>
Related
How to store json object in react native sqlite storage?
How to insert JSON OBJECT data into SQLite
Hello, I'm using react-native-sqlite-storage library, and i need to insert a json object into a table, and i have no idea how to approach the matter given that i have checked previous posts,
please help.
This is the answer to my own question, it was just a matter of using right import which was a hell to find(import SQLite from 'react-native-sqlite-2') , but thankfully i found it with the help of the following links:
Hopefully this would help someone else.
https://npmmirror.com/package/react-native-sqlite-2/v/1.0.0
https://github.com/appasaheb4/Tutorial_JsonData-into-insert-sqlitedb-ios-android-reactNative
enter code here
import React from 'react';
import SQLite from 'react-native-sqlite-2'
const Colors = [
{
color: "red",
value: "#f00"
},
{
color: "green",
value: "#0f0"
},
{
color: "blue",
value: "#00f"
},
{
color: "cyan",
value: "#0ff"
},
{
color: "magenta",
value: "#f0f"
},
{
color: "yellow",
value: "#ff0"
},
{
color: "black",
value: "#000"
}
]
const App = () => {
const db = SQLite.openDatabase('test.db', '1.0', '', 1)
db.transaction(function(txn) {
txn.executeSql('DROP TABLE IF EXISTS Users', [])
txn.executeSql(
'CREATE TABLE IF NOT EXISTS Users(color_id INTEGER PRIMARY KEY NOT NULL, colors VARCHAR(30), Value VARCHAR(25))',
[]
)
for (var i = 0; i < Colors.length; i++) {
const array = Colors[i];
txn.executeSql('INSERT INTO Users (Value, colors) VALUES (?,?)',
[array.value,array.color])
txn.executeSql('SELECT * FROM `users`', [], function(tx, res) {
for (let i = 0; i < res.rows.length; ++i) {
console.log('item:', res.rows.item(i))
}
})
}
})
return(null)
}
export default App;
This is the html string and i want to print it in pdfmake
let html_string = "<html><head></head><body><p>HI</p></body></html>";
//something like this
{ text: html_string,
pageBreak: 'after',
},
it should print as a html content in a part of pdfmake: how to print string containing html as it is in pdf .
Option 1. Convert the html to string before passing it to pdfmake. You can use html-to-text
.
const PdfPrinter = require("pdfmake");
const htmlToText = require('html-to-text');
let dd = {
pageSize: "A4",
pageOrientation: "portrait",
content: [
{
text: htmlToText.fromString("<p>Hello <strong>World</strong></p>", {
wordwrap: 130
}),
style: "",
}
],
}
let printer = new PdfPrinter(fonts);
let doc = printer.createPdfKitDocument(dd);
Option 2. Use html-to-pdfmake
. You will have to add jsdom if you are doing it in Nodejs side.
const PdfPrinter = require("pdfmake");
let jsdom = require("jsdom");
let { JSDOM } = jsdom;
let { window } = new JSDOM("");
const htmlToPdfmake = require("html-to-pdfmake");
let dd = {
pageSize: "A4",
pageOrientation: "portrait",
content: [
{
text: htmlToPdfmake(salesConditions.salesConditionBody, {
window: window,
}),
style: "",
}
],
}
let printer = new PdfPrinter(fonts);
let doc = printer.createPdfKitDocument(dd);
Use a html parser to get the html content you want. https://www.npmjs.com/package/node-html-parser
After that, i would write an object build function to get the correct html tag content you're looking for.
import { parse } from 'node-html-parser';
const root = parse('<ul id="list"><li>Hello World</li></ul>');
var htmlBody = root.querySelector('#list');
function getContentBuilder (htmlBody ) {
var record = {}
//Locate htmlBody childnode that you want and insert to record
return record;
}
//something like this
{ text: getContentBuilder(htmlBody) ,
pageBreak: 'after',
},
you can use HTML2PDF Js library to make pdf from html string.
check this link here
many JS libraies available in npm to create PDF from image or html.
I have this code trying to delete the class
hello3:
var purify = require('purify-css');
var content = '<div class="hello"></div><div class="hello2"></div>';
var css = '.hello { color: green; } .hello3 { display: block; }';
var options = {
output: 'purified.css',
// Will minify CSS code in addition to purify.
minify: true,
// Logs out removed selectors.
rejected: true
};
purify(content, css, options);
The output in purified.css is the same as the variable css:
.hello { color: green; } .hello3 { display: block; }
How to solve it?
I ran a test and confirmed that purify-css doesn't like class names that contain numbers.
My command... purifycss css/main.css page1.html --out css/purified.css --info --rejected took my main.css file and incompletely purified it into:
.page1-h1 {
color: red;
}
.page2-h1 {
color: blue;
}
This included an unused class (.page2-h1). But when I renamed my class names so that there were no number characters in it and then ran the same command again got the main.css that I expected which contained only:
.pageone-hone {
color: red;
}
This seems to be a known problem too.
I am trying to extract the json values and put them into a html table.Although i am successful in inserting the data into the table,i couldnot insert them vertical.Below mentioned screenshot explains the problem.
In the table, the values that are being printed in the row are meant to be displayed vertically.i.e they come under the column name.
Attached is the structure of my JSON file.
{
"meta":
{
"view":
{
"columns":[
"cachedContents":{
"name:"name"
}]}}}
more details are available at:
https://data.baltimorecity.gov/api/views/hyq3-8sxr/rows.json
I am trying to print the values that are present in the name column. Below posted is the code.
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<style>
#result
{
color:red;
}
</style>
</script>
<script type="text/javascript">
$(document).ready(function()
{
var row = $("<tr/>")
$("#personDataTable").append(row);
$.get("https://data.baltimorecity.gov/api/views/hyq3-
8sxr/rows.json",function(data)
{
$.each(data.meta.view,function(i,obj)
{
if(i=="name")
$("#results").append("<p align='center'>"+obj+"
</p>");
if(i=="description")
$("#results").append("<p align='center'>"+obj+"
</p>");
if(i=="columns")
var length = data.meta.view.columns.length;
for(var ind=0;ind<length;ind++)
{
if(null!=obj[ind].name)
{
$("#results").append("<tr>
<td>"+"name"+obj[ind].name+"</tr></td>");
}
if (null!=obj[ind].cachedContents)
{
$.each(obj[ind].cachedContents,function(j,obj1)
{
if (j=="top")
{
var toplength = obj1.length;
for (k=0;k<toplength;k++)
{
if(null!=obj1[k].item)
{
$("#results").append("<li>"+obj1[k].item+"
</li>");
if(obj[ind].name=="name")
{
row.append($("<td
align='vertical'>" + obj1[k].item + "</td>"));
}
if(null!=obj1[k].item.human_address)
{
$("#results").append("
<li>"+obj1[k].item.human_address+"</li>");
}
}
}
}
}
);
}
}
I am trying to print the values that are present in the name column vertically
Any Suggestions would be highly helpful.
I've looked around for this and I know the information is out there, but I'm completely ignorant on how to do this. I need to extract just the names from the json data file on Facebook's Graph API. Here's an example of the json data.
{
"id": "POSTID",
"created_time": "2013-09-20T20:20:52+0000",
"comments": {
"data": [
{
"from": {
"name": "XXXXXXX",
"id": "XXXXXXX"
},
"id": "XXXXXXX"
},
{
"from": {
"name": "XXXXXXX",
"id": "XXXXXXX"
},
"id": "XXXXXXX"
}
I need to get just the names in a spreadsheet. How can I achieve this? Thanks a lot for your time.
OK, based on the comment discussion above I knocked up an example to pull the names from a Facebook Graph API - Comment Stream, using jQuery and JSONSelect as a JSON interrogator.
jsFiddle: http://jsfiddle.net/9nqu6/1/
Once the feed is retrieved, all the work is done by JSONSelect, using a selector '.comments .data .from .name' to pick down to the level required in the feed.
The .forEach() command allows iteration on results with a callback, here just generating a table and a CSV file (using a Data URI, file name set in Chrome via the download attribute).
NB. There's no error handling on this, so be sure to pass it the correct type of URI! eg.
https://graph.facebook.com/<postid>?fields=comments.limit(1000).fields(from)
jQuery
$('#read-graph').on('click', function() {
var graphLink = $('#graph-link').val();
if (!graphLink) {
alert("Enter link");
return false;
}
graphLink = graphLink + (/\?/.test(graphLink) ? "&" : "?") + "callback=?"
$.getJSON(graphLink, function(data) {
var nameBlock = $('#name-block');
nameBlock.find('tr').remove();
var csvData = "data:application/csv;charset=utf-8,Index%2CName%2C%0A";
var cIndex = 0;
JSONSelect.forEach('.comments .data .from .name', data, function(cName) {
cIndex++;
nameBlock.append('<tr><td class="index">' + cIndex + '</td><td class="name">' + cName + '</td></tr>');
csvData = csvData + cIndex + "%2C" + encodeURIComponent('"' + cName.replace(/"/g, '""') + '"') + "%0A";
});
$('#download-csv').prop('href', csvData).attr('download', "FBGraph.csv").show();
});
return false;
});
HTML
<h3>Graph Link</h3>
<form>
<input id="graph-link" name="graph-link" type="text" value="" />
<input id="read-graph" name="read-graph" type="submit" value="Read Graph" />
<a id="download-csv" href="#" style="display: none;">Download CSV</a>
</form>
<table id="name-block">
</table>
CSS
#graph-link {
width: 400px;
}
#name-block {
margin-top: 10px;
border: 1px solid black;
border-collapse: collapse;
}
#name-block tr {
border-top: 1px dashed black;
}
#name-block .index {
width: 50px;
}
#name-block .name {
width: 350px;
border-left: 1px solid black;
}
I've written an Excel Add-In (XLL) that pulls JSON from the Facebook Graph API straight into Excel. It's available on GitHub:
https://github.com/spreadgit/XLfacebook