jQWidgets Forums

jQuery UI Widgets Forums Chart Chart Styling

Tagged: 

This topic contains 9 replies, has 2 voices, and was last updated by  sushanth009 13 years ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • Chart Styling #4540

    sushanth009
    Member

    Hello Peter,

    I am trying to use the jqxChart widget for which I am getting the chart image but for some reason I cannot see the data in the chart properly(x-axis and y-axis)). I went thru the base.css and energyblue.css and it was all looking fine. Can you point out to me as in where I am committing a mistake. The chart that is being rendered is

    And the script used to display the chart is

    var settings = {
    title: "Cost/Usage data for last 12 months",
    description: 'Yohuhu',
    showLegend: true,
    source: dataAdapter,
    padding: { left: 30, top: 30, right: 15, bottom: 30 },
    categoryAxis: {
    text: 'Category Axis',
    dataField: 'Mon',
    showTickMarks: true,
    tickMarksColor: '#888888',
    showGridLines: true
    },
    colorScheme: 'scheme06',
    seriesGroups:
    [
    {
    type: 'line',
    valueAxis:
    {
    unitInterval: 800,
    minValue: 2000,
    maxValue: 5000,
    description: 'Cost'
    },
    series: [
    { dataField: 'Cos', displayText: 'Cost' },
    { dataField: 'Usg', displayText: 'Usage' }
    ]
    }
    ]
    };

    $('#cu-chart-cost').jqxChart(settings);

    Chart Styling #4544

    sushanth009
    Member

    This is the chart Image that was rendered

    Chart Styling #4545

    Peter Stoev
    Keymaster

    Could you send us a small test sample to support@jqwidgets.com with some simple data which you use for rendering the Chart? We’ll have to debug the specific behavior in your scenario.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Chart Styling #4546

    sushanth009
    Member

    Sorry about the duplicate posts.. I was trying to upload the Image but it would not go thru. You can have a look at the image here..

    http://imageshack.us/photo/my-images/196/chart1d.jpg/

    Chart Styling #4551

    Peter Stoev
    Keymaster

    Hi sushanth009,

    Please try the following code with the latest version. I wasn’t able to reproduce it on my side, but there’s could be something different in your scenario.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.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">
    $(document).ready(function () {
    var result = [
    {Mon:'5/2012', Cos:'3593.97', Usg:'25238.00'},{Mon:'4/2012', Cos:'3564.41', Usg:'25491.00'},{Mon:'3/2012', Cos:'3462.44', Usg:'24550.00'},
    {Mon:'2/2012', Cos:'3842.94', Usg:'28328.00'},{Mon:'1/2012', Cos:'3759.38', Usg:'27529.00'},{Mon:'12/2011', Cos:'3892.87', Usg:'29001.00'},
    {Mon:'11/2011', Cos:'3794.45', Usg:'27533.00'},{Mon:'10/2011', Cos:'3854.58', Usg:'27838.00'},{Mon:'9/2011', Cos:'5163.81', Usg:'31569.00'},
    {Mon:'8/2011', Cos:'4884.23', Usg:'29337.00'},{Mon:'7/2011', Cos:'4781.43', Usg:'28383.00'},{Mon:'6/2011', Cos:'5061.42', Usg:'30679.00'}
    $('#jqxChart').jqxChart(settings);
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxChart' style="width:680px; height:400px">
    </div>
    </body>
    </html>

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Chart Styling #4588

    sushanth009
    Member

    Hello Peter,

    I tried rechecking the code that was written.. For some reason the chart seems to be rendering fine on a different page. But on the page I am currently working it is still the same. I tried removing all the styles that were applicable on the page but was still not able to pin point the error. I am not knowing how to debug this scenario,.

    Chart Styling #4609

    Peter Stoev
    Keymaster

    Hi sushanth009,

    Could you send us a small sample which will illustrate the described behavior? There could be something on your page that is in conflict with the Chart’s rendering or CSS styles.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Chart Styling #4631

    sushanth009
    Member

    I am using 6 style sheets in my page..

    The first is the jqx.base.css
    2.) jqx.energyblue.css
    3.) jQuery UI- Redmond theme Styles
    4.) jsTree Styles

    5.) Styles for the Master Page..

    html, body, form
    {
    height: 100%;
    width: 100%;
    min-height: 100%;
    }

    body
    {
    overflow: hidden; /*overflow: auto;*/
    margin: 0;
    clear: both;
    }

    #container
    {
    display:block;
    /*width: 100%;*/
    position: relative;
    padding: 0;
    margin: 0;
    height: 100%; /*max-height: 900px; min-width: 800px; max-width: 1920px;*/
    }

    #header, #content, #footer
    {
    /* width: 100%;*/
    clear: both;
    margin:auto;
    }

    #header, #footer
    {
    left: 0;
    right: 0;
    }

    #header
    {
    position: absolute;
    top: 0;
    height: 87px;
    background-color: #d2e1f1;
    }

    #content
    {
    background-color: white;
    padding: 0;
    margin: 0;
    top: 87px;
    position:absolute; /*relative;*/
    height: 100%;
    width:100%;
    bottom: 40px;
    }

    #footer
    {
    position: absolute;
    bottom: 0;
    height: 40px;
    background-color: #d2e1f1;
    }

    #nav
    {
    width: 100%;
    height: 46px;
    margin-top: 0;
    position: relative;
    top: 6px;
    }

    #nav-menu-items
    {
    width: 100%;
    height: 30px;
    background: url("../Images/blue_nav_bar.jpg") repeat;
    position: absolute;
    }

    #header-row-separater
    {
    height: 11px;/*4px;*/
    width: 100%;
    position: relative;
    background:url("../Images/greenbar.jpg") 50% 50% repeat;
    }

    #nav-container, #logo-container
    {
    height: 80%;
    position: absolute;
    }

    #nav-container
    {
    width: 80%;
    float: left;
    bottom: 0;
    }

    /**logo**/
    #logo-container
    {
    bottom: 0;
    width: 20%;
    float: right;
    margin-left: 80%;
    }

    #logo
    {
    float: right;
    max-width: 150px;
    }

    #logo img
    {
    float: right;
    margin-right: 20px;
    border: 0;
    }
    /**End Logo**/

    #nav-list
    {
    height: 100%;
    margin: 0;
    padding-left: 5px;
    position: absolute;
    width: 100%;
    }

    #nav-list > li
    {
    display: inline-block;
    list-style-type: none;
    height: 100%;
    float: left;
    padding-right: 5px;
    }

    .tabs
    {
    display: inline-block;
    height: 30px;
    padding-top: 1px; /*set 6px for chrome*/
    z-index: 5000;
    }

    /*#nav-list li.off .tabs:hover
    {
    border:3px solid #b1cd48;
    }*/

    #nav-list li img
    {
    /*width: 100px; height: 30px;*/
    border: 0;
    }

    #nav-list li ul
    {
    margin: 0px;
    padding: 0px;
    display: none;
    position: absolute;
    height: 100%;
    max-height: 30px;
    z-index: 10;
    left: 20px;
    width: 100%;
    }

    #nav-list li:hover ul
    {
    display: block;
    width: 100%;
    z-index: 10;
    }

    #nav-list li li
    {
    list-style-type: none;
    display: inline;
    color: white;
    padding-right: 0.5em;
    padding-left: 0.5em;
    margin-top: 3px;
    padding-bottom: 9px;
    position: relative;
    }

    #nav-list li li a
    {
    text-decoration: none;
    color: white;
    font-size: medium;
    font-weight: bold;
    }

    #nav-list li li span
    {
    position: relative;
    top: 3px;
    font-size: medium !important;
    }

    #nav-list li li:hover a
    {
    color: #42456b;
    }

    #menu-items-left
    {
    width: 70%;
    float: left;
    height: 100%;
    z-index: -1;
    }

    #menu-items-right
    {
    width: 30%;
    height: 100%;
    float: left;
    position: relative;
    text-align: right;
    z-index:7000;
    top:-7px;
    /*min-width:330px;
    max-width:370px;*/
    }

    #menu-items-right ul
    {
    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    float: right;
    margin: 0;
    padding-right: 1em;
    }

    #menu-items-right ul li
    {
    list-style-type: none;
    display: inline;
    padding-right: 5px;
    color: White;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    }

    .quickicons
    {
    padding-top: 5px;
    }

    #menu-items-right ul li span
    {
    position: relative;
    bottom: 3px;
    font-size: 12pt;
    font-weight: bold;
    }

    #footer-row-separater
    {
    height: 3px;
    width: 100%;
    position: static;
    top: 0;
    margin: 0;
    }

    #footer-links, #footer-copyright
    {
    width: 100%;
    height: 50%;
    text-align: center;
    font-size: small;
    }

    #footer-links-ul, #footer-copyright-ul
    {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    padding-top: 2px;
    left: 0;
    }

    #footer-copyright-ul
    {
    padding-bottom: 0;
    margin-bottom: 0;
    }

    #footer ul li
    {
    list-style-type: none;
    display: inline;
    padding: 2px;
    }

    #footer a
    {
    color: Black;
    text-decoration: none;
    }

    #footer a:hover
    {
    text-decoration: underline;
    }

    .bg-blue
    {
    background-color: #89a0bb;
    }

    .bg-green
    {
    background-color: #b1cd48;
    }

    .active {}
    .inactive {}
    .ul-inactive {}
    .ul-active {}

    #nav-list li.off > ul, #nav-list li.on > ul
    {
    display: none;
    position: absolute;
    top: 30px;
    height: 25px;
    padding-top: 7px;
    left: 10px;
    width: 95%;
    }

    #nav-list li.on > ul > a, #nav-list li.off > ul > a, #nav-list li.on > ul > span, #nav-list li.off > ul > span
    {
    float: left;
    width: auto;
    margin-right: 15px;
    }

    #nav-list li.on > ul
    {
    display: block;
    z-index: 5000;
    }

    #nav-list li.off:hover > ul
    {
    display: block; /*background-color:#89a0bb;*/
    top: 30px;
    padding-top: 7px;
    z-index: 5000 !important; /*border-top:4px solid #b1cd48;*/
    }

    .z-raise
    {
    z-index: 4000 !important;
    }

    .z-down
    {
    z-index: -1 !important;
    }

    a.current, a.over
    {
    color: #42456b !important;
    }

    .loginStyle
    {
    display: inline;
    position: static !important;
    }

    a.nolink
    {
    text-decoration: none;
    color: White;
    }

    ul#synergy-links ul
    {
    display: none !important;
    background-color: #42456b !important;
    border: 1px solid gray !important;
    width: 180px !important;
    height: auto !important;
    position: absolute;
    top: 27px;
    left: 0px;
    max-height: none !important;
    clear: left;
    }

    ul#synergy-links ul li
    {
    list-style-type: none !important;
    float: none !important;
    display: list-item;
    height: 100%;
    margin: 0 !important;
    }

    ul#synergy-links li:hover ul
    {
    display: block !important;
    }

    ul#synergy-links ul li:hover
    {
    background-color: #b1cd48 !important;
    z-index: -1 !important;
    }

    ul#synergy-links ul li a
    {
    width: 100%;
    height: 100%;
    display: block;
    padding: 5px;
    color: white !important;
    text-decoration: none;
    }

    ul#synergy-links ul li:hover a
    {
    z-index: 5000;
    }

    /*Billing tab css begin*/
    div#left-content, div#right-content
    {
    /*border: 1px solid #89a0bb;*/ /*margin: 1px;*/
    padding: 0.4em;
    display:block; /*newly added*/
    height: 100%;
    overflow: auto;
    position: absolute; /*relative;*/
    }

    div#left-content
    {
    float: left;
    width: 300px;
    }

    div#right-content
    {
    margin-left: 300px;
    margin-right: 0;
    background: white;
    width: 100%;
    position: absolute;
    }

    /*billing tab css end*/
    /**jquery plugin css Begin**/
    .ui-layout-resizer
    {
    /*background-color: #89a0bb !important;*/
    background: url("../Images/blue_vbar_o.png") repeat-y !important;
    }

    .ui-layout-resizer-closed
    {
    /*background-color: #89a0bb !important;*/
    background: url("../Images/blue_vbar_c.png") repeat-y !important;
    }

    .ui-layout-resizer-open-hover, .ui-layout-resizer-dragging
    {
    background-color: #b1cd48;
    }

    .ui-layout-toggler-west-open
    {
    background: url("../Images/toggle-lt.gif") no-repeat scroll right center transparent !important;
    }

    .ui-layout-toggler-west-closed
    {
    background: url("../Images/toggle-rt-big.png") no-repeat scroll right center transparent !important;
    }

    .ui-layout-resizer-west:hover
    {
    background-color: #b1cd48 !important;
    }

    .jstree li, .jstree li a, .jstree-hovered
    {
    padding: 2px 0 !important;
    font-size: 0.9em !important;
    }

    .jstree-hovered
    {
    background: #d2e1f1 !important;
    }

    #tree-tabs
    {
    display: none;
    }

    #tree-tabs > ul
    {
    border-bottom: 1px solid #d2e1f1;
    }

    #no-tree, #setup-ctree
    {
    text-decoration: none !important;
    font-size: small;
    padding-left: 5px;
    }

    #setup-ctree
    {
    color: #0000FF !important;
    }

    #setup-ctree:hover
    {
    text-decoration: underline !important;
    }

    #cust-tree
    {
    padding: 2px;
    }

    /*
    .ui-helper-reset
    {
    font-size: x-small !important;
    }

    .ui-widget-content
    {
    border: none !important;
    }

    .ui-tabs .ui-tabs-panel
    {
    padding: 2px 0 0 0 !important;

    }
    */

    /**Jquery plugin css End**/

    /**ContactUs popop css**/
    .contactusleftdiv
    {
    position: absolute;
    top: 50%;
    left: 0;
    height: 42px;
    margin-left: 34px;
    margin-top: -24px;
    }

    .contactusrightdiv
    {
    position: absolute;
    top: 50%;
    right: 0;
    height: 54px;
    text-align: right;
    margin-right: 44px;
    margin-top: -27px;
    }

    .contactusbold
    {
    font-size: 18px;
    font-weight: bold;
    color: #42456B;
    }

    .contactusunderline
    {
    font-size: 18px;
    color: #42456B;
    text-decoration: underline;
    }

    .contactusregular
    {
    font-size: 16px;
    color: #42456b;
    }

    .modalBackground
    {
    position: absolute;
    z-index: 100;
    top: 0px;
    left: 0px;
    background-color: #000;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    }

    .pnlContactUsPopup
    {
    /*display: none;*/
    border: solid 2px black;
    background-color: White;
    }

    .contactUsPopupHeader
    {
    height: 50px;
    background-color: #d2e1f1;
    position: relative;
    }

    .lblHeader
    {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #42456B;
    height: 30px;
    top: 50%;
    margin-top: -15px;
    margin-left: 17px;
    }

    .greenstripe
    {
    height: 4px;
    background-color: #b1cd48;
    }

    .bluestripe
    {
    height: 19px;
    background-color: #89a0bb;
    }

    .contactUsContentDiv
    {
    width: 469px;
    }

    .managerDiv
    {
    height: 70px;
    position: relative;
    }

    .greyline
    {
    height: 2px;
    background-color: Gray;
    margin-left: 9px;
    margin-right: 9px;
    }

    .greenline
    {
    height: 9px;
    background-color: #b1cd48;
    }

    .conserviceInfoDiv
    {
    height: 115px;
    position: relative;
    }

    .conserviceInfoDivLeft
    {
    position: absolute;
    left: 0px;
    top: 50%;
    height: 72px;
    margin-top: -36px;
    margin-left: 34px;
    }

    .conserviceInfoDivRight
    {
    position: absolute;
    right: 0px;
    text-align: right;
    top: 50%;
    height: 95px;
    margin-top: -47.5px;
    margin-right: 44px;
    }

    .lblConservicePhone
    {
    font-size: 20px;
    color: #42456b;
    }

    .pnlTrainingPopup
    {
    border: solid 2px black;
    background-color: White;
    }

    .lblTrainingHeader
    {
    position: absolute;
    font-size: 36px;
    font-weight: bold;
    color: #42456B;
    height: 43px;
    top: 50%;
    margin-top: -21.5px;
    margin-left: 10px;
    }

    .trainingPopupHeaderDiv
    {
    height: 50px;
    background-color: #d2e1f1;
    position: relative;
    }

    .trainingPopupDiv
    {
    width: 469px;
    }

    .trainingtxtbox
    {
    background-color: #d3d3d3;
    border: none;
    width: 265px;
    }

    .divTrainingBody
    {
    height: 224px;
    }

    .divTrainingBodyHeader
    {
    height: 45px;
    margin-left: 24px;
    margin-right: 50px;
    margin-top: 16px;
    }

    .lblTrainingBody
    {
    font-size: 18px;
    color: #42456b;
    }

    .divTrainingForm
    {
    text-align: right;
    margin-right: 99px;
    }

    .divTrainingBottom
    {
    position: relative;
    }

    .divTrainingValidationSummary
    {
    position: absolute;
    top: -10px;
    left: 0;
    width: 234px;
    }

    .divTrainingSubmit
    {
    text-align: right;
    margin-right: 40px;
    margin-top: 5px;
    position: absolute;
    right: 0;
    top: 0;
    }

    .btnTrainingSubmit
    {
    text-align: center;
    width: 84px;
    color: #42456b;
    font-size: 16px;
    }

    .pnlFeedback
    {
    border: solid 0px black;
    }

    .divFeedback
    {
    border: solid 2px black;
    background-color: White;
    z-index: 100;
    }

    .divFeedbackHeader
    {
    height: 50px;
    background-color: #d2e1f1;
    position: relative;
    }

    .lblFeedback
    {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #42456B;
    height: 30px;
    top: 50%;
    margin-top: -15px;
    margin-left: 17px;
    }

    #imgHome
    {
    cursor: pointer;
    }

    #tooltips
    {
    display: none;
    }

    #billing-content, #synergy-content, #construct-content
    {
    position: absolute;
    width: 99%;
    height: 99%;
    }

    .float-left
    {
    float: left;
    }

    .clear-left
    {
    clear: left;
    }

    .clear
    {
    clear: both;
    }

    .float-right
    {
    float: right;
    }

    #settings-content
    {
    height: 100%;
    width: 100%;
    }

    .roundCorners
    {
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -khtml-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -khtml-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -khtml-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -khtml-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    }

    6.) And the last is the Page specific CSS..

    #syn-costusage-content
    {
    position : absolute;
    width: 100%;
    height : 100%;
    /* background : green ; */
    }

    #syn-costusage-error
    {
    width: 100%;
    height : 40%;
    margin-top: 10%;
    text-align:center;
    color:#41456b;
    font-weight : bold;
    position : absolute;
    }

    #cu-caption
    {
    height: 20px;
    width: 100%;
    margin-bottom: 5px;
    }

    #cu-caption img
    {
    width: 15px;
    height: 15px;
    }
    .cu-title-main
    {
    color: #b1cd48;
    font-size: larger;
    font-weight: bolder;
    font-family: "myriad-pro-bold" ,sans-serif;
    }

    #cu-dropdowns
    {
    height : 24px;
    padding: 6px 7% 6px 7%;
    background-color: #d1e1f1;
    }

    #cu-dropdowns div
    {
    width : 28%;
    text-align:center;
    }

    #cu-dropdowns select
    {
    min-width : 160px;
    max-width : 165px;
    }

    #cu-dropdowns label
    {
    font-weight : bold;
    }

    .select-center
    {
    margin-left: 8%;
    margin-right : 5%;
    }

    #cu-divider
    {
    margin : 5px 0 5px 0;
    height: 4px;
    width: 100%;
    }

    .maindata
    {
    width : 100%;
    }

    #cu-loader
    {
    display:none;
    text-align:center;
    position:absolute;
    height: 30%;
    top:200px;
    width : 100%;
    }

    #cu-grd-title
    {
    height : 4%;
    min-height :20px;
    max-height:30px;
    background-color:#41456b;
    vertical-align:middle;
    color:White;
    font-weight:bold;
    }

    #cu-grd-title div
    {
    text-align:center;
    padding : 1% auto 1% auto;
    }
    #cu-grd
    {
    /* min-height : 300px;
    max-height :400px;
    background-color:yellow; */
    }
    #cu-chart
    {
    /* height : 46%; */
    /*background-color:Green;*/
    }
    .innergrid
    {
    margin-top: 10px !important;
    margin-bottom : 10px !important;
    /* background: blue !important; */
    overflow: auto;
    }
    .innergridloader
    {
    top: 45%;
    left : 45%;
    position: absolute;
    width: 10%;
    text-align : center;
    }

    I tried removing all the style sheets from my page except the jqx.css files..
    But even that was of no help.. Hope you find something

    Thanks
    Sushanth

    Chart Styling #4706

    Peter Stoev
    Keymaster

    Hi Sushanth,

    I tried to reproduce it by using the same Stylesheet settings as you but still without avail. I am not sure what could be the issue in your web page. You said that it works on a separate web page so I suggest you to display the Chart in iframe in your page and the iframe’s source to be the separate web page with the Chart.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Chart Styling #4722

    sushanth009
    Member

    Peter,

    I will double check my code again to if I am doing anything wrong.
    Thank for your help..

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

You must be logged in to reply to this topic.