JavaScript Charts: Line chart with custom bullets
<script type="text/javascript">
var lineChartData = [{
date: new Date(2009, 10, 2),
value: 5
}, {
date: new Date(2009, 10, 3),
value: 15
}, {
date: new Date(2009, 10, 4),
value: 13
}, {
date: new Date(2009, 10, 5),
value: 17
}, {
date: new Date(2009, 10, 6),
value: 15
}, {
date: new Date(2009, 10, 9),
value: 19
}, {
date: new Date(2009, 10, 10),
value: 21
}, {
date: new Date(2009, 10, 11),
value: 20
}, {
date: new Date(2009, 10, 12),
value: 20
}, {
date: new Date(2009, 10, 13),
value: 19
}, {
date: new Date(2009, 10, 16),
value: 25
}, {
date: new Date(2009, 10, 17),
value: 24
}, {
date: new Date(2009, 10, 18),
value: 26
}, {
date: new Date(2009, 10, 19),
value: 27
}, {
date: new Date(2009, 10, 20),
value: 25
}, {
date: new Date(2009, 10, 23),
value: 29
}, {
date: new Date(2009, 10, 24),
value: 28
}, {
date: new Date(2009, 10, 25),
value: 30
}, {
date: new Date(2009, 10, 26),
value: 72,
customBullet: "/lib/samples/javascript/images/redstar.png" // note, one line has a custom bullet defined
},
{
date: new Date(2009, 10, 27),
value: 43
}, {
date: new Date(2009, 10, 30),
value: 31
}, {
date: new Date(2009, 11, 1),
value: 30
}, {
date: new Date(2009, 11, 2),
value: 29
}, {
date: new Date(2009, 11, 3),
value: 27
}, {
date: new Date(2009, 11, 4),
value: 26
}];
AmCharts.ready(function () {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = lineChartData;
chart.pathToImages = "/lib/samples/javascript/images/";
chart.panEventsEnabled = true;
chart.categoryField = "date";
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
chart.autoMargins = false;
chart.marginRight = 0;
chart.marginLeft = 0;
chart.marginBottom = 30;
chart.marginTop = 30;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
categoryAxis.axisAlpha = 0;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0.1;
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "line";
graph.valueField = "value";
graph.lineColor = "#D8E63C";
graph.customBullet = "/lib/samples/javascript/images/star.gif"; // bullet for all data points
graph.bulletSize = 14; // bullet image should be a rectangle (width = height)
graph.customBulletField = "customBullet"; // this will make the graph to display custom bullet (red star)
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
// WRITE
chart.write("chartdiv");
});
</script>
<div id="chartdiv" style="width:100%; height:400px;"></div>
 Line chart with custom bullets |
