I realized a custom viewer to display diagrams realized with diagrams.net editor. More or less my code is:
<script src="http://localhost:8080/my-viewer/mxgraph/js/app.min.js type="text/javascript"></script>
<script src="http://localhost:8080/my-viewer/mxgraph/js/shapes.min.js type="text/javascript"></script>
<script src="http://localhost:8080/my-viewer/mxgraph/js/stencils.min.js type="text/javascript"></script>
<script src="http://localhost:8080/my-viewer/mxgraph/js/extensions.min.js type="text/javascript"></script>
var graph = new mxGraph(container)
diagram = mxUtils.parseXml(xmlDiagram);
codec = new mxCodec(diagram);
codec.decode(diagram.documentElement, graph.getModel());
graph.fit();
It works quite well but I noticed that some shapes are rendered as rectangles instead of circles,triangles and ellipses, like in the following picture where on the right I highlighted in red the wrong shapes:
I suppose I am missing to include something concerning styles or shapes (JS module, xml file, ...) from draw.io webapp but I can't figure out which one. Can anyone give me some hint?
Thanks in advance,
Marco
I eventually found the solution. The problem is that some shapes in the diagram definition file doesn't have the 'shape' property. For example, triangle is generated by this tag:
<mxCell style="triangle;whiteSpace=wrap;html=1" ...>
but it should be
<mxCell style="shape=triangle;whiteSpace=wrap;html=1" ...>
See here the full discussion on draw.io project Github.
Related
What am I missing to make Foundation's Magellan work?
This is my Codepen that is not working, but I copied the same HTML and CSS from this original Foundations Codepen.
I have added:
jquery.js
foundation.js
foundation.magellan.js
foundation.core.js
foundation.smoothScroll.js
But can't make it work, is something missing?
So a couple of things...
What they don't tell you is you much have the init within a document ready
$(function() {
$(document).foundation();
});
And the active class is
.is-active
Once you update those 2 things... your magellan will work.
I want to embed a gist containing a Google Chart (rendered here) into this github.io page.
I've tried
<script src="https://cdn.rawgit.com/whanley/71bc1fac509a23b93a3a89b51af32bf8/raw/d98c33c8fbf5ee67a89395c0e435ac9568bcd0c1/dig-eg-gaz-issues-calendar-chart.html"></script>
and
<image src="https://cdn.rawgit.com/whanley/71bc1fac509a23b93a3a89b51af32bf8/raw/d98c33c8fbf5ee67a89395c0e435ac9568bcd0c1/dig-eg-gaz-issues-calendar-chart.html"></image>
and
{% gist 71bc1fac509a23b93a3a89b51af32bf8 %}
but these are not the right thing to do. Help?
Instead of using script or image, I need to use iframe in the code listed above. Works fine now.
I'm trying to use Polymer's google-chart component to create a geo chart with the marker display mode, however, the component keeps showing an error of google.load is not a function.
I think the chart is being bound to the DOM before a call to the Google Maps API is completed but I'm not totally sure. Has anyone else had success making marker or text geo charts with the google-chart component?
Here's a repro of the issue using the marker and text geochart examples: https://jsbin.com/mewahibane/edit?html,output
This seems to be an issue with the google-chart library.
Recently there was a change where a google-chart-loader element was added to deal with some recent issues with the google charts library.
Maybe this causes an issue with the GeoChart library.
As a workaround add this line <script type="text/javascript" src="https://www.google.com/jsapi"></script> above the google-chjart import. This should fix it. See here:
https://jsbin.com/gejipiqehu/edit?html,output
What about this code ? >> https://jsbin.com/tabahu/edit?html,output
i am trying to add marker on google-chart. just copy code from this documentation.
https://developers.google.com/chart/interactive/docs/gallery/geochart#marker-geocharts
I am searching for a way to use Zurb Foundation's Interchange to work on a single image. In my code I change the image 'data-interchange' attribute of another set of images and run the following command:
$(document).foundation('interchange', 'reflow');
However the image stays the same as the first image, it's not being updated to reflect the change in the data-interchaneg attribute and show the new image.
Is there an option to make it work?
This works when 'reflow' and then 'resize' events are called.
$('img#your-image-id').attr('data-interchange', new-params);
$(document).foundation('interchange', 'reflow');
$(document).foundation('interchange', 'resize');
Not sure if you found the answer to your problem.
But I also faced same issue and interchange was not working for me either.
But after some digging, I moved all JS files to footer and all of the sudden it started working and swapping images as it should. These are my scripts.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation.interchange.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
That's it.
when updating data-interchange do not use the jquery
.data('interchange','NEW VALUE') function, you have to use
.attr('data-interchange','NEW VALUE').
then call the reflow function.
I'm trying to create a simple Ember.js app to learn more about JavaScript MVC frameworks. However, it appears applying CSS styles to a view template isn't possible (or rather, I am ignorant of the proper way to do this):
Without template
<span class="myClass">
Some value
</span>
In this case, the style appears properly, as expected.
With template
<span class="myClass">
<script type="text/x-handlebars>
{{MyApp.someVariable}}
</script>
</span>
In this case, the style doesn't seem to be applied at all.
I even tried something like:
<script type="text/x-handlebars>
{{MyApp.someVariable classToAdd="myClass"}}
</script>
Which creates an even more bizarre output (I can't even find that element in the Chrome developer element tab).
Online tutorials don't mention this issue and I have tried researching other Stackoverflow issues (there are some about applying styles but not exactly like in this situation). Can anyone enlighten me as to what I am not doing properly?
I normally use ClassNames and classNameBindings property of Ember Views. That get the job done most of the time.
You can also try Ember layout property to wrap the template.
Found answer to this question in jquery's append() documentation
You need to convert text into html using jQuery:
template = Handlebars.compile(..);
html = template(json);
$('body').append($(html)); // <- don't forget to wrap it