HTMLcopy
x
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>JavaScript Scatter Chart</title>
5
<script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
6
<script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-data-adapter.min.js"></script>
7
</head>
8
<body>
9
<div id="container" style="width: 100%; height: 700px"></div>
10
<script>
11
12
</script>
13
</body>
14
</html>
CSScopy
1
1
JavaScriptcopy
45
1
anychart.onDocumentReady(function() {
2
anychart.data.loadCsvFile("https://raw.githubusercontent.com/WaydeHerman/ScatterPlot/master/data.csv", function (data) {
3
4
// create the chart
5
chart = anychart.scatter();
6
7
// assign the data to a series
8
var series1 = chart.marker(data);
9
10
// add data for line
11
var data2 = [
12
{x: 0.0, value: 0.0},
13
{x: 60, value: 60}
14
];
15
16
// assign the line data to a line series
17
var series2 = chart.line(data2);
18
19
// set title
20
chart.title("% of Cats v Dogs per state");
21
// set axes titles
22
chart.xAxis().title("% Cats");
23
chart.yAxis().title("% Dogs");
24
25
// enable major grids
26
chart.xGrid(true);
27
chart.yGrid(true);
28
29
// configure the visual settings of major grids
30
chart.xGrid().stroke({color: "#212D40", thickness: 0.3});
31
chart.yGrid().stroke({color: "#212D40", thickness: 0.3});
32
33
// enable minor grids
34
chart.xMinorGrid(true);
35
chart.yMinorGrid(true);
36
37
// configure the visual settings of minor grids
38
chart.xMinorGrid().stroke({color: "#212D40", thickness: 0.15, dash: 5});
39
chart.yMinorGrid().stroke({color: "#212D40", thickness: 0.15, dash: 5});
40
41
// draw chart
42
chart.container("container").draw();
43
44
});
45
})