jQWidgets Forums
Forum Replies Created
Viewing 5 posts - 1 through 5 (of 5 total)
-
Author
-
I have multiple charts with a single file.
The file contains daily figures in 1 column and at the first of the month a different figure in the second column. I’m trying to reduce the number of files that need to be updated in the process, creating single point of entry.
November 13, 2012 at 6:21 pm in reply to: Multiple Widgets in Tabs IE8 Multiple Widgets in Tabs IE8 #10984Could this issue be caused by the fact I’m pulling data from a file?
November 13, 2012 at 6:19 pm in reply to: Multiple Widgets in Tabs IE8 Multiple Widgets in Tabs IE8 #10983Here is an exmaple. It only seems to fail in IE 8 so far
<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css"/> <link rel="stylesheet" href="/jqwidgets/styles/jqx.classic.css" /> <script type="text/javascript" src="/scripts/gettheme.js"></script> <script type="text/javascript" src="/scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/jqwidgets/jqxscrollview.js"></script> <script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/jqwidgets/jqxtabs.js"></script><script type="text/javascript"> var Counter = 1; var myInterval; var source;var dataAdapter;$(function () { var theme = getTheme(); var initChart = function () { var sampleData = [ { Month: 'Jan', Requests: 443, Precentage: 18}, { Month: 'Feb', Requests: 665, Precentage: 17.22}, { Month: 'Mar', Requests: 234, Precentage: 4.47}, { Month: 'Apr', Requests: 566, Precentage: 3.38}, { Month: 'May', Requests: 465, Precentage: 2.74}]; // prepare jqxChart settings var settings = { title: "Member Requests via Website", description: "", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'Month', showTickMarks: true, valuesOnTicks: false, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, gridLinesInterval: 1, gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme05', seriesGroups: [ { type: 'line', showLabels: true, symbolType: 'circle', valueAxis: { unitInterval: 100, minValue: 0, maxValue: 1000, description: 'Requests per month', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Requests', displayText: 'Member Requests via Website'} ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); } var initResovledPercent = function () { var sampleData = [ { Month: 'Jan', Requests: 443, Precentage: 18}, { Month: 'Feb', Requests: 665, Precentage: 17.22}, { Month: 'Mar', Requests: 234, Precentage: 4.47}, { Month: 'Apr', Requests: 566, Precentage: 3.38}, { Month: 'May', Requests: 465, Precentage: 2.74}]; // prepare jqxChart settings var settings = { title: "% Resoved within 4 Hr Service Level", description: "", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'Month', showTickMarks: true, valuesOnTicks: false, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, gridLinesInterval: 1, gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme05', seriesGroups: [ { type: 'column', showLabels: true, symbolType: 'circle', valueAxis: { unitInterval: 10, minValue: 0, maxValue: 100, description: 'Requests per month', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Precentage', displayText: '% Resoved within Service Level'} ] } ] }; // setup the chart $('#jqxRequestResolved').jqxChart(settings); } //$('#jqxChart1').jqxChart(settings); var initWidgets = function (tab) { switch (tab) { case 0: break; case 1: initChart(); break; case 2: initResovledPercent(); break; } } $('#jqxTabs').jqxTabs({ width: 600, height: 375, position: 'bottom', theme: theme,initTabContent: initWidgets }); myInterval=setInterval(function () { var length = $('#jqxTabs').jqxTabs('length'); $('#jqxTabs').jqxTabs('select', (Counter % length)); Counter++; },4000); $('#jqxTabs').on('tabclick', function (event) { clearInterval(myInterval); }); }); $('#jqxScrollView').bind('pageChanged',function PC (event) { var page = event.args.currentPage; alert(page); } ); </script> <style type="text/css"> .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } </style></head><body class="default"> <div id='jqxWidget'> <div id='jqxTabs'> <ul> <li style="margin-left: 30px;">EPIP</li> <li>Request via Website</li> <li>% Resolved in 4 hours</li> </ul> <div> <div class="ChangeLeft"> <div style="top:20%; height: 285px; width:15px;background-image: url('images/icon-right.png');background-repeat:no-repeat;position:absolute; display:none" ></div> </div> <img src="http://rcunet/MediaHandler.ashx?id=0001D500.png" style="float:right; vertical-align:middle;width: 490px; height: 285px;border: 0px solid;" /> <div style="color: #000000" >Progress as of September Month End <br> <br>October Month End Results will be Updated on or Before November 18th</div> <div class="ChangeRight"> <div style="top:20%; height: 285px; width:15px;background-image: url('images/icon-right.png');background-repeat:no-repeat;position:absolute; display:none" ></div> </div> </div> <div > <div id='jqxChart' style="width:475px; height:285px;float:right;overflow:hidden;"></div> <div style="color: #000000;overflow:hidden;" >Number of Member requests for contact handled by MSC.</div> </div> <div> <div id='jqxRequestResolved' style="width:450px; height:285px;float:right;overflow:hidden;"></div> <div style="color: #000000;overflow:hidden;" >Percentage of Requests for Contact from Members handled by MSC in 4 hours or less.</div> </div> </div> </div></body></html>
Here is what i’m executing as line graphs but when i change the second line graph to a bar graph things fail.
<!DOCTYPE html><html lang="en"><head>
<link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css"/>
<link rel="stylesheet" href="/jqwidgets/styles/jqx.classic.css" />
<script type="text/javascript" src="/scripts/gettheme.js"></script>
<script type="text/javascript" src="/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxscrollview.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxtabs.js"></script>
<script type="text/javascript">
var Counter = 1;
var myInterval;
var source;
var dataAdapter;
$(function () {
var theme = getTheme();
var initChart = function () {
source =
{
datatype: "csv",
datafields: [
{ name: 'Month'},
{ name: 'Requests'},
{ name: 'Precentage'}],
url: /MonthlyRequests.csv'
};
dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : '+ error); } });
// prepare jqxChart settings
var settings = {
title: "Member Requests via Website",
description: "",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
text: 'Category Axis',
textRotationAngle: 0,
dataField: 'Month',
showTickMarks: true,
valuesOnTicks: false,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
gridLinesInterval: 1,
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'line',
showLabels: true,
symbolType: 'circle',
valueAxis:
{
unitInterval: 100,
minValue: 0,
maxValue: 1000,
description: 'Requests per month',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'Requests', displayText: 'Member Requests via Website'}
]
}
]
}; // setup the chart
$('#jqxChart').jqxChart(settings);
}
var initResovledPercent = function () {
source =
{
datatype: "csv",
datafields: [
{ name: 'Month'},
{ name: 'Requests'},
{ name: 'Precentage'}],
url: /MonthlyRequests.csv'
};
dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : '+ error); } });
// prepare jqxChart settings
var settings = {
title: "% Resoved within 4 Hr Service Level",
description: "",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
text: 'Category Axis',
textRotationAngle: 0,
dataField: 'Month',
showTickMarks: true,
valuesOnTicks: false,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
gridLinesInterval: 1,
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'line',
showLabels: true,
symbolType: 'circle',
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 100,
description: 'Requests per month',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'Precentage', displayText: '% Resoved within Service Level'}
]
}
]
}; // setup the chart
$('#jqxRequestResolved').jqxChart(settings);
}
//$('#jqxChart1').jqxChart(settings);
var initWidgets = function (tab) {
switch (tab) {
case 0:
break;
case 1:
initChart();
break;
case 2:
initResovledPercent();
break;
}
}
$('#jqxTabs').jqxTabs({ width: 600, height: 375, position: 'bottom', theme: theme,initTabContent: initWidgets });
myInterval=setInterval(function () {
var length = $('#jqxTabs').jqxTabs('length');
$('#jqxTabs').jqxTabs('select', (Counter % length));
Counter++;
},4000);
$('#jqxTabs').on('tabclick', function (event) {
clearInterval(myInterval);
});
});
$('#jqxScrollView').bind('pageChanged',function PC (event)
{
var page = event.args.currentPage;
alert(page);
} );
</script>
<style type="text/css">
.photo
{
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body class="default">
<div id='jqxWidget'>
<div id='jqxTabs'>
<ul>
<li style="margin-left: 30px;">EPIP</li>
<li>Request via Website</li>
<li>% Resolved in 4 hours</li>
</ul>
<div>
<img src="/MediaHandler.ashx?id=0001D500.png" style="float:right; vertical-align:middle;width: 490px; height: 285px;border: 0px solid;" />
<div style="color: #000000" >Progress as of September Month End <br> <br>October Month End Results will be Updated on or Before November 18th</div>
</div>
<div >
<div id='jqxChart' style="width:475px; height:285px;float:right;overflow:hidden;"></div>
<div style="color: #000000;overflow:hidden;" >Number of Member requests for contact handled by MSC.</div>
</div>
<div>
<div id='jqxRequestResolved' style="width:450px; height:285px;float:right;overflow:hidden;"></div>
<div style="color: #000000;overflow:hidden;" >Percentage of Requests for Contact from Members handled by MSC in 4 hours or less.</div>
</div>
</div>
</div>
</body>
</html>
November 9, 2012 at 10:39 pm in reply to: Multiple Widgets in Tabs IE8 Multiple Widgets in Tabs IE8 #10818Those I did find out this only seems to be an issue when rendering the bar/column graph.
-
AuthorPosts
Viewing 5 posts - 1 through 5 (of 5 total)