- Chart Gallery
- Sankey Diagram
- Website Users Flow Chart
Website Users Flow Chart
{
"chart": {
"zIndex": 0,
"enabled": true,
"type": "sankey",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 17,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#997f89",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Website Users Flow",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#745c65",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 5,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": {
"color": "#dacfd3",
"opacity": 0.8
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 10,
"top": 10,
"bottom": 30,
"right": 10
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"data": [
{
"from": "United States",
"to": "/home",
"value": 5546
},
{
"from": "United States",
"to": "/shop",
"value": 3647
},
{
"from": "United States",
"to": "/blog",
"value": 3124
},
{
"from": "United Kingdom",
"to": "/home",
"value": 897
},
{
"from": "United Kingdom",
"to": "/shop",
"value": 229
},
{
"from": "India",
"to": "/home",
"value": 1100
},
{
"from": "India",
"to": "/shop",
"value": 150
},
{
"from": "Canada",
"to": "/home",
"value": 691
},
{
"from": "Canada",
"to": "/shop",
"value": 316
},
{
"from": "Germany",
"to": "/home",
"value": 473
},
{
"from": "Germany",
"to": "/shop",
"value": 373
},
{
"from": "Other",
"to": "/home",
"value": 3600
},
{
"from": "Other",
"to": "/shop",
"value": 309
},
{
"from": "/home",
"to": "/about",
"value": 2850
},
{
"from": "/home",
"to": "/contacts",
"value": 3802
},
{
"from": "/home",
"to": "/signup",
"value": 1377
},
{
"from": "/home",
"to": null,
"value": 4278
},
{
"from": "/shop",
"to": "/checkout",
"value": 2603
},
{
"from": "/shop",
"to": "/contacts",
"value": 1231
},
{
"from": "/shop",
"to": "/signup",
"value": 1030
},
{
"from": "/shop",
"to": null,
"value": 160
},
{
"from": "/blog",
"to": "/blog/article",
"value": 1804
},
{
"from": "/blog",
"to": null,
"value": 1320
},
{
"from": "/about",
"to": "/our-team",
"value": 850
},
{
"from": "/about",
"to": "/profile",
"value": 1380
},
{
"from": "/about",
"to": null,
"value": 620
},
{
"from": "/contacts",
"to": "/our-team",
"value": 3322
},
{
"from": "/contacts",
"to": null,
"value": 1711
},
{
"from": "/signup",
"to": "/profile",
"value": 1932
},
{
"from": "/signup",
"to": null,
"value": 475
},
{
"from": "/checkout",
"to": "/order-success",
"value": 1106
},
{
"from": "/checkout",
"to": "/profile",
"value": 710
},
{
"from": "/checkout",
"to": null,
"value": 787
},
{
"from": "/blog/article",
"to": "/blog/next-article",
"value": 1320
},
{
"from": "/blog/article",
"to": null,
"value": 484
}
],
"palette": {
"type": "distinct",
"items": [
"#aa8ab3",
"#b7cbe2",
"#cdd18e",
"#938d9c",
"#6f5264",
"#96246a",
"#519790",
"#6aabcc",
"#61687d",
"#7b8030"
]
},
"dropoff": {
"tooltip": {},
"normal": {
"fill": {
"keys": [
{
"offset": 0,
"color": "red"
},
{
"offset": 1,
"color": "white"
}
],
"angle": -90,
"mode": false,
"opacity": 1
},
"stroke": "none",
"labels": {
"zIndex": 3,
"enabled": false
}
},
"hovered": {
"labels": {
"enabled": true
}
}
},
"flow": {
"tooltip": {},
"normal": {
"fill": {
"color": "#DFE0DF",
"opacity": 0.3
},
"stroke": "none",
"labels": {
"zIndex": 3,
"enabled": false
}
},
"hovered": {
"fill": {
"color": "#DFE0DF",
"opacity": 0.9
},
"labels": {
"enabled": true
}
}
},
"node": {
"tooltip": {},
"normal": {
"stroke": "#bbb",
"labels": {
"zIndex": 3,
"enabled": true
}
},
"hovered": {
"stroke": "#666",
"labels": {}
}
},
"nodeWidth": 100,
"nodePadding": 30,
"curveFactor": 0.33
}
}
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-sankey.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
<script src="https://cdn.anychart.com/samples-data/sankey-diagram/users-flow-chart/data.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/light_provence.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('lightProvence');
// create sankey chart
var chart = anychart.sankey();
// set chart's data
chart.data(getData());
// set chart's title
chart.title('Website Users Flow');
// set chart's padding
chart.padding(10, 10, 30, 10);
// set nodes width and padding
chart.nodeWidth(100);
chart.nodePadding(30);
// Set flow's normal and hovered fill
chart.flow({
normal: {
fill: '#DFE0DF .3'
},
hovered: {
fill: '#DFE0DF .9'
}
});
// Set flow's normal and hovered fill
chart.node({
normal: {
fill: function () {
return {
keys: [
anychart.color.lighten(this.sourceColor, 0.3),
'.1 ' + anychart.color.lighten(this.sourceColor, 0.3),
'.1 #FFFFFF'
],
angle: -90
};
},
stroke: '#bbb'
},
hovered: {
fill: function () {
return {
keys: [
anychart.color.darken(this.sourceColor, 0.3),
'.1 ' + anychart.color.darken(this.sourceColor, 0.3),
'.1 #FFFFFF'
],
angle: -90
};
},
stroke: '#666'
}
});
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html>
Sankey Diagram example, that shows how many visitors from each country enter a webpage and then either leave or continue to a different page on the same website.