jQWidgets Forums

Forum Replies Created

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

Author

Posts

December 7, 2012 at 4:22 pm in reply to: Chart Data Chart Data #12062

dgindy

Member

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 #10984

dgindy

Member

Could 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 #10983

dgindy

Member

Here 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>

November 13, 2012 at 4:32 pm in reply to: Test Topic Test Topic #10976

dgindy

Member

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 #10818

dgindy

Member

Those I did find out this only seems to be an issue when rendering the bar/column graph.

Author

Posts

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