jQWidgets Forums
jQuery UI Widgets › Forums › Chart › Chart Styling
Tagged: Chart Styling
This topic contains 9 replies, has 2 voices, and was last updated by sushanth009 13 years ago.
-
AuthorChart Styling Posts
-
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);
This is the chart Image that was rendered
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 StoevjQWidgets Team
http://www.jqwidgets.comSorry 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..
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 StoevjQWidgets Team
http://www.jqwidgets.comHello 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,.
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 StoevjQWidgets Team
http://www.jqwidgets.comI 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 Styles5.) 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 somethingThanks
SushanthHi 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 StoevjQWidgets Team
http://www.jqwidgets.comPeter,
I will double check my code again to if I am doing anything wrong.
Thank for your help.. -
AuthorPosts
You must be logged in to reply to this topic.