Some options are rendered with boolean 'True', and not 'true' as they should, thus making JS malformed #297
Description
As you will see from the generated HTML below, some options have a "True" value as opposed to the desired "true" value making the JS syntax invalid.
If I manually edit those 4 'True' values and change them to 'true' the graph display just fine.
Pyvis 0.3.2 - Python 3.11.7 - Thanks
This is how I declare the options:
graph.set_options(
"""
{
"nodes": {
"font": {"size": 14, "align": "middle"},
"shape": "dot",
"size": 20
},
"edges": {
"arrows": {"to": {"enabled": true, "scaleFactor": 1}},
"font": {"size": 12, "align": "top", "multi": true},
"smooth": {"enabled": true, "type": "dynamic"},
"color": {"color": "#D3D3D3"}
},
"physics": {
"forceAtlas2Based": {
"gravitationalConstant": -50,
"centralGravity": 0.005,
"springLength": 200,
"springConstant": 0.08
},
"maxVelocity": 100,
"solver": "forceAtlas2Based",
"timestep": 0.35,
"stabilization": {"iterations": 150}
},
"interaction": {"hover": true, "tooltipDelay": 200},
"tooltip": {
"delay": 200,
"duration": 200,
"fontColor": "black",
"fontSize": 14,
"backgroundColor": "white",
"borderColor": "#666",
"borderWidth": 1,
"borderRadius": 3,
"padding": 10,
"maxWidth": 300,
"minWidth": 200,
"maxHeight": 600
}
}
"""
)
This is how I declare the content I want to generate:
html_content = f"""
<html>
<head>
<title>{article_title}</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
<style>
body {{ font-family: Arial, sans-serif; margin: 0; padding: 20px; }}
h1 {{ margin-bottom: 5px; }}
.date {{ font-size: 0.8em; color: #666; margin-bottom: 20px; }}
#mynetwork {{ width: 100%; height: 600px; border: 1px solid lightgray; }}
.article-text {{ margin-top: 20px; }}
</style>
</head>
<body>
<h1>{article_title}</h1>
<div class="date">{article_date}</div>
<div id="mynetwork"></div>
<div class="article-text">
<h2>Article Text</h2>
<p>{article_text}</p>
</div>
<script type="text/javascript">
console.log('Script execution started');
var nodes = new vis.DataSet({json.dumps(graph.nodes)});
var edges = new vis.DataSet({json.dumps(graph.edges)});
var container = document.getElementById('mynetwork');
var data = {{
nodes: nodes,
edges: edges
}};
var options = {graph.options};
console.log('Network data:', JSON.stringify(data));
document.addEventListener('DOMContentLoaded', function() {{
console.log('DOM fully loaded');
console.log('Container:', container);
console.log('Attempting to create network');
var network = new vis.Network(container, data, options);
console.log('Network created successfully');
}});
</script>
</body>
</html>
"""
This is an example of the generated html file:
'\n <html>\n <head>\n <title>English History</title>\n <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>\n <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />\n <style>\n body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }\n h1 { margin-bottom: 5px; }\n .date { font-size: 0.8em; color: #666; margin-bottom: 20px; }\n #mynetwork { width: 100%; height: 600px; border: 1px solid lightgray; }\n .article-text { margin-top: 20px; }\n </style>\n </head>\n <body>\n <h1>English History</h1>\n <div class="date">2024-07-28</div>\n <div id="mynetwork"></div>\n <div class="article-text">\n <h2>Article Text</h2>\n <p>Richard Lionheart pardoned John Lackland</p>\n </div>\n <script type="text/javascript">\n console.log(\'Script execution started\');\n var nodes = new vis.DataSet([{"color": "#6A5ACD", "title": "Giovanni Plantageneto, Giovanni d\'Inghilterra o Giovanni Senzaterra (in inglese: John Lackland o Softsword; in francese antico: Johan sanz Terre; Oxford, 24 dicembre 1166 \\u2013 Newark-on-Trent, 19 ottobre 1216), fu re d\'Inghilterra dal 6 aprile 1199 al 1216, e di fatto ultimo vero sovrano teocratico. Nello stesso periodo fu anche duca d\'Aquitania e Guascogna e conte di Poitiers. Dal 1199 al 1203 fu conte del Maine e duca di Normandia.", "borderWidth": 4, "font": {"color": "#000000", "face": "arial", "align": "middle"}, "id": "John Lackland", "label": "Giovanni d\'Inghilterra", "shape": "dot"}, {"color": "#6A5ACD", "title": "Riccardo I d\'Inghilterra, noto anche con il nome di Riccardo Cuor di Leone (Richard C\\u0153ur de Lion in francese e Richard the Lionheart in inglese) (Oxford, 8 settembre 1157 \\u2013 Ch\\u00e2lus, 6 aprile 1199), \\u00e8 stato re d\'Inghilterra, duca di Normandia, conte del Maine, d\'Angi\\u00f2 e di Turenna, duca d\'Aquitania e Guascogna e conte di Poitiers dal 1189 fino alla sua morte.\\nEra il terzo dei cinque figli maschi del re d\'Inghilterra, duca di Normandia, conte del Maine, d\'Angi\\u00f2 e di Turenna, Enrico II d\'Inghilterra, e della duchessa d\'Aquitania e Guascogna e contessa di Poitiers, Eleonora d\'Aquitania. Riccardo era, per parte di madre, il fratellastro minore di Maria di Champagne e di Alice di Francia.", "borderWidth": 4, "font": {"color": "#000000", "face": "arial", "align": "middle"}, "id": "Richard Lionheart", "label": "Riccardo I d\'Inghilterra", "shape": "dot"}]);\n var edges = new vis.DataSet([{"title": "perdon\\u00f2", "label": "perdon\\u00f2", "from": "Richard Lionheart", "to": "John Lackland", "arrows": "to"}]);\n var container = document.getElementById(\'mynetwork\');\n var data = {\n nodes: nodes,\n edges: edges\n };\n var options = {\'nodes\': {\'font\': {\'size\': 14, \'align\': \'middle\'}, \'shape\': \'dot\', \'size\': 20}, \'edges\': {\'arrows\': {\'to\': {\'enabled\': True, \'scaleFactor\': 1}}, \'font\': {\'size\': 12, \'align\': \'top\', \'multi\': True}, \'smooth\': {\'enabled\': True, \'type\': \'dynamic\'}, \'color\': {\'color\': \'#D3D3D3\'}}, \'physics\': {\'forceAtlas2Based\': {\'gravitationalConstant\': -50, \'centralGravity\': 0.005, \'springLength\': 200, \'springConstant\': 0.08}, \'maxVelocity\': 100, \'solver\': \'forceAtlas2Based\', \'timestep\': 0.35, \'stabilization\': {\'iterations\': 150}}, \'interaction\': {\'hover\': True, \'tooltipDelay\': 200}, \'tooltip\': {\'delay\': 200, \'duration\': 200, \'fontColor\': \'black\', \'fontSize\': 14, \'backgroundColor\': \'white\', \'borderColor\': \'#666\', \'borderWidth\': 1, \'borderRadius\': 3, \'padding\': 10, \'maxWidth\': 300, \'minWidth\': 200, \'maxHeight\': 600}};\n console.log(\'Network data:\', JSON.stringify(data));\n document.addEventListener(\'DOMContentLoaded\', function() {\n console.log(\'DOM fully loaded\');\n console.log(\'Container:\', container);\n console.log(\'Attempting to create network\');\n var network = new vis.Network(container, data, options);\n console.log(\'Network created successfully\');\n });\n </script>\n </body>\n </html>\n '