jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Charts drawn inside of display:none divs Posts

September 19, 2014 at 1:02 pm Charts drawn inside of display:none divs #59779

Participant

I ran into a strange issue the other day.

What should happen with the code below is when you click the first chart, it should toggle display of the second one, with the second one starting as off. The issue I see is that because the second one is not displayed at page load, the second chart doesn’t get drawn. This can be resolved/worked around by adding $(‘#hiddenContent’).toggle(); to the document.ready function and removing the hidden styling from the div, but it seems like it shouldn’t behave that way.

Is this actually intended behavior?

<html lang="en">
<head>
    <title id='Description'>jqxChart Events Example</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data
            var  sampleData = [
                    { Day:'Monday', Keith:30, Erica:15, George: 25},
                    { Day:'Tuesday', Keith:25, Erica:25, George: 30},
                    { Day:'Wednesday', Keith:30, Erica:20, George: 25},
                    { Day:'Thursday', Keith:35, Erica:25, George: 45},
                    { Day:'Friday', Keith:20, Erica:20, George: 25},
                    { Day:'Saturday', Keith:30, Erica:20, George: 30},
                    { Day:'Sunday', Keith:60, Erica:45, George: 90}
                ];
                
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        dataField: 'Day',
                        showGridLines: false
                    },
                colorScheme: 'scheme11',
                showToolTips: false,
                seriesGroups:
                    [
                        {
                            type: 'column',
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            mouseover: myEventHandler,
                            mouseout: myEventHandler,
                            click: myEventHandler,
                            
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith'},
                                    { dataField: 'Erica', displayText: 'Erica'},
                                    { dataField: 'George', displayText: 'George'}
                                ]
                        }
                    ]
            };
			
            // prepare jqxChart settings
            var settingsHidden = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        dataField: 'Day',
                        showGridLines: false
                    },
                colorScheme: 'scheme11',
                showToolTips: false,
                seriesGroups:
                    [
                        {
                            type: 'column',
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            mouseover: myEventHandler,
                            mouseout: myEventHandler,
                            click: myEventHandler,
                            
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith'},
                                    { dataField: 'Erica', displayText: 'Erica'},
                                    { dataField: 'George', displayText: 'George'}
                                ]
                        }
                    ]
            };
            
            function myEventHandler(e)
            {
                var eventData = '<b>Last Event: </b>' + e.event + '<b>, DataField: </b>' + e.serie.dataField + '<b>, Value: </b>' + e.elementValue;
                $('#eventText').html(eventData);
				if (e.event=='click')
					$('#hiddenContent').toggle();
            };
                        
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body style="background:white;">
    <table>
    <tr>
    <td>
    <div id='chartContainer' style="width:600px; height: 400px"/>
    </td>
    <tr><td>
    <div id='eventText' style="width:600px; height: 30px"/>
    </td>
    </tr>
	<tr>
	<td>
	<div id="hiddenContent" style="display:none">
	<div id="otherChartcontainer" style="width: 600px; height: 400px;" />
	<span>Some Text</span>
	</div>
	</td>
	<td />
	</tr>
    </table>
</body>
</html>

September 19, 2014 at 3:15 pm Charts drawn inside of display:none divs #59793

Peter Stoev

Keymaster

Hi crimius,

First problem in the provided code is missing DOCTYPE about the html tag.
In addition, Chart can be drawn in visible DIV tag. After it is drawn, you can hide it, if you wish.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.