We show a graph from for example the Parse Page Paragraphs page.
//wiki.ralfbarkow.ch/assets/pages/snippet-template/esm.html HEIGHT 500 LINEUP graph
We need a function that can process a graph that is transmitted as jsonl.
async function handleGraphStream(message) { const graph = message.jsonl; renderGraph(graph); }
We need a function that displays the graph.
// Function to emit HTML content for the graph container export async function emit(el) { el.innerHTML = ` <div id="graph-container"></div> <style>#graph-container {border: 1px solid black;}</style>`; }
// Function to render the graph in the graph container async function renderGraph(graph) { // Parse the JSON string into an object const graphObject = JSON.parse(graph); // Select the graph container element const graphContainer = document.getElementById('graph-container'); // Render the graph in the graph container graphContainer.innerHTML = `<pre>${JSON.stringify(graphObject, null, 2)}</pre>`; // Pretty print the JSON }
// Event listener to handle messages sent from the "SOURCE graph" frame window.addEventListener('message', function(event) { const message = event.data; // Check if the message is intended for this frame and contains graph data if (message.action === 'graphStream') { // Handle the graph data handleGraphStream(message); } });