- Chart Gallery
- Custom Drawing
- Points Operations
Points Operations
{
"chart": {
"zIndex": 0,
"enabled": true,
"type": "scatter",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 16,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#757575",
"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": "Click on points to connect them",
"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": 14,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"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": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": {
"color": "#bdbdbd",
"opacity": 0.6
},
"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": 15,
"top": 20,
"bottom": 15,
"right": 25
},
"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",
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "single-select"
},
"defaultSeriesType": "marker",
"maxBubbleSize": "20%",
"minBubbleSize": "5%",
"maxPointWidth": "100%",
"minPointLength": 0,
"baseline": 0,
"palette": {
"type": "distinct",
"items": [
"#827717",
"#c77532",
"#998675",
"#6b617b",
"#c69c6d",
"#d29b9b",
"#879872",
"#16685d",
"#57a7b1",
"#bdbdbd"
]
},
"markerPalette": {
"items": [
"circle",
"diamond",
"square",
"triangle-down",
"triangle-up",
"diagonal-cross",
"pentagon",
"cross",
"v-line",
"star5",
"star4",
"trapezium",
"star7",
"star6",
"star10"
]
},
"hatchFillPalette": {
"items": [
{
"type": "backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "grid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-cross",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "divot",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "checker-board",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "confetti",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "plaid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "solid-diamond",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "zig-zag",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "weave",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-05",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-10",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-20",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-25",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-30",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-40",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-50",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-60",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-70",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-75",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-80",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-90",
"color": "black 0.5",
"thickness": 1,
"size": 10
}
]
},
"normal": {
"labels": {
"enabled": false
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"hovered": {
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"selected": {
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"xScale": 0,
"yScale": 1,
"series": [
{
"enabled": true,
"seriesType": "marker",
"clip": true,
"tooltip": {
"enabled": false
},
"legendItem": {
"enabled": true,
"iconStroke": "none"
},
"error": {
"mode": "both",
"xError": null,
"valueError": null,
"xErrorWidth": 10,
"valueErrorWidth": 10
},
"color": null,
"isVertical": null,
"normal": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"size": 3,
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": false,
"disablePointerEvents": false,
"position": "value",
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"hovered": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"size": 5,
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": null,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"selected": {
"fill": {
"color": "#333",
"opacity": 0.85
},
"negativeFill": {
"color": "#333",
"opacity": 0.85
},
"risingFill": {
"color": "#333",
"opacity": 0.85
},
"fallingFill": {
"color": "#333",
"opacity": 0.85
},
"stroke": {
"color": "#212121",
"thickness": 1.5
},
"lowStroke": {
"color": "#333",
"opacity": 0.85
},
"highStroke": {
"color": "#333",
"opacity": 0.85
},
"lowFill": {
"color": "#333",
"opacity": 0.85
},
"highFill": {
"color": "#333",
"opacity": 0.85
},
"negativeStroke": {
"color": "#333",
"opacity": 0.85
},
"risingStroke": {
"color": "#333",
"opacity": 0.85
},
"fallingStroke": {
"color": "#333",
"opacity": 0.85
},
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"size": 3,
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": null,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"a11y": {
"enabled": false,
"titleFormat": "Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"
},
"data": [
[
1,
4.543412707471334
],
[
2,
5.927688916938752
],
[
3,
1.640278109134731
],
[
4,
4.3438089297113365
],
[
5,
8.758250848301596
],
[
6,
4.194011164624246
],
[
7,
5.1233444159803945
],
[
8,
8.627888894872378
],
[
9,
3.5753926260015114
],
[
10,
4.259844565104739
],
[
11,
2.4991047465651697
],
[
12,
9.617310121360482
],
[
13,
1.3433238816901651
],
[
14,
10.16043906854319
],
[
15,
5.14992634424149
],
[
16,
9.15932430497224
],
[
17,
7.333921071957807
],
[
18,
7.1751209796138085
],
[
19,
1.876263577338925
],
[
20,
9.648898997685357
],
[
21,
7.583034263480096
],
[
22,
4.295333542401475
],
[
23,
5.92060363840295
],
[
24,
7.778931040927638
],
[
25,
9.939428574609881
],
[
26,
10.735813962462498
],
[
27,
3.3619057311432456
],
[
28,
5.426872376821853
],
[
29,
7.254664572110789
],
[
30,
1.2133391249510597
],
[
31,
10.234850746604785
],
[
32,
4.411377362410728
],
[
33,
8.06797487942328
],
[
34,
6.601313620588133
],
[
35,
1.0407460081532451
],
[
36,
2.7218621190828887
],
[
37,
9.098189692522087
],
[
38,
7.975143336823328
],
[
39,
10.454227163350929
],
[
40,
9.372470842487507
],
[
41,
10.568185585684967
],
[
42,
9.710216266854907
],
[
43,
4.409320699539475
],
[
44,
8.351883899120653
],
[
45,
4.817721059489831
],
[
46,
10.629558525243166
],
[
47,
3.8623412478463695
],
[
48,
9.779659713633992
],
[
49,
7.964988837887047
],
[
50,
3.988207484305423
],
[
51,
3.336703268300264
],
[
52,
1.555444329916568
],
[
53,
6.165468090372862
],
[
54,
1.5022293649277088
],
[
55,
5.310690046946619
],
[
56,
5.45454009125738
],
[
57,
6.290454156861763
],
[
58,
5.523274333569313
],
[
59,
3.368528023449228
],
[
60,
2.296107822690955
],
[
61,
7.092693239721956
],
[
62,
2.7101330359745814
],
[
63,
8.056696436339408
],
[
64,
10.378712696367899
],
[
65,
10.285052609852178
],
[
66,
4.892055144681848
],
[
67,
8.389198780181292
],
[
68,
2.970223099838233
],
[
69,
9.749422210487888
],
[
70,
2.420221076546262
],
[
71,
2.512172059482233
],
[
72,
5.068198701297483
],
[
73,
3.15940651405097
],
[
74,
4.088495807939021
],
[
75,
6.848064338256704
],
[
76,
8.295338364343442
],
[
77,
8.284211614437313
],
[
78,
10.539964145559342
],
[
79,
3.1997767224189024
],
[
80,
3.9109770381984523
],
[
81,
6.904508707806522
],
[
82,
8.286719564162423
],
[
83,
4.281863302288814
],
[
84,
1.45437561900191
],
[
85,
4.78749876894521
],
[
86,
7.7603120499620335
],
[
87,
8.498206431373104
],
[
88,
5.19181522758981
],
[
89,
9.183364895042924
],
[
90,
6.791130282184975
],
[
91,
5.6402409111791005
],
[
92,
2.739600664047669
],
[
93,
4.913587622570748
],
[
94,
4.75861544396471
],
[
95,
10.313750166456165
],
[
96,
1.6970246115568313
],
[
97,
6.4563086670643095
],
[
98,
5.5294927503395215
],
[
99,
10.942685397437785
],
[
100,
10.173557048990059
]
],
"xScale": 0,
"yScale": 1
}
],
"isVertical": false,
"xAxes": [
{
"enabled": true,
"width": null,
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": {
"color": "#9e9e9e",
"opacity": 0.4
},
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"orientation": "bottom",
"value": null,
"title": {
"zIndex": 35,
"enabled": false,
"maxLength": null,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#545f69",
"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": "X-Axis",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": true
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": true,
"stroke": {
"color": "#9e9e9e",
"opacity": 0.4
},
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": {
"color": "#bdbdbd",
"opacity": 0.4
},
"length": 4,
"position": "outside"
},
"scale": 0
}
],
"yAxes": [
{
"enabled": true,
"width": null,
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": {
"color": "#9e9e9e",
"opacity": 0.4
},
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"orientation": "left",
"value": null,
"title": {
"zIndex": 35,
"enabled": false,
"maxLength": null,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#545f69",
"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": "Y-Axis",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": true
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": true,
"stroke": {
"color": "#9e9e9e",
"opacity": 0.4
},
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": {
"color": "#bdbdbd",
"opacity": 0.4
},
"length": 4,
"position": "outside"
},
"scale": 1
}
],
"crosshair": {
"zIndex": 41,
"enabled": false,
"xStroke": "#969EA5",
"yStroke": "#969EA5",
"displayMode": "float",
"xLabels": [
{
"enabled": true,
"fontSize": 12,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": 400,
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": true,
"useHtml": false,
"text": "Label text",
"width": null,
"height": null,
"anchor": null,
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 16,
"background": {
"zIndex": 0,
"enabled": true
},
"padding": {
"left": 10,
"top": 5,
"bottom": 5,
"right": 10
},
"axisIndex": 0
}
],
"yLabels": [
{
"enabled": true,
"fontSize": 12,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": 400,
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": true,
"useHtml": false,
"text": "Label text",
"width": null,
"height": null,
"anchor": null,
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 16,
"background": {
"zIndex": 0,
"enabled": true
},
"padding": {
"left": 10,
"top": 5,
"bottom": 5,
"right": 10
},
"axisIndex": 0
}
]
},
"scales": [
{
"type": "linear",
"inverted": false,
"maximum": null,
"minimum": null,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"minCount": 4,
"maxCount": 6
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"count": 5
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
},
{
"type": "linear",
"inverted": false,
"maximum": null,
"minimum": null,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"minCount": 4,
"maxCount": 6
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"count": 5
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
}
],
"crossing": {
"stroke": "none"
},
"quarters": {},
"yCrossAxes": [
0
],
"xCrossAxes": [
0
]
}
}
<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/themes/light_earth.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>
var path;
var selectedPoints = [];
var series;
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('lightEarth');
// create stage
var stage = anychart.graphics.create('container');
// generate random data of 100 points (from 1 to 100 both inclusive) with values [1..10]
var data = [];
for (var i = 1, pointsCount = 101; i < pointsCount; i++) {
data.push([i, Math.random() * 10 + 1]);
}
// create scatter chart
var chart = anychart.scatter();
chart.title('Click on points to connect them');
// creating marker series with some settings
series = chart.marker(data);
series.size(3).tooltip(false);
series.hovered().size(5);
series.selected().size(3);
// change interactivity mode
chart.interactivity().selectionMode('single-select');
// set container
chart.container(stage);
chart.draw();
// creating path and set first point to (pixX, pixY) coords of firstSelectedPoint
path = stage.path().fill(null).stroke('#cecece');
// The first selected points
selectedPoints = [10, 24, 77];
chart.listen('pointsselect', function (e) {
// get point data
var point = e.point;
// we need this condition because if we select next point
// there will be another pointsselect event of deselecting
// previous point
if (!point.selected()) {
return true;
}
// add point to selected
selectedPoints.push(point.getIndex());
// get point's series
var pointSeries = point.getSeries();
// select previously selected points
pointSeries.select(selectedPoints);
connectPoint(point);
});
chart.listen('chartDraw', function () {
// redraw line on chart first draw and chart resize
path.zIndex(100000);
path.clear();
for (var j = 0; j < selectedPoints.length; j++) {
// Get the data iterator and select it to firstSelectedPoint
var iterator = series.data().getIterator();
iterator.select(selectedPoints[j]);
connectPoint(iterator, j === 0);
}
});
});
// helper function to draw line.
function connectPoint(pointData, isMoveTo) {
// get the pix coords of selected point
var pixX = series.transformX(pointData.get('x'));
var pixY = series.transformY(pointData.get('value'));
if (isMoveTo) path.moveTo(pixX, pixY);
else {
// draw segment
path.lineTo(pixX, pixY);
}
}
</script>
</body>
</html>
You can use AnyChart not only for creating basic charts, maps or gantts, but also for drawing pictures, customizing your data representation. That’s how our stage works: you can create any element you need, making it useful or decorative.
Here you can see a stage with a scatter chart. Its points are interactive: you can click at the points to connect them. There are no numeric values demonstrated in this chart so there are no tooltips enabled; the only purpose of this sample is to show what you can create with our component besides charts. This example might be considered as a point operation map (operation graph): so if a point means an operation, connections between them create a path, and the points, when being connected, become a graph, which vertexes are those points, or operations.