jQWidgets Forums

Tagged: chart, content, jqxChart, jqxwindow, window

This topic contains 12 replies, has 6 voices, and was last updated by jmblaiz 11 years, 1 month ago.

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

Author

jqxchart inside jqxwindow Posts

November 6, 2013 at 5:28 pm jqxchart inside jqxwindow #32070

bobby

Member

Is it possible to insert a jqxchart inside a jqxwindow?
Have you got an example, please?

Thanks for you help

Bobby

November 7, 2013 at 6:08 am jqxchart inside jqxwindow #32124

Dimitar

Participant

Hello Bobby,

Yes, it is possible. Here is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow ").jqxWindow({ height: 440, width: 610, theme: 'summer' });
                // 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: 'scheme01',
                    seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith' },
                                    { dataField: 'Erica', displayText: 'Erica' },
                                    { dataField: 'George', displayText: 'George' }
                                ]
                        }
                    ]
                };
                // select the chartContainer DIV element and render the chart.
                $('#chartContainer').jqxChart(settings);
            });
        </script>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div>
                <div id='chartContainer' style="width: 600px; height: 400px" />
            </div>
        </div>
    </div>
</body>

Best Regards,
Dimitar

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

December 27, 2013 at 2:00 pm jqxchart inside jqxwindow #47009

adron

Participant

Hello. I try to use JqxChart inside JqxWindow. All works fine but tooltips are not visible because jqxwindow z-index == 18000 and at tooltips div z-index == 0. How can I solve this problem?

December 27, 2013 at 3:53 pm jqxchart inside jqxwindow #47015

Peter Stoev

Keymaster

Hi adron,

Which tooltips are not visible? In addition, you can configure the z-index through CSS.

Best Regards,
Peter Stoev

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

December 27, 2013 at 4:40 pm jqxchart inside jqxwindow #47018

adron

Participant

tooltip at the chart points.
code for this tooltip is created dynamically when I first rolls the mouse over any point of the graph:

<div class="jqx-rc-all jqx-button" style="position: absolute; cursor: default; overflow: hidden; background-color: rgb(255, 255, 255); border-color: rgb(43, 113, 194); display: none; left: 385.5px; top: 387.5px; opacity: 1;">
  <span class="jqx-chart-tooltip-text">
    ch1, 0: 100
  </span>
</div>

How can i set z-index:99999 for first div $(“.jqx-rc-all .jqx-button”) ?

December 27, 2013 at 5:54 pm jqxchart inside jqxwindow #47024

Peter Stoev

Keymaster

The last 2 posts by “adron” are removed due to violation with the jQWidgets EULA.

Best Regards,
Peter Stoev

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

December 27, 2013 at 5:59 pm jqxchart inside jqxwindow #47025

adron

Participant

ok. Just fix this bug please )

December 27, 2013 at 8:42 pm jqxchart inside jqxwindow #47026

Peter Stoev

Keymaster

Hi adron,

As I wrote, you can apply a z-index through CSS. Define a “style” on your page and add a CSS Class with z-index property which is applied to the Chart Tooltips.

Best Regards,
Peter Stoev

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

December 28, 2013 at 8:27 am jqxchart inside jqxwindow #47030

adron

Participant

Yes i try to define CSS style:
.jqx-chart-tooltip-text{
z-index:99999;
}
but it not help ! because it sets z-index to <span class=”jqx-chart-tooltip-text”> but we need to set z-index to span’s parent(div style=”position: absolute…) which is created dynamicly and has no classes !


<div style="position: absolute; cursor: default; overflow: hidden; background-color: rgb(255, 255, 255); border-color: rgb(43, 113, 194); display: none; left: 385.5px; top: 387.5px; opacity: 1;"> <---- we must set z-index:99999 to this div but how? 
  <span class="jqx-chart-tooltip-text">ch1, 0: 100</span>  <---- z-index == 99999 !
</div>

December 28, 2013 at 8:33 am jqxchart inside jqxwindow #47031

adron

Participant

And if i modifying jqxchart.js source by adding:
s.style.zIndex = 999999;
where s is a dynamically created div = ‘<div style=”position: absolute; cursor: default; overflow: hidden; background-color: rgb(255, 255, 255); border-color: rgb(43, 113, 194); display: none; left: 385.5px; top: 387.5px; opacity: 1;”>’
all works fine !
So I ask you in the next release make these changes in the jqxchart.hs source.
Thanks a lot.

December 28, 2013 at 11:58 am jqxchart inside jqxwindow #47034

Peter Stoev

Keymaster

Hi adron,

We will consider whether a change in jqxChart is necessary. However, I should remind you to take a look at the EULA before making changes in the scripts.

Best Regards,
Peter Stoev

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

January 16, 2014 at 9:07 am jqxchart inside jqxwindow #47944

mindgate

Participant

+1 from me.

I have the same issue, using charts in a modal window and tooltips do not show. No chance to get an own CSS fix to work as the created DIV’S have no ID and no CSS-classes. Please provide a quickfix.

March 2, 2014 at 7:25 pm jqxchart inside jqxwindow #50357

jmblaiz

Participant

Hello jqWidgets Team,

I’m having the same problem with the tooltips for a jqxChart inside a jqxWindow. When I resize the window a bit I can see that the tooltips are being drawn below the window (lower z-index). Please consider this issue for the next release.

Best regards

Author

Posts

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

You must be logged in to reply to this topic.