JavaScript Charts: Scatter chart
<script type="text/javascript">
var chart;
var chartData = [
// scatter points
{
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: 12,
ay: 11.7,
bx: 12,
by: 19.0
}];
AmCharts.ready(function () {
// XY CHART
chart = new AmCharts.AmXYChart();
chart.pathToImages = "/lib/samples/javascript/images/";
chart.panEventsEnabled = true;
chart.dataProvider = chartData;
chart.marginRight = 0;
chart.marginTop = 0;
chart.startDuration = 1;
// AXES
// X
var xAxis = new AmCharts.ValueAxis();
xAxis.position = "bottom";
xAxis.dashLength = 1;
xAxis.axisAlpha = 0;
xAxis.autoGridCount = true;
chart.addValueAxis(xAxis);
// Y
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "left";
yAxis.dashLength = 1;
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";
chart.addGraph(graph2);
// first trend line
var trendLine = new AmCharts.TrendLine();
trendLine.lineColor = "#FF6600";
trendLine.initialXValue = 1;
trendLine.initialValue = 2;
trendLine.finalXValue = 12;
trendLine.finalValue = 11;
chart.addTrendLine(trendLine);
// second trend line
var trendLine = new AmCharts.TrendLine();
trendLine.lineColor = "#FCD202";
trendLine.initialXValue = 1;
trendLine.initialValue = 1;
trendLine.finalXValue = 12;
trendLine.finalValue = 19;
chart.addTrendLine(trendLine);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// WRITE
chart.write("chartdiv");
});
</script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
 Scatter chart |
