amcharts XY Scatter
HTML
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 359px;"></div>
JavaScript
var chart;
var chartData = [
{
ax: 1,
ay: 0.5,
bx: 1,
by: 2.2},
{
ax: 2,
ay: 1.3,
bx: 2,
by: 4.9},
{
ax: 3,
ay: 2.3,
bx: 3,
by: 5.1},
{
ax: 4,
ay: 2.8,
bx: 4,
by: 5.3},
{
ax: 5,
ay: 3.5,
bx: 5,
by: 6.1},
{
ax: 6,
ay: 5.1,
bx: 6,
by: 8.3},
{
ax: 7,
ay: 6.7,
bx: 7,
by: 10.5},
{
ax: 8,
ay: 8.0,
bx: 8,
by: 12.3},
{
ax: 9,
ay: 8.9,
bx: 9,
by: 14.5},
{
ax: 10,
ay: 9.7,
bx: 10,
by: 15.0},
{
ax: 11,
ay: 10.4,
bx: 11,
by: 18.8},
{
ax: 15,
ay: 12.4,
bx: 12,
by: 14.8},
{
ax: 12,
ay: 11.7,
bx: 12,
by: 19.0},
{
ax: 1,
ay: 0.5,
bx: 1,
by: 2.2}];
AmCharts.ready(function() {
// XY CHART
chart = new AmCharts.AmXYChart();
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.marginRight = 0;
chart.marginTop = 0;
chart.autoMarginOffset = 0;
chart.dataProvider = chartData;
chart.startDuration = 1;
// AXES
// X
var xAxis = new AmCharts.ValueAxis();
xAxis.position = "bottom";
xAxis.axisAlpha = 0;
xAxis.autoGridCount = true;
chart.addValueAxis(xAxis);
// Y
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "left";
yAxis.axisAlpha = 0;
yAxis.autoGridCount = true;
chart.addValueAxis(yAxis);
// GRAPHS
// triangles up
var graph1 = new AmCharts.AmGraph();
graph1.lineColor = "#FF6600";
graph1.balloonText = "x:[[x]] y:[[y]]";
graph1.xField = "ax";
graph1.yField = "ay";
graph1.lineAlpha = 0;
graph1.bullet = "triangleUp";
chart.addGraph(graph1);
// triangles down
var graph2 = new AmCharts.AmGraph();
graph2.lineColor = "#FCD202";
graph2.balloonText = "x:[[x]] y:[[y]]";
graph2.xField = "bx";
graph2.yField = "by";
graph2.lineAlpha = 0;
graph2.bullet = "triangleDown";
...