JavaScript Charts: Bubble chart
<script type="text/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 = "/lib/samples/javascript/images/";
chart.panEventsEnabled = true;
chart.dataProvider = chartData;
chart.startDuration = 1.5;
// AXES
// X
var xAxis = new AmCharts.ValueAxis();
xAxis.position = "bottom";
xAxis.gridAlpha = 0.1;
xAxis.autoGridCount = true;
chart.addValueAxis(xAxis);
// Y
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "left";
yAxis.gridAlpha = 0.1;
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);
// WRITE
chart.write("chartdiv");
});
</script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
 Bubble chart |
