java实现FusionCharts实时图工具
FusionCharts强大无比，使用版本是FusionCharts3.2 (后面提供下载)破解版。web程序中无须jar包，
先看FusionChart如何获取数据：最常用的是setDataXML 和 setDataURL
setDataXML 是接收xml字符串，根据字符串生成图表信息，大多的图表是需要后台动态的获取数据的，适合于实时图表。
setDataURL 是接收xml路径的字符串，如果后台会生成xml文件，也是可以的，不适合实时图表。如果是固定的图表信息这个最适合。
所以setDataXML 比较实用，setDataJSON也一样。
下面的工具类的目的是给Action提供使用，提供最基本的，最常规的属性。如果是自定义很强，需要自己生成相应的xmldata,工具类通用了二十多种效果(可能还有，破解版的swf 不多)。
代码还不完善，基本功能够用了,单列和多列都可以使用，只需要改改相应的swf即可。
JSP中有一个自定义的图表，xmldata直接写在JSP里面了。
自定义的图表实现了很多非常规功能，如导出JPEG/JPG/PDF 导出进度条中文提示，导出按钮中文。断点的，数字和文字格式等，chart显示的效果等，详细用法在JSP中有注释。
由于结构的属性太多了，要查看里面的属性可以去FusionCharts_Evaluation\Code\ChartXSD\xxx.xsd等里面查看有哪些标签，哪些属性，以及属性类型等。
直接上代码
chart:<category label='Jun' /> <vLine color='FF5904' thickness='2'/>
chart:<trendlines><line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/> </trendlines>
import java.util.Random;
/*
* 图表数据集合
* 功能：组合数据,可自定义颜色，没有自定义颜色前12个为randomColor的顺序，
* 超过部分随意选择randomColor的一种颜色
* 对于下面自定义很强的 需要自己生成xmldata
* set alpha = '50' 透明度为50%
* set dashed='1' 虚线状态显示
* set 对于Line anchorSides='7' 显示的点为几边形 anchorRadius = '4' 形状大小
* set anchorBorderColor='A186BE' 点 的边框颜色 anchorBgColor='8BBA00' 点的背景色
* set 中如果没有value属性 还是留有空间 只是没显示 空元素
*/
public class DataSet {
private String[] randomColor = new String[] {
"AFD8F8", "F6BD0F", "8BBA00","FF8E46","008E8E","D64646",
"8E468E", "588526", "B3AA00","008ED6", "9D080D", "A186BE" };
private String seriesName; // 标示
private String[] setNames; // 名称
private String[] setValues;// 值
private String[] setColors;// 颜色
private String[] setTooltexts;// 提示信息tooltext='信息：{br}xxx...'
public String[] getSetNames() {
return setNames;
}
public void setSetNames(String[] setNames) {
this.setNames = setNames;
}
public String[] getSetColors() {
return setColors;
}
public void setSetColors(String[] setColors) {
this.setColors = setColors;
}
public String getSeriesName() {
return seriesName;
}
public void setSeriesName(String seriesName) {
this.seriesName = seriesName;
}
public String[] getSetValues() {
return setValues;
}
public void setSetValues(String[] setValues) {
this.setValues = setValues;
}
/*
* 多列数据组合
*/
public String createDataSet() {
String dataSet = "<dataset seriesName='" + seriesName + "'>";
dataSet+=createSets(dataSet,false);
dataSet += "</dataset>";
return dataSet;
}
/*
* 公用到普通的Column2D Column3D Line2D Line3D 等
*/
public String createSets(String dataSet,boolean boo) {
String newDataSet = "";
for (int i = 0; i < setValues.length; i++) {
if (setColors != null) {
if (setNames != null) {
newDataSet += "<set name = '" + setNames[i] + "' value='" + setValues[i] + "' color = '" + setColors[i]+ "'/>";
} else{
if(boo){
if(i>randomColor.length){
int ai = new Random().nextInt(12);
newDataSet += "<set value='" + setValues[i] + "' color = '" + randomColor[ai] + "'/>";
}else{
newDataSet += "<set value='" + setValues[i] + "' color = '" + setColors[i] + "'/>";
}
}else{
newDataSet += "<set value='" + setValues[i] + "' color = '" + setColors[i] + "'/>";
}
}
} else {
newDataSet += "<set value='" + setValues[i] + "'/>";
}
}
return newDataSet;
}
}
---------------------------------------------------------------------------------------------------
/*
* 图表工具
* 功能：支持MS多列系列图表，和单例系列图标
* 对于下面自定义很强的 需要自己生成xmldata
* chart x轴下标题文字 labelDisplay='Rotate' 垂直显示 slantLabels='1' 45 度倾斜
* chart x轴下标题文字 labelDisplay = "Stagger" staggerLines='n' 显示的行数 如果文字过长 就各行对应显示
* chart x轴下标题文字 labelStep='n' 文字每隔几个一显示
* chart x轴 上的柱顶部固定的文字值 rotateValues='1' 垂直显示
* chart connectNullData='1' 对于Line,跳过空元素直接与下一个节点连接
// lineDashGap='6' 虚线显示空元素的连接 需要程序处理上一个节点为dashed='1'
* chart lineDashGap = '5' 虚线的点的间隔
* chart decimals='2' 小数点后2位数 其他类似 对于数据差距比较很小(最大值最小值最少相差在1之内) 适用
// 如果想让柱状的值显示小数点后一位 forceDecimals='1' (Y轴显示还是2位或者更多)
* chart formatNumberScale='0' 显示格式为 234,344,679
* chart formatNumberScale='0' formatNumber='0' 显示格式为原始格式
*/
public class Chart {
private String caption;// 标题
private String xAxisName;
private String yAxisName;
private String showValues;
private String numberPrefix;
private String[] categories;
private DataSet[] dataset;
private String lineStartValue;
private String lineColor;
private String lineDisplayValue;
private String yAxisMinValue;
private String yAxisMaxValue;
public String getyAxisMinValue() {
return yAxisMinValue;
}
public void setyAxisMinValue(String yAxisMinValue) {
this.yAxisMinValue = yAxisMinValue;
}
public String getyAxisMaxValue() {
return yAxisMaxValue;
}
public void setyAxisMaxValue(String yAxisMaxValue) {
this.yAxisMaxValue = yAxisMaxValue;
}
public String getCaption() {
return caption;
}
public void setCaption(String caption) {
this.caption = caption;
}
public String getxAxisName() {
return xAxisName;
}
public void setxAxisName(String xAxisName) {
this.xAxisName = xAxisName;
}
public String getyAxisName() {
return yAxisName;
}
public void setyAxisName(String yAxisName) {
this.yAxisName = yAxisName;
}
public String getShowValues() {
return showValues;
}
public void setShowValues(String showValues) {
this.showValues = showValues;
}
public String getNumberPrefix() {
return numberPrefix;
}
public void setNumberPrefix(String numberPrefix) {
this.numberPrefix = numberPrefix;
}
public String[] getCategories() {
return categories;
}
public void setCategories(String[] categories) {
this.categories = categories;
}
public DataSet[] getDataset() {
return dataset;
}
public void setDataset(DataSet[] dataset) {
this.dataset = dataset;
}
public String getLineStartValue() {
return lineStartValue;
}
public void setLineStartValue(String lineStartValue) {
this.lineStartValue = lineStartValue;
}
public String getLineColor() {
return lineColor;
}
public void setLineColor(String lineColor) {
this.lineColor = lineColor;
}
public String getLineDisplayValue() {
return lineDisplayValue;
}
public void setLineDisplayValue(String lineDisplayValue) {
this.lineDisplayValue = lineDisplayValue;
}
/*
* MS 多列系列
*/
public String createChartXmlData() {
String chartXmlData = "<chart useRoundEdges='1' caption='" + caption + "' xAxisName='"
+ xAxisName + "' yAxisName='" + yAxisName + "' showValues= '"
+ showValues + "' numberPrefix='" + numberPrefix + "' "
+ " yAxisMinValue = '" + yAxisMinValue + "' yAxisMaxValue = '"
+ yAxisMaxValue + "'>";
;
chartXmlData += "<categories>";
for (int i = 0; i < categories.length; i++) {
chartXmlData += "<category label='" + categories[i] + "' />";
}
chartXmlData += "</categories>";
for (int i = 0; i < dataset.length; i++) {
chartXmlData += dataset[i].createDataSet();
}
chartXmlData += " <trendlines><line startValue='" + lineStartValue
+ "' color='" + lineColor + "' displayValue='"
+ lineDisplayValue + "'/></trendlines>";
chartXmlData += "</chart>";
return chartXmlData;
}
/*
* 单个图标系列
*/
public String createRoutineChartXmlData() {
String chartXmlData = "<graph useRoundEdges='1' caption='" + caption + "' xAxisName='"
+ xAxisName + "' yAxisName='" + yAxisName + "' showValues= '"
+ showValues + "' numberPrefix='" + numberPrefix + "' "
+ " yAxisMinValue = '" + yAxisMinValue + "' yAxisMaxValue = '"
+ yAxisMaxValue + "'>";
chartXmlData += dataset[0].createSets("",true);
chartXmlData += "</graph>";
return chartXmlData;
}
}
Action代码：
public void test() {// 随时测试
response.setCharacterEncoding("UTF-8");
Chart chart = new Chart();
chart.setCaption("图表信息");
chart.setxAxisName("月份");
chart.setyAxisName("交易额");
chart.setShowValues("0");
chart.setNumberPrefix("$");
String[] cs = { "1月", "2月", "3月", "4月", "5月" };
chart.setCategories(cs);
DataSet[] ds = new DataSet[3];// 三个进行对比
for (int i = 0; i < ds.length; i++) {
ds[i] = new DataSet(); // 对比五个月的数据
ds[i].setSeriesName("200" + i + "年");
int a1 = new Random().nextInt(1000);
if (a1 <= 0) {
a1 = 100;
}
int a2 = new Random().nextInt(1000);
if (a2 <= 0) {
a2 = 100;
}
int a3 = new Random().nextInt(1000);
if (a3 <= 0) {
a3 = 100;
}
int a4 = new Random().nextInt(1000);
if (a4 <= 0) {
a4 = 100;
}
int a5 = new Random().nextInt(1000);
if (a5 <= 0) {
a5 = 100;
}
String[] sv = { "" + a1, "" + a2, "" + a3, "" + a4, "" + a5 };
ds[i].setSetValues(sv);
}
chart.setDataset(ds);
chart.setLineStartValue("26000");
chart.setLineColor("91C728");
chart.setLineDisplayValue("Target");
chart.setyAxisMinValue("0"); // 最小值
chart.setyAxisMaxValue("1200");// 最大值
String xmlDate = chart.createChartXmlData();
PrintWriter pw;
try {
pw = response.getWriter();
pw.print(xmlDate);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void test1() {
response.setCharacterEncoding("UTF-8");
Chart chart = new Chart();
chart.setCaption("图表信息");
chart.setxAxisName("月份");
chart.setyAxisName("交易额");
chart.setShowValues("0");
chart.setNumberPrefix("$");
String[] cs = { "1月", "2月", "3月", "4月", "5月" };
DataSet[] ds = new DataSet[1];// 三个进行对比
ds[0] = new DataSet(); // 对比五个月的数据
ds[0].setSeriesName("2000年");
ds[0].setSetNames(cs);
String[] sv = { "" + 190, "" + 334, "" + 799, "" + 888, "" + 900 };
String[] sc = { "F6BD0F", "AFD8F8", "FF8E46", "008ED6", "A186BE" };
ds[0].setSetColors(sc);
ds[0].setSetValues(sv);
chart.setDataset(ds);
chart.setyAxisMinValue("0"); // 最小值
chart.setyAxisMaxValue("1200");// 最大值
String xmlDate = chart.createRoutineChartXmlData();
PrintWriter pw;
try {
pw = response.getWriter();
pw.print(xmlDate);
} catch (IOException e) {
e.printStackTrace();
}
}
JSP如下
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>图表Fusioncharts测试</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="chart/script/FusionCharts.js"></script>
<script type="text/javascript" src="chart/script/FusionChartsExportComponent.js"></script>
<script type="text/javascript">
window.onload = function(){
//chart x轴下标题文字 labelDisplay='Rotate' 垂直显示 slantLabels='1' 45 度倾斜
//chart x轴下标题文字 labelDisplay = "Stagger" staggerLines='n' 显示的行数 如果文字过长 就各行对应显示
//chart x轴下标题文字 labelStep='n' 文字每隔几个一显示
// chart x轴 上的柱顶部固定的文字值 rotateValues='1' 垂直显示
// set alpha = '50' 透明度为50%
// set dashed='1' 虚线状态显示
// set 对于Line anchorSides='7' 显示的点为几边形 anchorRadius = '4' 形状大小
// set anchorBorderColor='A186BE' 点 的边框颜色 anchorBgColor='8BBA00' 点的背景色
// set 中如果没有value属性 还是留有空间 只是没显示 空元素
// chart connectNullData='1' 对于Line,跳过空元素直接与下一个节点连接
// lineDashGap='6' 虚线显示空元素的连接 需要程序处理上一个节点为dashed='1'
// chart lineDashGap = '5' 虚线的点的间隔
// chart decimals='2' 小数点后2位数 其他类似 对于数据差距比较很小(最大值最小值最少相差在1之内) 适用
// 如果想让柱状的值显示小数点后一位 forceDecimals='1' (Y轴显示还是2位或者更多)
// chart formatNumberScale='0' 显示格式为 234,344,679
// chart formatNumberScale='0' formatNumber='0' 显示格式为原始格式
// chart clickURL='n-http://www.baidu.com' chart点击打开百度
// chart toolTipBorderColor 提示的边框颜色 toolTipBgColor 提示的背景色
// chart useRoundEdges = '1' chart展示圆柱状图表
// chart exportHandler='fcExporter1' chart指定client-side导出组件
// 导出功能所需要的三件事情： 1 引入FusionChartsExportComponent.js 2 html中添加导出按钮的div(id = 'xy') 3 并设置相应的属性 exportAtClient = '1'支持客户端导出 exportEnabled = '1' 可导出 4 chart指定exportHandler
// chart exportDialogMessage='已导出 ' 设置导出文件的时候百分比进度前的文字
var xx =
"<chart caption = '自定义图表(点击倒数第二个&右键导出)' bgColor='FF5904,FFFFFF' bgAlpha='100,100' bgRatio='0,100' bgAngle='0'"
+" staggerLines='3' labelDisplay='Stagger' labelStep='1' "
+" rotateValues='1' canvasPadding='0' connectNullData='1' lineDashGap='5'"
+" decimals='2' formatNumberScale='0' formatNumber='0' exportEnabled='1'"
+" toolTipBorderColor='D9E5F1' toolTipBgColor='D9E5F1' showToolTip='1' useRoundEdges='1'"
+" exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' exportDialogMessage='已导出 '>"
+"<set label='John' value='42900' tooltext = '第1个值为{br}：420'/>"
+"<set label='Const' value='12345' tooltext = '第2一个值为：295'/>"
+"<set label='Ivy' value='52233' tooltext = '第3个值为：523' dashed='1'/>"
+"<set label='Pery' />"
+"<set label='Erlang' />"
+"<set label='Chuank' />"
+"<set label='Sprone' value='42000' alpha='50' dashed='1' tooltext = '第1个值为{br}：420'/>"
+"<set label='July' value='2295' tooltext = '第2一个值为：295'/>"
+"<set label='Lim' value='52243' tooltext = '第3个值为：523'/>"
+"<set label='Joli' value='35679' tooltext = '第1个值为{br}：420'/>"
+"<set label='Boyka' link='JavaScript:myJS(\"Boyka\");' value='68420' tooltext = '第2一个值为：295'/>"
+"<set label='Abma' link='JavaScript:myJS(\"Abma\");' value='52463' tooltext = '第3个值为：523'/>"
+"<set label='Lanbo' link='JavaScript:myJS(\"Lanbo\");' value='49990' tooltext = '第1个值为{br}：420'/>"
+"<set label='Jim' link='newchart-xml-jim-quarterly' value='46999' tooltext = '第2一个值为：295' color='FF5906' />"
+"<set label='Chelios' value='49900' tooltext = '"+"杰森·斯坦森 主要作品{br}"
+"▪ 巴西任务 ( 2013) ▪ 帕克 ( 2013){br}"
+"▪ 暂告安全 ( 2012) ▪ 玩命追踪 ( 2012){br}"
+"▪ 波茨坦广场 ( 2012)▪ 敢死队2 ( 2012){br}"
+"▪ 铁血精英 ( 2011) ▪ 机械师 ( 2010){br}"
+"▪ 死亡飞车2 ( 2010)▪ 敢死队 ( 2010){br}▪ 怒火攻心2 高压电"+"' color='FF5904' "
+" link='JavaScript:myJS(\"49900\");' anchorRadius='5' anchorSides='6' anchorBorderColor='A186BE' anchorBgColor='8BBA00'/>"
+" <linkeddata id='jim-quarterly'><chart caption='第一层转向(点击第二个进入)' subcaption='For the year 2004' xAxisName='中国' yAxisName='GDP'> <set label='Q1' value='11700'/> <set label='Q2' link='newchart-xml-a-quarterly' value='8600'/> <set label='Q3' value='6900' /> <set label='Q4' value='10600' />"
+"<linkeddata id='a-quarterly'><chart caption='第二层转向' subcaption='浙江年度xx' xAxisName='浙江' yAxisName='GPP'> <set label='Q1' value='80'/> <set label='Q2' value='50'/> <set label='Q3' value='99' /> <set label='Q4' value='90' /> </chart> </linkeddata></chart> </linkeddata>"
+" <styles><style name='MyFirstBlur' type='Blur' blurX='6' blurY='6' /></styles></chart>";
// exportAtClient exportEnabled='1' 加入fcexplorer.js FusionChartsExportComponent.js
// FCExporter.swf 详细可见Client_side explorting-simple example
// linkeddata 要转向的图的数据来源
var myChart = new FusionCharts("chart/swf/Column2D.swf", "myChartId234", "300", "300");
myChart.setDataXML(xx);
myChart.render("test");
var myExportComponent = new FusionChartsExportObject("fcExporter1", "chart/swf/FCExporter.swf");
myExportComponent.componentAttributes.width = '400';
myExportComponent.componentAttributes.height = '60';
//Background color
myExportComponent.componentAttributes.bgColor = 'ffffdd';
//Border properties
myExportComponent.componentAttributes.borderThickness = '2';
myExportComponent.componentAttributes.borderColor = '0372AB';
//Font properties
myExportComponent.componentAttributes.fontFace = 'Arial';
myExportComponent.componentAttributes.fontColor = '0372AB';
myExportComponent.componentAttributes.fontSize = '9';
myExportComponent.componentAttributes.btnWidth = '30';
myExportComponent.componentAttributes.btnHeight= '20';
myExportComponent.componentAttributes.btnColor = 'E1f5ff';
myExportComponent.componentAttributes.btnBorderColor = '0372AB';
//Button font properties
myExportComponent.componentAttributes.btnFontFace = 'Verdana';
myExportComponent.componentAttributes.btnFontColor = '0372AB';
myExportComponent.componentAttributes.btnFontSize = '15';
myExportComponent.componentAttributes.btnsavetitle = '保存'
myExportComponent.componentAttributes.btndisabledtitle = '导出请点击右键...';
myExportComponent.Render("fce");//
//用configureLink可以指定不行形态的图表展现, 会替代掉原有的linkeddata
// 如果只有一个的话，可用下面，如果不是一种的话，下面代码不写。
/*
FusionCharts("myChartId234").configureLink (
{
swfUrl : "chart/swf/Pie3D.swf",
overlayButton:{
message: '返回',
fontColor : '880000',
bgColor:'FFEEEE',
borderColor: '660000'
}
}, 0);
*/
}
// 激发事件
function myJS(myVar){
window.alert(myVar);
}
$.ajax({
type: "POST",
url: "stat!test.action", //请求的action
success: function(data){ //结果 MSColumn2D MSColumn3D MSLine
var myChart = new FusionCharts("chart/swf/MSColumn2D.swf", "myChartId1", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv1");
myChart = new FusionCharts("chart/swf/MSColumn3D.swf", "myChartId2", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv2");
myChart = new FusionCharts("chart/swf/MSLine.swf", "myChartId3", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv3");
myChart = new FusionCharts("chart/swf/MSArea.swf", "myChartId3_1", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv3_1");
myChart = new FusionCharts("chart/swf/MSCombi2D.swf", "myChartId3_2", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv3_2");
// 纯3D 效果 可转动
myChart = new FusionCharts("chart/swf/MSColumnLine3D.swf", "myChartId3_3", "350", "350");
myChart.setDataXML(data);
myChart.render("chartDiv3_3");
myChart = new FusionCharts("chart/swf/Marimekko.swf", "myChartId3_4", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv3_4");
myChart = new FusionCharts("chart/swf/MSCombi3D.swf", "myChartId3_5", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv3_5");
}
});
$.ajax({
type: "POST",
url: "stat!test1.action", //请求的action
success: function(data){ //结果 Column2D Column3D Line Pie3D
var myChart = new FusionCharts("chart/swf/Column2D.swf", "myChartId4", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv4");
myChart = new FusionCharts("chart/swf/Column3D.swf", "myChartId4", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv5");
myChart = new FusionCharts("chart/swf/Line.swf", "myChartId6", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv6");
myChart = new FusionCharts("chart/swf/Pie2D.swf", "myChartId7", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv7");
myChart = new FusionCharts("chart/swf/Pie3D.swf", "myChartId8", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv8");
//////////////// 其他效果
myChart = new FusionCharts("chart/swf/SSGrid.swf", "myChartId9", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv9");
// 概率图2D
myChart = new FusionCharts("chart/swf/Pareto2D.swf", "myChartId10", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv10");
// 概率图3D
myChart = new FusionCharts("chart/swf/Pareto3D.swf", "myChartId11", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv11");
myChart = new FusionCharts("chart/swf/Doughnut2D.swf", "myChartId12", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv12");
myChart = new FusionCharts("chart/swf/Doughnut3D.swf", "myChartId13", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv13");
myChart = new FusionCharts("chart/swf/Area2D.swf", "myChartId14", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv14");
myChart = new FusionCharts("chart/swf/Bar2D.swf", "myChartId15", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv15");
}
});
</script>
</head>
<body>
<table>
<tr>
<td><div id = "chartDiv1"></div></td>
<td><div id = "chartDiv2"></div></td>
<td><div id = "chartDiv3"></div></td>
</tr>
<tr>
<td><div id = "chartDiv3_1"></div></td>
<td><div id = "chartDiv3_2"></div></td>
<td><div id = "chartDiv3_3"></div></td>
</tr>
<tr>
<td><div id = "chartDiv3_4"></div></td>
<td><div id = "chartDiv3_5"></div></td>
<td><div id = "test"></div><div id = "fce"></div></td>
</tr>
<!-- 下面是单列的图表 -->
<tr>
<td><div id = "chartDiv4"></div></td>
<td><div id = "chartDiv5"></div></td>
<td><div id = "chartDiv6"></div></td>
</tr>
<tr>
<td><div id = "chartDiv7"></div></td>
<td><div id = "chartDiv8"></div></td>
<td><div id = "chartDiv9"></div></td>
</tr>
<tr>
<td><div id = "chartDiv10"></div></td>
<td><div id = "chartDiv11"></div></td>
<td><div id = "chartDiv12"></div></td>
</tr>
<tr>
<td><div id = "chartDiv13"></div></td>
<td><div id = "chartDiv14"></div></td>
<td><div id = "chartDiv15"></div></td>
</tr>
</table>
</body>
</html>