Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
x
1
2
3
<div class="containerBig">4
<div class="box"> <div id="container"></div> </div>5
<div class="box"> <div id="container2"></div> </div>6
<div class="box"> <div id="container3"></div> </div>7
<div class="box"> <div id="container4"></div> </div>8
</div>9
10
11
12
13
14
15
16
17
18
CSScopy
43
1
html, body {2
width: 100%;3
height: 100%;4
margin: 0;5
padding: 0;6
}7
8
.containerBig{ 9
width:100%;10
height:100%;11
display:grid;12
grid-template-columns: 500px 500px;13
grid-row: auto auto;14
grid-column-gap: 0px;15
grid-row-gap: 0px;16
.box{17
background-color:#333;18
border-radius:10px;19
color:#fff;20
display:flex;21
align-items:center;22
justify-content:center;23
font-size:40px;24
font-family:sans-serif;25
}26
}27
28
#container {29
height: 100%;30
}31
32
#container2 {33
height: 100%;34
}35
36
#container3 {37
height: 100%;38
}39
40
#container4 {41
height: 100%;42
}43
JavaScriptcopy
207
1
anychart.onDocumentReady(function () {2
// chart type3
chart = anychart.polar();4
chart.xScale().minimum(-180).maximum(180).ticks().interval(45);5
chart.yScale().ticks().interval(2);6
chart.startAngle(90);7
8
9
chart.title().text("Polar Chart");10
11
chart.line([12
{x: 90, value: 0},13
{x: 90, value: 1},14
{x: 90, value: 2},15
{x: 135, value: 3},16
{x: 135, value: 4},17
{x: 135, value: 5},18
{x: 45, value: 6},19
{x: 45, value: 7},20
{x: 45, value: 8},21
{x: 90, value: 9},22
{x: 90, value: 10}23
]).markers(true).closed(false).color("#000000");24
25
26
chart.xAxis().labels().fontWeight(900);27
chart.container("container").draw();28
29
30
31
32
33
34
35
36
37
chart2 = anychart.polar();38
chart2.xScale().minimum(-180).maximum(180).ticks().interval(45);39
chart2.yScale().ticks().interval(2);40
chart2.startAngle(90);41
42
43
44
var series = chart2.line([45
{x: 90, value: 0},46
{x: 90, value: 1},47
{x: 90, value: 2},48
{x: 135, value: 3},49
{x: 135, value: 4},50
{x: 135, value: 5} 51
]).markers(true).closed(false).color("#000000");52
var marker = series.markers();53
marker.type('circle');54
55
var series2 = chart2.line([56
{x: 45, value: 6},57
{x: 135, value: 5} 58
]).markers(true).closed(false).color("#000000");59
var marker2 = series2.markers();60
marker2.type('circle');61
62
var series3 = chart2.line([63
{x: 45, value: 6},64
{x: 45, value: 7},65
{x: 45, value: 8},66
{x: 90, value: 9},67
{x: 90, value: 10} 68
]).markers(true).closed(false).color("#000000");69
var marker3 = series3.markers();70
marker3.type('circle');71
72
chart2.xAxis().labels().fontWeight(900);73
chart2.container("container2").draw();74
75
76
77
78
79
chart3 = anychart.polar();80
chart3.xScale().minimum(-180).maximum(180).ticks().interval(45);81
chart3.yScale().ticks().interval(20);82
chart3.startAngle(90);83
var totalLength = 0;84
for (var i = 0; i < 7; i++) {85
chart86
87
var series4 = chart3.line([88
{x: 90, value: totalLength},89
{x: 90, value: totalLength+1},90
{x: 90, value: totalLength+2},91
{x: 135, value: totalLength+3},92
{x: 135, value: totalLength+4},93
{x: 135, value: totalLength+5} 94
]).markers(false).closed(false).color("#000000"); 95
var marker4 = series4.markers();96
marker4.type('circle');97
98
var series5 = chart3.line([99
{x: 45, value: totalLength+6},100
{x: 135, value: totalLength+5} 101
]).markers(false).closed(false).color("#000000"); 102
var marker5 = series5.markers();103
marker5.type('circle');104
105
var series6 = chart3.line([106
{x: 45, value: totalLength+6},107
{x: 45, value: totalLength+7},108
{x: 45, value: totalLength+8},109
{x: 90, value: totalLength+9},110
{x: 90, value: totalLength+10} 111
]).markers(false).closed(false).color("#000000"); 112
var marker6 = series6.markers();113
marker6.type('circle');114
115
totalLength = totalLength+10;116
}117
118
chart3.xAxis().labels().fontWeight(900);119
chart3.container("container2").draw();120
121
122
123
124
125
126
chart4 = anychart.polar();127
chart4.xScale().minimum(-180).maximum(180).ticks().interval(45);128
chart4.yScale().ticks().interval(2);129
chart4.startAngle(90);130
131
132
133
chart4.line([134
{x: 90, value: 0},135
{x: 90, value: 1},136
{x: 90, value: 2},137
{x: 135, value: 3},138
{x: 135, value: 4},139
{x: 135, value: 5},140
{x: 45, value: 6},141
{x: 45, value: 7},142
{x: 45, value: 8},143
{x: 90, value: 9},144
{x: 90, value: 10},145
{x: 90, value: 11},146
{x: 90, value: 12},147
{x: 90, value: 13},148
{x: 135, value: 14},149
{x: 135, value: 15},150
{x: 135, value: 16},151
{x: 45, value: 17},152
{x: 45, value: 18},153
{x: 45, value: 19},154
{x: 90, value: 20},155
{x: 90, value: 21},156
{x: 90, value: 22},157
{x: 135, value: 23},158
{x: 135, value: 24},159
{x: 135, value: 25},160
{x: 45, value: 26},161
{x: 45, value: 27},162
{x: 45, value: 28}, 163
{x: 90, value: 29},164
{x: 90, value: 30},165
{x: 90, value: 31},166
{x: 135, value: 32},167
{x: 135, value: 33},168
{x: 135, value: 34},169
{x: 45, value: 35},170
{x: 45, value: 36},171
{x: 45, value: 37},172
{x: 90, value: 38},173
{x: 90, value: 39},174
{x: 90, value: 40},175
{x: 135, value: 41},176
{x: 135, value: 42},177
{x: 135, value: 43},178
{x: 45, value: 44},179
{x: 45, value: 45},180
{x: 45, value: 46},181
{x: 90, value: 47},182
{x: 90, value: 48},183
{x: 90, value: 49},184
{x: 135, value: 50},185
{x: 135, value: 51},186
{x: 135, value: 52},187
{x: 45, value: 53},188
{x: 45, value: 54},189
{x: 45, value: 55},190
{x: 90, value: 56},191
{x: 90, value: 57},192
{x: 90, value: 58},193
{x: 135, value: 59},194
{x: 135, value: 60},195
{x: 135, value: 61},196
{x: 45, value: 62},197
{x: 45, value: 63},198
{x: 45, value: 64}199
]).markers(true).closed(false).color("#000000");200
201
202
chart4.xAxis().labels().fontWeight(900);203
chart4.container("container").draw();204
205
});206
207