gyuque / livizjs Goto Github PK
View Code? Open in Web Editor NEWInteractive Graphviz in javascript
Interactive Graphviz in javascript
looks like they are not yet supported
here is a complex example:
digraph G {
db35info [shape=record,margin="0.1,0.04",label="\
db35| \
(couchdb 1.2.0)| \
m2.2xlarge, 68.4 GB Ram, 26 EC2CU | \
{ {/mnt/db-raid0-xfs ( /dev/md1, 2T ) | {|{ /dev/sdh 500GB | /dev/sdh1 500GB | /dev/sdh2 500GB | /dev/sdh3 500GB }}}}| \
{ {/mnt/view-raid0-xfs ( /dev/md2, 2T ) | {|{ /dev/sdi 500GB | /dev/sdi1 500GB | /dev/sdi2 500GB | /dev/sdi3 500GB }}}} \
"]
}
With the release of Google Chrome 24, the WebKitBlobBuilder API has been removed:
http://thenextweb.com/google/2012/11/08/google-releases-chrome-24-beta-says-browser-has-become-26-faster-since-last-year/
The issue is in the stopgo.js file, which I solved here:
https://github.com/lndb/jsPlumb_Liviz.js/blob/master/Liviz.js/stopgo.js
Hello everybody,
Liviz is simply awesome :-)
Unfortunately, especially for me, it does not support Left to Right layout of graphs, that is the option "rankdir=LR", and the cluster graphs boxing.
Is it necessary to recompile Graphviz via emscripten to add these options? If so, how can this be done?
Cheers,
Gaby
Hi,
It is not changing the position of an element if its ID contains hyphen ( - )
I would like to know whether there is intention of expanding current functionality with dot's 'subgraph/cluster' ?
This was done with the version at http://ushiroad.com/jsviz/
Data:
digraph google_earth_profile {
// Note, this is a dot file formatted to be read by
// Graphviz.
// Global graph attributes
bgcolor = "#888888";
ratio = fill;
edge [fontname="Helvetica" fontsize="10pt"]
node [style=filled shape=box
fontname="Helvetica" fontsize="10pt"
ordering="out"];
// Vertex attributes.
"Cache::Compact" [fillcolor="#aaffaa" label="Cache::Compact\n2.6ms\n(7%)"];
"Cache::FinishFrame" [fillcolor="#aaffaa" label="Cache::FinishFrame\n2.6ms\n(7%)"];
"Cache::RunJobsToCompletion" [fillcolor="#aaffaa" label="Cache::RunJobsToCompletion\n2.5ms\n(7% - 2 calls)"];
"Database::BuildDrawablesList" [fillcolor="#aaffaa" label="Database::BuildDrawablesList\n0.6ms\n(1% - 2 calls)"];
"Database::BuildTerrainAndDrawableListsAll" [fillcolor="#aaffaa" label="Database::BuildTerrainAndDrawableListsAll\n1.4ms\n(4%)"];
"Database::BuildTerrainAndDrawableListsAll-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n0.5ms\n(1%)"];
"Database::CullAll" [fillcolor="#aaffaa" label="Database::CullAll\n3.2ms\n(9%)"];
"EnhancedScheduler-0" [fillcolor="#aaffaa" label="EnhancedScheduler-0\n1.1ms\n(3%)"];
"EnhancedScheduler-1" [fillcolor="#aaffaa" label="EnhancedScheduler-1\n2.5ms\n(7% - 2 calls)"];
"MainDatabase::ProcessEndFrameJobs" [fillcolor="#aaffaa" label="MainDatabase::ProcessEndFrameJobs\n1.1ms\n(3%)"];
"MainThread" [fillcolor="#ffffaa" label="MainThread\n33.4ms\n(100%)"];
"PhotoOverlayManager" [fillcolor="#aaffaa" label="PhotoOverlayManager\n0.6ms\n(1%)"];
"QTDrawableCallbackTeardownJob" [fillcolor="#aaffaa" label="QTDrawableCallbackTeardownJob\n2.5ms\n(7%)"];
"QtFramework::customEvent" [fillcolor="#ffffaa" label="QtFramework::customEvent\n33.2ms\n(99% - 3 calls)"];
"QuadTree::BuildDrawablesList" [fillcolor="#aaffaa" label="QuadTree::BuildDrawablesList\n0.6ms\n(1%)"];
"QuadTree::Cull" [fillcolor="#aaffaa" label="QuadTree::Cull\n2.8ms\n(8%)"];
"QuadTree::Cull::root->Cull" [fillcolor="#aaffaa" label="QuadTree::Cull::root->Cull\n2.7ms\n(8%)"];
"QuadTree::ProcessDrawableNodes" [fillcolor="#aaffaa" label="QuadTree::ProcessDrawableNodes\n0.6ms\n(1%)"];
"RenderTimer" [fillcolor="#ffffaa" label="RenderTimer\n33.2ms\n(99% - 2 calls)"];
"TerrainManager::DrawFansAndTiles" [fillcolor="#aaffaa" label="TerrainManager::DrawFansAndTiles\n1.6ms\n(4%)"];
"TerrainManager::DrawTerrain" [fillcolor="#aaffaa" label="TerrainManager::DrawTerrain\n2.3ms\n(6%)"];
"TerrainManager::DrawTerrain-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n0.6ms\n(1%)"];
"TerrainManager::DrawTiles" [fillcolor="#aaffaa" label="TerrainManager::DrawTiles\n1.6ms\n(4%)"];
"VisualContext::Draw" [fillcolor="#ffffaa" label="VisualContext::Draw\n32.8ms\n(98%)"];
"VisualContext::DrawAndResetDisplayList" [fillcolor="#aaffaa" label="VisualContext::DrawAndResetDisplayList\n9.5ms\n(28%)"];
"VisualContext::DrawAndResetDisplayList-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n1.7ms\n(5%)"];
"VisualContext::EndFrame" [fillcolor="#ffffaa" label="VisualContext::EndFrame\n21.4ms\n(63%)"];
"VisualContext::Render" [fillcolor="#aaffaa" label="VisualContext::Render\n5.2ms\n(15%)"];
"VisualContext::Render-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n2.4ms\n(7%)"];
"VisualContext::Update" [fillcolor="#aaffaa" label="VisualContext::Update\n6.2ms\n(18%)"];
"VisualContext::Update-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n1.1ms\n(3%)"];
"VisualContext::WaitForVsync" [fillcolor="#aaffaa" label="VisualContext::WaitForVsync\n7.9ms\n(23%)"];
"glDrawElements" [fillcolor="#aaffaa" label="glDrawElements\n1.6ms\n(4% - 91 calls)"];
"igOglIndexArray_bindIndexPointer" [fillcolor="#aaffaa" label="igOglIndexArray_bindIndexPointer\n0.6ms\n(1% - 91 calls)"];
"igOglVertexArray_bindPointers" [fillcolor="#aaffaa" label="igOglVertexArray_bindPointers\n0.9ms\n(2% - 113 calls)"];
"igOglVisualContext_setTexture" [fillcolor="#aaffaa" label="igOglVisualContext_setTexture\n0.8ms\n(2% - 113 calls)"];
"igOglVisualContext_updateShaderUniforms" [fillcolor="#aaffaa" label="igOglVisualContext_updateShaderUniforms\n1.1ms\n(3% - 113 calls)"];
"igOglVisualContext_updateShaderUniforms-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n0.9ms\n(2%)"];
"igVisualContext_GenericDraw" [fillcolor="#aaffaa" label="igVisualContext_GenericDraw\n3.3ms\n(9% - 113 calls)"];
"igVisualContext_InternalDraw" [fillcolor="#aaffaa" label="igVisualContext_InternalDraw\n6.9ms\n(20% - 113 calls)"];
"igVisualContext_bindGLPointers" [fillcolor="#aaffaa" label="igVisualContext_bindGLPointers\n1.1ms\n(3% - 113 calls)"];
"igVisualContext_preDrawSetup" [fillcolor="#aaffaa" label="igVisualContext_preDrawSetup\n2.9ms\n(8% - 113 calls)"];
"igVisualContext_preDrawSetup-Unaccounted" [fillcolor="#aaffaa" label="Unaccounted\n0.7ms\n(1%)"];
"QuadTree::Cull" -> "QuadTree::Cull::root->Cull" [color="#aaffaa" label="97%"];
"Database::CullAll" -> "QuadTree::Cull" [color="#aaffaa" label="86%"];
"VisualContext::Update" -> "Database::CullAll" [color="#aaffaa" label="52%"];
"QuadTree::BuildDrawablesList" -> "QuadTree::ProcessDrawableNodes" [color="#aaffaa" label="98%"];
"Database::BuildDrawablesList" -> "QuadTree::BuildDrawablesList" [color="#aaffaa" label="98%"];
"Database::BuildTerrainAndDrawableListsAll" -> "Database::BuildDrawablesList" [color="#aaffaa" label="40% - 2 calls"];
"Database::BuildTerrainAndDrawableListsAll" -> "Database::BuildTerrainAndDrawableListsAll-Unaccounted" [color="#aaffaa" label="36%" style="dashed"];
"VisualContext::Update" -> "Database::BuildTerrainAndDrawableListsAll" [color="#aaffaa" label="23%"];
"VisualContext::Update" -> "VisualContext::Update-Unaccounted" [color="#aaffaa" label="18%" style="dashed"];
"VisualContext::Draw" -> "VisualContext::Update" [color="#aaffaa" label="18%"];
"TerrainManager::DrawFansAndTiles" -> "TerrainManager::DrawTiles" [color="#aaffaa" label="99%"];
"TerrainManager::DrawTerrain" -> "TerrainManager::DrawFansAndTiles" [color="#aaffaa" label="71%"];
"TerrainManager::DrawTerrain" -> "TerrainManager::DrawTerrain-Unaccounted" [color="#aaffaa" label="28%" style="dashed"];
"VisualContext::Render" -> "TerrainManager::DrawTerrain" [color="#aaffaa" label="44%"];
"VisualContext::Render" -> "VisualContext::Render-Unaccounted" [color="#aaffaa" label="45%" style="dashed"];
"VisualContext::Draw" -> "VisualContext::Render" [color="#aaffaa" label="15%"];
"igOglVisualContext_updateShaderUniforms" -> "igOglVisualContext_updateShaderUniforms-Unaccounted" [color="#aaffaa" label="82%" style="dashed"];
"igVisualContext_preDrawSetup" -> "igOglVisualContext_updateShaderUniforms" [color="#aaffaa" label="37% - 113 calls"];
"igVisualContext_bindGLPointers" -> "igOglVertexArray_bindPointers" [color="#aaffaa" label="80% - 113 calls"];
"igVisualContext_preDrawSetup" -> "igVisualContext_bindGLPointers" [color="#aaffaa" label="39% - 113 calls"];
"igVisualContext_preDrawSetup" -> "igVisualContext_preDrawSetup-Unaccounted" [color="#aaffaa" label="22%" style="dashed"];
"igVisualContext_InternalDraw" -> "igVisualContext_preDrawSetup" [color="#aaffaa" label="41% - 113 calls"];
"igVisualContext_GenericDraw" -> "igOglIndexArray_bindIndexPointer" [color="#aaffaa" label="17% - 91 calls"];
"igVisualContext_GenericDraw" -> "glDrawElements" [color="#aaffaa" label="48% - 91 calls"];
"igVisualContext_InternalDraw" -> "igVisualContext_GenericDraw" [color="#aaffaa" label="47% - 113 calls"];
"VisualContext::DrawAndResetDisplayList" -> "igVisualContext_InternalDraw" [color="#aaffaa" label="73% - 113 calls"];
"VisualContext::DrawAndResetDisplayList" -> "igOglVisualContext_setTexture" [color="#aaffaa" label="8% - 113 calls"];
"VisualContext::DrawAndResetDisplayList" -> "VisualContext::DrawAndResetDisplayList-Unaccounted" [color="#aaffaa" label="17%" style="dashed"];
"VisualContext::EndFrame" -> "VisualContext::DrawAndResetDisplayList" [color="#aaffaa" label="44%"];
"EnhancedScheduler-0" -> "PhotoOverlayManager" [color="#aaffaa" label="50%"];
"MainDatabase::ProcessEndFrameJobs" -> "EnhancedScheduler-0" [color="#aaffaa" label="98%"];
"VisualContext::EndFrame" -> "MainDatabase::ProcessEndFrameJobs" [color="#aaffaa" label="5%"];
"EnhancedScheduler-1" -> "QTDrawableCallbackTeardownJob" [color="#aaffaa" label="98%"];
"Cache::RunJobsToCompletion" -> "EnhancedScheduler-1" [color="#aaffaa" label="99% - 2 calls"];
"Cache::Compact" -> "Cache::RunJobsToCompletion" [color="#aaffaa" label="97% - 2 calls"];
"Cache::FinishFrame" -> "Cache::Compact" [color="#aaffaa" label="99%"];
"VisualContext::EndFrame" -> "Cache::FinishFrame" [color="#aaffaa" label="12%"];
"VisualContext::EndFrame" -> "VisualContext::WaitForVsync" [color="#aaffaa" label="37%"];
"VisualContext::Draw" -> "VisualContext::EndFrame" [color="#ffffaa" label="65%"];
"RenderTimer" -> "VisualContext::Draw" [color="#ffffaa" label="98%"];
"QtFramework::customEvent" -> "RenderTimer" [color="#ffffaa" label="99% - 2 calls"];
"MainThread" -> "QtFramework::customEvent" [color="#ffffaa" label="99% - 3 calls"];
}
I was looking at this library and it looks great so far. Then I tried to to test the crazy example on the graphviz page located at http://www.graphviz.org/Gallery/directed/crazy.gv.txt and it looks like it doesn't take the options into account. Is this normal ? Some missing features or the library was generated from an older version of graphviz ?
Thanks for the great work so far !
Richard
I downloaded the code and without making any changes anywhere, I started the jsPlumbChar.htm example. It's running fine in firefox but not in chrome. It is always showing the "Initializing..." window.
This error is coming on console:
"Uncaught SecurityError: An attempt was made to break through the security policy of the user agent. "
For file "workered.js?v=2" line no:52.
Chrome version: 29.0.1547.76
Please look into it.
Hi,
I'd like to use your library in my project and I was wondering if it would be possible to write up some documentation on how to use the library to get the most basic example running? E.g. how to convert a dot input string to an svg image, without any animations or dynamics. Your demo web app is awesome, but navigating and digging through the code to understand what does what and how to get a simple example running is a bit hard.
I'm sure a lot of people would be grateful for some documentation on how to get started with the underlying JavaScript library (again, not the demo app) and perhaps a list of current features.
Thanks! Awesome work!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.