Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<div id="container"></div>CSScopy
6
1
html, body, #container {2
width: 100%;3
height: 100%;4
margin: 0;5
padding: 0;6
}JavaScriptcopy
x
1
anychart.onDocumentReady(function () {2
3
// create a chart4
var chart = anychart.quadrant();5
6
//creating an annotations controller7
var controller = chart.annotations();8
9
// Create rectangle annotation 110
var area1 = controller.rectangle({11
xAnchor: 50, //bottom left point12
valueAnchor: 50, //bottom right point13
secondXAnchor: 90, //top left point 14
secondValueAnchor: 90, //top right point15
allowEdit: false,16
color: "#d92c7a",17
stroke: {18
color: "black",19
thickness: 3,20
lineCap: "round",21
dash: "10 5"22
}23
});24
25
// Create rectangle annotation 126
var area2 = controller.rectangle({27
xAnchor: 50, //bottom left point28
valueAnchor: 50, //bottom right point29
secondXAnchor: 75, //top left point 30
secondValueAnchor: 75, //top right point31
allowEdit: false,32
color: "#dc0909",33
stroke: {34
color: "black",35
thickness: 3,36
lineCap: "round",37
dash: "10 5"38
}39
});40
41
// Create rectangle annotation 142
var area3 = controller.rectangle({43
xAnchor: 13, //bottom left point44
valueAnchor: 50, //bottom right point45
secondXAnchor: 50, //top left point 46
secondValueAnchor: 60, //top right point47
allowEdit: false,48
color: "#3fd50d",49
stroke: {50
color: "black",51
thickness: 3,52
lineCap: "round",53
dash: "10 5"54
}55
});56
57
// Create rectangle annotation 158
var area4 = controller.rectangle({59
xAnchor: 5, //bottom left point60
valueAnchor: 50, //bottom right point61
secondXAnchor: 50, //top left point 62
secondValueAnchor: 40, //top right point63
allowEdit: false,64
color: "#8d908c",65
stroke: {66
color: "black",67
thickness: 3,68
lineCap: "round",69
dash: "10 5"70
}71
});72
73
// Create rectangle annotation 174
var area5 = controller.rectangle({75
xAnchor: 43, //bottom left point76
valueAnchor: 20, //bottom right point77
secondXAnchor: 50, //top left point 78
secondValueAnchor: 50, //top right point79
allowEdit: false,80
color: "#3f6b99",81
stroke: {82
color: "black",83
thickness: 3,84
lineCap: "round",85
dash: "10 5",86
}87
});88
89
// Create rectangle annotation 190
var area6 = controller.rectangle({91
xAnchor: 11, //bottom left point92
valueAnchor: 50, //bottom right point93
secondXAnchor: 50, //top left point 94
secondValueAnchor: 10, //top right point95
allowEdit: false,96
color: "#a4b7c9",97
stroke: {98
color: "black",99
thickness: 3,100
lineCap: "round",101
dash: "10 5"102
}103
});104
105
106
chart.crossing().stroke("black", 2, "5 3", "round");107
108
chart.quarters(109
{110
rightTop: {111
fill: "white",112
},113
rightBottom: {114
fill: "white",115
},116
leftTop: {117
fill: "white",118
// corners: 30,119
// cornerType: "cut"120
},121
leftBottom: {122
fill: "white",123
// corners: 30,124
// cornerType: "cut"125
},126
}127
);128
129
130
131
// set the container id132
chart.container("container");133
chart.draw();134
});