anychart.onDocumentReady(function () {
// create column chart
var chart = anychart.column();
var dataSet = anychart.data.set([
['Eyeshadows', 16252],
['Eyeliner', 8525],
['Eyebrow pencil', 14151],
['Nail polish', 10169],
['Lipstick', 15198],
['Lip gloss', 17489]
]);
// set chart title
chart.title('Top 6 Products by Revenue');
// map data for the first series, take x from the zero column and value from the first column of data set
var seriesData_one = dataSet.mapAs({'x': 0, 'value': 1});
// create first series with mapped data
var series = chart.column(seriesData_one);
series.name('Florida')
.color('pink');
// get shapes
var shapes = series.rendering().shapes();
// set rendering settings
series.rendering()
// set point function to drawing
.point(drawer)
// set update point function to drawing, change the point shape when the state changes
.updatePoint(drawer)
// set shapes
.shapes(shapes);
// set titles for Y-axis
chart.yAxis().title('Revenue in Dollars');
// set minimum for y-scale
chart.yScale().minimum(0);
// set tooltip prefix
chart.tooltip().valuePrefix('$');
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
function drawer() {
// if missing (not correct data), then skipping this point drawing
if (this.missing) {
return;
}
// get shapes group
var shapes = this.shapes || this.getShapesGroup(this.pointState);
// calculate the left value of the x-axis
var leftX = this.x - this.pointWidth / 2;
// calculate the right value of the x-axis
var rightX = leftX + this.pointWidth;
// calculate the half of point width
var rx = this.pointWidth / 2;
shapes.path
// resets all 'path' operations
.clear()
// draw cone
.moveTo(leftX, this.zero)
.lineTo(leftX + rx, this.value)
.lineTo(rightX, this.zero)
// set fill settings, gradient
.fill(['0 ' + anychart.color.darken(shapes.path.fill().color, 0.35),
'0.40 ' + anychart.color.darken(shapes.path.fill().color, 0.35),
'0.85 ' + anychart.color.lighten(shapes.path.fill().color, 0.35),
'1 ' + anychart.color.lighten(shapes.path.fill().color, 0.35)])
// set stroke settings
.stroke('1.5 ' + anychart.color.darken(shapes.path.fill().color, 0.5))
// close by connecting the last point with the first straight line
.close();
}