anychart.onDocumentReady(function () {
// create data set on our data
var dataSet = anychart.data.set(getData());
// map data for the first series, take x from the zero column and value from the first column of data set
var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
// map data for the second series, take x from the zero column and value from the second column of data set
var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});
// create line chart
var chart = anychart.line();
// adding dollar symbols to yAxis labels
chart.yAxis().labels().format('${%Value}');
// turn on chart animation
chart.animation(true);
// turn on the crosshair
chart.crosshair()
.enabled(true)
.yLabel({enabled: false})
.yStroke(null)
.xStroke('#cecece')
.zIndex(99);
chart.yAxis()
.title('The Share Price')
.labels({'padding': [5, 5, 0, 5]});
chart.xAxis().title('Month/Day');
// set chart title text settings
chart.title('The cost of ACME\'s shares\ncompared with their main competitor during month');
// create first series with mapped data
var series_1 = chart.spline(seriesData_1);
series_1.name('ACME Share Price');
series_1.markers().zIndex(100);
series_1.hovered().markers()
.enabled(true)
.type('circle')
.size(4);
// create second series with mapped data
var series_2 = chart.spline(seriesData_2);
series_2.name('The Competitor\'s Share Price');
series_2.markers().zIndex(100);
series_2.hovered().markers()
.enabled(true)
.type('circle')
.size(4);
// turn the legend on
chart.legend()
.enabled(true)
.fontSize(13)
.padding([0, 0, 20, 0]);
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
function getData() {
return [
['9/1', 10, 30],
['9/2', 12, 32],
['9/3', 11, 35],
['9/4', 15, 40],
['9/5', 20, 42],
['9/6', 22, 35],
['9/7', 21, 36],
['9/8', 25, 31],
['9/9', 31, 35],
['9/10', 32, 36],
['9/11', 28, 40],
['9/12', 29, 42],
['9/13', 40, 40],
['9/14', 41, 38],
['9/15', 45, 40],
['9/16', 50, 40],
['9/17', 65, 38],
['9/18', 45, 36],
['9/19', 50, 30],
['9/20', 51, 29],
['9/21', 65, 28],
['9/22', 60, 25],
['9/23', 62, 28],
['9/24', 65, 29],
['9/25', 45, 30],
['9/26', 55, 40],
['9/27', 59, 32],
['9/28', 52, 33],
['9/29', 53, 34],
['9/30', 40, 30],
['9/31', 45, 35]
]
}