70858

Why does my chart (jqplot) fail to render until I press a button when integrated with zk?

Question:

I am using zk to display a page and as part of that I include an html/js page that holds the chart I want to display using jqplot.

If I load the html file by itself the plot shows up fine. When I include it in the zul page, it fails to show up. However there is a reset button (it resets the zoom level on the chart) that does appear. If I hit that button, the chart shows up fine.

I have no idea why this is happening or how to fix it. Does anyone have any ideas?

test.html...

<span id="test">Test2</span> <div class="jqPlot" id="chart1" style="height:300px; width:400px;"></div> <button onclick="plot.resetZoom();">Reset</button> <script language="javascript" type="text/javascript" src="/zk-test/js/jqplot/jquery.jqplot.js"></script> <script language="javascript" type="text/javascript" src="/zk-test/js/jqplot/plugins/jqplot.cursor.js"></script> <script language="javascript" type="text/javascript" src="/zk-test/js/jqplot/plugins/jqplot.dateAxisRenderer.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $.jqplot.config.enablePlugins = true; var goog = [["6/22/2009",425.32], ["6/8/2009",424.84], ["5/26/2009",417.23], ["5/11/2009",390], ["9/2/2008",444.25], ["8/27/2007",515.25]]; plot = $.jqplot('chart1', [goog], { // title: 'Google, Inc.', series: [{ // label: 'Google, Inc.', neighborThreshold: -1 }], axes: { xaxis: { renderer:$.jqplot.DateAxisRenderer, min:'August 1, 2007', tickInterval: '4 months', tickOptions:{formatString:'%Y/%#m/%#d'} }, yaxis: { renderer: $.jqplot.LogAxisRenderer, tickOptions:{formatString:'$%.2f'} } }, cursor:{show:true, zoom:true} }); }); </script>

And my test zul page...

<?xml version="1.0" encoding="UTF-8"?> <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?> <?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?> <?page zscriptLanguage="GroovyGrails"?> <zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd"> <window apply="zk.test.indexComposer"> <hbox> <image src="${z.resource(dir:'images', file:'grails_logo.png')}"/> </hbox> <tabbox height="100%"> <tabs id="tabs"> <tab id="tabinfo" label="Tab1" /> </tabs> <tabpanels id="tabpanel1"> <tabpanel> <include mode="defer" src="/js/jqplot/examples/test.html"/> </tabpanel> </tabpanels> </tabbox>

Answer1:

that is a timing issue, please replace

the $(document).ready(function() {

with

zk.afterMount(function(){ if (zk.mounting !== false) { zk.afterMount(arguments.callee); return; }

Recommend

  • API (curl)Command to Approve a promoted build Job in Jenkins
  • How to extract a number from a string [duplicate]
  • MAVEN : Run Multiple Maven Project using Maven Test
  • Javascript focus remove text highlight
  • TFS - how do I sum child task hours to parent
  • jquery validation - waiting for remote check to complete
  • Multiple producers single consumer locking schema
  • Tell Git to stop prompting me for conflicts when none really exist?
  • NUnit 3.0 TestCase const custom object arguments
  • Uncaught TypeError: $(…).select2 is not a function
  • How to view images from protected folder with php?
  • What does 'Language neutral' mean with regard to MAKELANGID?
  • Android activity accessing service's static reference before the service is ready
  • Display images in Django
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Switching to Release Build causes runtime error in Web Reference
  • DomPDF {PAGE_NUM} not on first page
  • Email format validation in mvc3 view
  • Javascript simulate pressing enter in input box
  • HTML download movie download link
  • Resize panoramic image to fixed size
  • Updating server-side rendering client-side
  • MySQL WHERE-condition in procedure ignored
  • Importing jscolor library in angular 2
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Web-crawler for facebook in python
  • Unanticipated behavior
  • How to disable jQuery.jplayer autoplay?
  • A cron job substitute?
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal