amcharts Bubble simple
HTML
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
JavaScript
var chart;
var chartData = [{
x: 10,
y: 14,
value: 59},
{
x: 5,
y: 3,
value: 50},
{
x: -10,
y: -3,
value: 19},
{
x: -6,
y: 5,
value: 65},
{
x: 15,
y: -4,
value: 92},
{
x: 13,
y: 1,
value: 8},
{
x: 1,
y: 6,
value: 35}];
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.5;
// AXES
// X
var xAxis = new AmCharts.ValueAxis();
xAxis.title = "X Axis";
xAxis.position = "bottom";
xAxis.axisColor = "#DADADA"
xAxis.autoGridCount = true;
chart.addValueAxis(xAxis);
// Y
var yAxis = new AmCharts.ValueAxis();
yAxis.title = "Y Axis";
yAxis.position = "left";
yAxis.axisColor = "#DADADA"
yAxis.autoGridCount = true;
chart.addValueAxis(yAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "value"; // valueField responsible for the size of a bullet
graph.xField = "x";
graph.yField = "y";
graph.lineAlpha = 0;
graph.bullet = "bubble";
chart.addGraph(graph);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// WRITE
chart.write("chartdiv");
});