Static HTML setup #488

apb-reports · 2025-10-31T13:11:15Z

apb-reports
Oct 31, 2025

Hi,

just thought I would share that this is also possible to setup on a static html site like similar.
Any other tips/tricks for static html would also be appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graphic Walker Static Embed</title>
<link href="https://cdn.jsdelivr.net/npm/@kanaries/graphic-walker@latest/dist/style.min.css" rel="stylesheet">

<style>
#graphic-walker-container {
width: 100%;
height: 700px;
}
body {
margin: 0;
}
</style>
</head>
<body>
<div id="graphic-walker-container"></div>
<script>
window.process = { env: { NODE_ENV: 'production' } };
</script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@kanaries/graphic-walker@latest/dist/graphic-walker.umd.min.js"></script>
<script>
window.onload = function() {
const myData = [
{ id: 1, category: 'A', value: 100, region: 'South', date: '2023-01-01' },
{ id: 2, category: 'B', value: 150, region: 'West', date: '2023-01-05' },
{ id: 3, category: 'A', value: 120, region: 'East', date: '2023-01-10' },
{ id: 4, category: 'C', value: 80, region: 'South', date: '2023-01-15' },
{ id: 5, category: 'B', value: 200, region: 'West', date: '2023-01-20' },
{ id: 6, category: 'A', value: 100, region: 'East', date: '2023-02-01' },
{ id: 7, category: 'B', value: 150, region: 'West', date: '2023-02-05' },
{ id: 8, category: 'A', value: 120, region: 'East', date: '2023-02-10' },
{ id: 9, category: 'C', value: 80, region: 'South', date: '2023-03-15' },
{ id: 10, category: 'B', value: 200, region: 'West', date: '2023-03-20' },
{ id: 11, category: 'A', value: 200, region: 'South', date: '2023-04-01' },
{ id: 12, category: 'B', value: 250, region: 'West', date: '2023-02-05' },
{ id: 13, category: 'A', value: 220, region: 'East', date: '2023-02-10' },
{ id: 14, category: 'C', value: 280, region: 'South', date: '2023-01-15' },
{ id: 15, category: 'B', value: 100, region: 'West', date: '2023-01-20' },
{ id: 16, category: 'A', value: 200, region: 'East', date: '2023-02-01' },
{ id: 17, category: 'B', value: 250, region: 'West', date: '2023-02-05' },
{ id: 18, category: 'A', value: 220, region: 'East', date: '2023-02-10' },
{ id: 19, category: 'C', value: 180, region: 'South', date: '2023-03-15' },
{ id: 20, category: 'B', value: 200, region: 'West', date: '2023-03-20' }
];

const myFields = [
{ 
name: 'id', 
fid: 'id', 
analyticType: 'measure', 
semanticType: 'quantitative'
}, 
{ 
name: 'category', 
fid: 'category', 
analyticType: 'dimension', 
semanticType: 'nominal'
},
{ 
name: 'value', 
fid: 'value', 
analyticType: 'measure', 
semanticType: 'quantitative'
},
{ 
name: 'region', 
fid: 'region', 
analyticType: 'dimension', 
semanticType: 'nominal'
},
{ 
name: 'date', 
fid: 'date', 
analyticType: 'dimension', 
semanticType: 'temporal'
}
];

const container = document.getElementById('graphic-walker-container');
if (window.GraphicWalker && window.GraphicWalker.embedGraphicWalker) {

window.GraphicWalker.embedGraphicWalker(container, {
data: myData,
rawFields: myFields,
});

} else {
console.error('Graphic Walker library failed to load.');
}
};
</script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Static HTML setup #488

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Static HTML setup #488

Uh oh!

apb-reports Oct 31, 2025

Replies: 0 comments

apb-reports
Oct 31, 2025