JavaScript Charts: Scrollable and zoomable bubble chart
<script type="text/javascript">
var chart;
var chartData = [{
y: 10,
x: 14,
value: 59,
y2: -5,
x2: -3,
value2: 44
}, {
y: 5,
x: 3,
value: 50,
y2: -15,
x2: -8,
value2: 12
}, {
y: -10,
x: -3,
value: 19,
y2: -4,
x2: 6,
value2: 35
}, {
y: -6,
x: 5,
value: 65,
y2: -5,
x2: -6,
value2: 168
}, {
y: 15,
x: -4,
value: 92,
y2: -10,
x2: -8,
value2: 102
}, {
y: 13,
x: 1,
value: 8,
y2: -2,
x2: -3,
value2: 41
}, {
y: 1,
x: 6,
value: 35,
y2: 0,
x2: -3,
value2: 16
}];
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;
chart.marginRight = 0;
chart.marginTop = 0;
// AXES
// X
var xAxis = new AmCharts.ValueAxis();
xAxis.position = "bottom";
xAxis.axisAlpha = 0;
xAxis.dashLength = 1;
xAxis.autoGridCount = true;
chart.addValueAxis(xAxis);
// Y
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "left";
yAxis.axisAlpha = 0;
yAxis.dashLength = 1;
yAxis.autoGridCount = true;
chart.addValueAxis(yAxis);
// GRAPHS
// first graph
var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.lineColor = "#b0de09";
graph.xField = "x";
graph.yField = "y";
graph.lineAlpha = 0;
graph.bullet = "bubble";
chart.addGraph(graph);
// second graph
var graph = new AmCharts.AmGraph();
graph.valueField = "value2";
graph.lineColor = "#fcd202";
graph.xField = "x2";
graph.yField = "y2";
graph.lineAlpha = 0;
graph.bullet = "bubble";
chart.addGraph(graph);
// 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>
 Scrollable and zoomable bubble chart |
