Fusion Charts in ZK

answered 2010-08-17 20:13:36 +0800

samchuang
4084 ● 4

Hi

you can refer to the code below

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk xmlns:h="http://www.w3.org/1999/xhtml"
	xmlns:w="http://www.zkoss.org/2005/zk/client">
<?script charset="UTF-8" src="./JSClass/FusionCharts.js"?>
<window title="new page title" border="normal">
<h:div id="chartdiv">
	<attribute w:name="onBind">
		   var chart = new FusionCharts("./Charts/Area2D.swf", "ChartId", "600", "275", "0", "0");
		   chart.setDataURL("./Data/Area2D.xml");		   
		   chart.render("chartdiv");
	</attribute>
</h:div>
</window>
</zk>

answered 2010-08-18 19:47:40 +0800

samchuang
4084 ● 4

Hi

about change color, you have to refer to the Fusion Charts document

answered 2010-10-21 21:48:05 +0800

cyhsiao
12

updated 2010-10-22 02:41:08 +0800

Hi,

I try to replace chart.setDataURL("") with chart.setDataXML("<chart><set label='A' value='10' /><set label='B' value='11' /></chart>") but got some error.
How to use chart.setDataXML('') function in ZK??

My code:
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:w="http://www.zkoss.org/2005/zk/client">
<?script charset="UTF-8" src="./FusionCharts.js"?>
<window title="new page title" border="normal">
<h:div id="chartdiv">
<attribute w:name="onBind">
var chart1 = new FusionCharts("./Column3D.swf", "ChartId", "400", "300", "0", "1");
chart1.setDataXML("<chart><set name='A' value='10' color='D64646' /><set name='B' value='11' color='AFD8F8' /></chart>");
chart1.render("chartdiv");
</attribute>
</h:div>
</window>
</zk>

error:
org.zkoss.zk.ui.UiException: Event listeners not support native content
org.zkoss.zk.ui.metainfo.Parser.parseAttribute(Parser.java:977)
org.zkoss.zk.ui.metainfo.Parser.parse(Parser.java:712)
org.zkoss.zk.ui.metainfo.Parser.parse(Parser.java:600)
org.zkoss.zk.ui.metainfo.Parser.parse(Parser.java:870)
org.zkoss.zk.ui.metainfo.Parser.parse(Parser.java:600)
org.zkoss.zk.ui.metainfo.Parser.parse(Parser.java:870)
org.zkoss.zk.ui.metainfo.Parser.parse(Parser.java:600)
org.zkoss.zk.ui.metainfo.Parser.parse(Parser.java:870)
org.zkoss.zk.ui.metainfo.Parser.parse(Parser.java:209)
org.zkoss.zk.ui.metainfo.Parser.parse(Parser.java:100)
org.zkoss.zk.ui.metainfo.PageDefinitions$MyLoader.parse(PageDefinitions.java:216)
org.zkoss.web.util.resource.ResourceLoader.load(ResourceLoader.java:92)
org.zkoss.util.resource.ResourceCache$Info.load(ResourceCache.java:226)
org.zkoss.util.resource.ResourceCache$Info.<init>(ResourceCache.java:200)
org.zkoss.util.resource.ResourceCache.get(ResourceCache.java:133)
org.zkoss.web.util.resource.ResourceCaches.get(ResourceCaches.java:130)
org.zkoss.zk.ui.metainfo.PageDefinitions.getPageDefinition(PageDefinitions.java:144)
org.zkoss.zk.ui.impl.AbstractUiFactory.getPageDefinition(AbstractUiFactory.java:113)
org.zkoss.zk.ui.http.DHtmlLayoutServlet.process(DHtmlLayoutServlet.java:236)
org.zkoss.zk.ui.http.DHtmlLayoutServlet.doGet(DHtmlLayoutServlet.java:164)
javax.servlet.http.HttpServlet.service(Unknown Source)
javax.servlet.http.HttpServlet.service(Unknown Source)

answered 2010-10-22 05:17:22 +0800

samchuang
4084 ● 4

Hi

the error is cause by you have tag in your code, so you can add <![CDATA[]]> to fix this

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk xmlns:h="http://www.w3.org/1999/xhtml"
	xmlns:w="http://www.zkoss.org/2005/zk/client">
	<?script charset="UTF-8" src="./JSClass/FusionCharts.js"?>
	<window title="new page title" border="normal">
		<h:div id="chartdiv">
			<attribute w:name="onBind"><![CDATA[
				var chart1 = new FusionCharts("./Charts/Column3D.swf", "ChartId", "400", "300", "0", "1");
				chart1.setDataXML("<chart><set name='A' value='10' color='D64646' /><set name='B' value='11' color='AFD8F8' /></chart>");
				chart1.render("chartdiv");
				]]></attribute>
		</h:div>
	</window>
</zk>

answered 2010-10-24 20:39:09 +0800

cyhsiao
12

Thank you very much samchuang.

answered 2010-10-27 21:02:17 +0800

cyhsiao
12

Hi samchuang,

I have another problem.
How to add "client-side exporting" function in ZK to export chart to image/pdf file?

I try to add the exporting code, but it doesn't work.... :(

  <?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk xmlns:h="http://www.w3.org/1999/xhtml"
	xmlns:w="http://www.zkoss.org/2005/zk/client">
<?script charset="UTF-8" src="FusionCharts.js"?>
<?script charset="UTF-8" src="FusionChartsExportComponent.js"?>
<window title="new page title" border="normal">
<h:div id="chartdiv">
	<attribute w:name="onBind">
    <![CDATA[
		   var chart1 = new FusionCharts("../Charts/Pie2D.swf", "ChartId", "400", "300", "0", "1");
		   chart1.setDataXML("<chart caption='Pie Chart' numberPrefix='$' exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1'><set value='25' label='Item A' color='AFD8F8' /><set value='17' label='Item B' color='F6BD0F' /><set value='23' label='Item C' color='8BBA00' isSliced='1' /><set value='65' label='Item D' color='A66EDD' /><set value='22' label='Item E' color='F984A1' /></chart>");		   
		   chart1.render("chartdiv");
		   var myExportComponent = new FusionChartsExportObject("fcExporter1", "FCExporter.swf");
    ]]>
	</attribute>
</h:div>
<h:div id="fcexpDiv" align="center">
  <attribute w:name="onBind">
    <![CDATA[
      var myExportComponent = new FusionChartsExportObject("fcExporter1", "FCExporter.swf");

      //Render the exporter SWF in our DIV fcexpDiv
      myExportComponent.Render("fcexpDiv");
    ]]>
  </attribute>
</h:div>

</window>
</zk>
  

answered 2010-11-01 21:08:17 +0800

samchuang
4084 ● 4

Hi

you can check Fusion chart's document here, refer to here

you can find "Client-side exporting "

answered 2010-11-08 20:02:55 +0800

ttyen
18

hi,
I use setSrc to open another window for fushion chart,

menu.zul:
Include include = spaceOwner.parent.getFellow("centerInclude");
include.setSrc("/fusion_chart6.zul?service=" .....

fusion_chart6.zul : same as above code cyhisao provide,

but got message: outer Object doesn't support this property or method

answered 2010-11-09 19:33:04 +0800

samchuang
4084 ● 4

Hi @ttyen,

can you provide your sample code?