HTMLcopy
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
var dataSet = anychart.data.set([
4
{x: "Twix", value: 100, url:"//www.google.com/search?q=Twix"},
5
{x: "Bounty", value: 200, url:"//www.google.com/search?q=Bounty"},
6
{x: "Picnic", value: 15, url:"//www.google.com/search?q=Picnic"},
7
{x: "Mars", value: 130, url:"//www.google.com/search?q=Mars"},
8
{x: "Snickers", value: 153, url:"//www.google.com/search?q=Snickers"},
9
{x: "KitKat", value: 120, url:"//www.google.com/search?q=KitKat"},
10
{x: "Oreo", value: 151, url:"//www.google.com/search?q=Oreo"}
11
]);
12
13
// set chart type
14
var chart = anychart.column();
15
16
chart.title("Confectionery Sales in April");
17
18
// set data
19
chart.column(dataSet).name('Boxes');
20
21
// set container and draw chart
22
chart.container("container");
23
chart.draw();
24
25
// add a listener
26
chart.listen("pointClick", function(e){
27
var index = e.point.getIndex();
28
var row = dataSet.row(index);
29
if (row.fillOld){
30
row.fill = row.fillOld;
31
delete row.fillOld;
32
} else{
33
row.fillOld = row.fill;
34
row.fill = "green";
35
}
36
dataSet.row(index, row);
37
});
38
39
// add a listener
40
chart.listen("pointDblClick", function(e){
41
var new_value = e.point.get("url");
42
window.open(new_value,"_blank");
43
});
44
45
});