jQWidgets Forums

Forum Replies Created

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

Author

Posts

November 27, 2013 at 2:54 pm in reply to: grid and jquery mobil problem grid and jquery mobil problem #44852

donvex

Participant

ok that it!


<!DOCTYPE html>
<html lang="en">
<head>
    
	
	<!-- include jquery-mobile !-->
		<link rel="stylesheet" href="../../css/jquery.mobile.theme-1.3.0.min.css" />
		<link rel="stylesheet" href="../../css/jquery.mobile.structure-1.3.0.min.css" />
		<link rel="stylesheet" href="../../css/customtheme.min.css" />
		<link rel="stylesheet" href="../../css/css.css" />
		<script src="../../js/jquery-1.10.2.min.js"></script>
		<script src="../../js/scriptjquery.js"></script>
		<script src="../../js/jquery.mobile-1.3.0.min.js"></script>
	<!-- fin -->
	
				<link rel="stylesheet" href="../../styles/jqx.base.css" type="text/css" />
				<link rel="stylesheet" href="../../styles/jqx.ui-redmond.css" type="text/css" />
                
                <!-- bibliotech jqwidget -->
				 
    <link rel="stylesheet" href="../../styles/jqx.windowsphone.css" type="text/css" />
    <link rel="stylesheet" href="../../styles/jqx.blackberry.css" type="text/css" />
    <link rel="stylesheet" href="../../styles/jqx.mobile.css" type="text/css" />
    <link rel="stylesheet" href="../../styles/jqx.android.css" type="text/css" />			
				<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
				 <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
				<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>  	
				<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.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="../../scripts/gettheme.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
				<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
				
				
	<!-- script gerant l'affichage de la gauge ------------------------------------------------------------->
	
    <script type="text/javascript">
	
        var valeurob = 100;
			var gauge=87;
		
           $(document).ready(function () {
		   
		   
             //Gauge
              $('#gauge').jqxGauge({
                ranges: [{ startValue: 0, endValue:  valeurob , style: { fill: '#f90019', stroke: '#f90019' }, startDistance: 0, endDistance: 0 },
                         { startValue:  valeurob , endValue: valeurob * 1.3  , style: { fill: '#32f900', stroke: '#32f900' }, startDistance: 0, endDistance: 0}],
                cap: { size: '5%', style: { fill: '#d02841', stroke: '#d02841'} },
                caption: { offset: [0, -25], value: gauge , position: 'bottom' },
                border: { style: { fill: '#8e9495', stroke: '#7b8384', 'stroke-width': 1 } },
                ticksMinor: { interval: 500, size: '5%' },
                ticksMajor: { interval: 2000, size: '10%' },       
                labels: { position: 'outside', interval: Math.round(valeurob * 1.3/10)  },
                pointer: { style: { fill: '#d02841' }, width: 5 },
                animationDuration: 1500
            });
            
             $('#gauge').jqxGauge({max: valeurob * 1.3  ,width: '42%'});
            $('#gauge').jqxGauge('value', gauge);
        });
    </script>
	<!-- end script gerant l'affichage de la gauge -------------------------------------------------------------> 	
	<!--script qui affiche le diagramme en batton-->
	<script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
			
            var sampleData = [
{ Day: '10/10/2013', Running: 30, Swimming: 1.44 },
{ Day: '10/11/2013', Running: 40, Swimming: 1.93 },
{ Day: '10/12/2013', Running: 50, Swimming: 2.41},
{ Day: '10/13/2013', Running: 0, Swimming:  0.00},
{ Day: '10/14/2013', Running: 20, Swimming: 0.96},
{ Day: '10/15/2013', Running: 10, Swimming: 0.48 },
{ Day: '10/16/2013', Running: 40, Swimming: 0.96},
{ Day: '10/17/2013', Running: 35, Swimming: 1.44 },
{ Day: '10/18/2013', Running: 40, Swimming: 1.93},
{ Day: '10/19/2013', Running: 50, Swimming: 2.41 },
{ Day: '10/20/2013', Running: 0, Swimming:  0.00},
{ Day: '10/21/2013', Running: 20, Swimming: 0.96 },
{ Day: '10/22/2013', Running: 10, Swimming: 0.48},
{ Day: '10/23/2013', Running: 20, Swimming: 0.96},
{ Day: '10/24/2013', Running: 30, Swimming: 1.44},
{ Day: '10/25/2013', Running: 40, Swimming: 1.93 },
{ Day: '10/26/2013', Running: 50, Swimming: 2.41 },
{ Day: '10/27/2013', Running: 0, Swimming:  0.00},
{ Day: '10/28/2013', Running: 20, Swimming: 0.96 },
{ Day: '10/29/2013', Running: 10, Swimming: 0.48 },
{ Day: '10/30/2013', Running: 20, Swimming: 0.96 },
{ Day: '10/31/2013', Running: 30, Swimming: 1.44}
                ];
            // prepare jqxChart settings
            var settings = {
                title:'  ',
                description: '  ',
                enableAnimations: true,
                showLegend: false,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        dataField: 'Day',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: false,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto',
						textRotationAngle: 270
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 100,
                                displayValueAxis: true,
                                description: '',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Running', displayText: 'Running' },
                                    { dataField: 'Swimming', displayText: 'Swimming' }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
	<!-- fin affichage diagramme en batton-->
	
				<!----------------------script gerant l'affichage du tableau -->
				<script type="text/javascript">
					$(document).ready(function () {
						var theme = "ui-redmond";
						var url = "../../data/datasuivitcommerciaux.txt";
						// prepare the data
						var source =
						{
							datatype: "json",
							datafields: [
								{ name: 'jour', type: 'string' },
								{ name: 'date', type: 'string' },
								{ name: 'O_recalcul', type: 'float' },
								{ name: 'O_initial', type: 'integer' },
								{ name: 'realise', type: 'integer' },
								{ name: 'O_cumule', type: 'integer' },
								{ name: 'r_cumule', type: 'integer'}
							],
							url: url
						};
						
						var dataAdapter = new $.jqx.dataAdapter(source);
						$("#jqxgrid").jqxGrid(
						{
							width: '100%',
							height: 900,
							source: dataAdapter,
							theme: theme,
							columnsheight: 40,
							columnsmenuwidth: 40,
							rowsheight: 34,
							columns: [
							  { text: 'Jour semaine', datafield: 'jour', width: '20%'},
							  { text: 'Date', datafield: 'date', width: '40%'},
							  { text: 'Objectif recalculé à 100%', datafield: 'O_recalcul', width: '10%', cellsformat: 'F1', cellsalign: 'right'     },
							  { text: 'Objectif initial', datafield: 'O_initial', width: '15%', cellsformat: 'F1', cellsalign: 'right' },
							  { text: 'Realisé', datafield: 'realise', width: '10%', cellsformat: 'F1', cellsalign: 'right' },
							  { text: 'Objectif Cumulé', datafield: 'O_cumule', width: '12%', cellsformat: 'F1', cellsalign: 'right'},
							  { text: 'Réalisé Cumulé', datafield: 'r_cumule', width: '15%', cellsformat: 'F1', cellsalign: 'right'}
						  ]
						});
						
						
					});
				</script>
				<!-- end script getion tableau -->
<!-- end  -->
<style type="text/css">

.legende-sup {
    display: inline-block;
    height: 12px;
    width: 12px;
    background-color: #993F3C;
}
.legende-obj {
    display: inline-block;
    height: 12px;
    width: 12px;
    background-color: #3E6796;
}
pre{
	font-size: 14pt;
}
h2{
	text-align:center;
}
h3{
	width:50%;
	margin-left: auto;
}
.gauge { 
	width:100%;
	height:100%;
	margin: 0px auto 0px auto;
	text-align: center;
	overflow: hidden;
	border: 1px black solid;
	
}
.gauge #gauge{ 
	width:100%;
	height:100%;
	margin: 0px auto 0px auto;
	text-align: center;
}
.tableau{
	width:100%;
	height:413px;
	border: 1px black solid;
}
tableau {
	width: 100%;
}
.val1, .val2, .val3, .val4, .val5, .val6, .val7{
	display: inline;
}

<!-- introduction des media query pour ramener chaque element à la suite de l'autre-->
@media only screen and (max-width:600px) {
    .gauge{ 
		width:100%;
		height:100%;
		margin: 0px auto 0px auto;
		text-align: center;
		
	}
	.tableau{
		width:100%;
		height:40%;
	}
}
<!---->
</style>
</head>
<body class='default' >
<!-- page d'insertion de la gauge -->
<div data-role="page" id="page1" data-theme="d">
	<div data-role="header" data-theme="b">
	<a data-ajax="false" href="../../application.php"  data-icon="home" >Menu</a>
		<div class="block">
		<h3>RAPPORT SUIVIT COMMERCIAL</h3>
		</div>
	</div>	
	<div data-role="controlgroup" data-type="horizontal">
			<a href="#page2" data-role="button">voir Statut</a>
			<a href="#page3" data-role="button">Ecart Objectif</a>
			<a href="#page4" data-role="button">Activité par jour</a>
	</div>	
		<!----------------------------------------------suivit des commerciaux du modul reporing------------------------------------------------------------>
	<div data-role="content>
		<!----------------------- second block contenant "ecart Objectif"---------------------------------------->
	<pre>
	<b>Commercial</b>: Donvex
	<b>Plan de commissionnement</b>: P_COM_1
	<b>Periodicite</b>: Annuelle
	</pre>
		<!-----------------------fin second block ------------------------------------------------------------------------>	
	</div>	
    <!---------------------------------end entête rappot commercial---------------------------------------------------------------------------->
	<div data-role="content" >
		<!-----------------------premier block contenant "Niveau d'attiente objectif" & "statut"--------------------------->
		<!--------zone d'insertion de la gauge--------------------------->
				<div class="gauge">
					<div class="entete" ><pre><b>Niveau d'attiente objectif</b></pre></div>
					<div id='gauge'></div>
				</div>
		<!--------fin insertion de la gauge--------------------------->		   
				<div class="tableau">
						<div class="entete" ><pre><b></b></pre></div>

							<table border="1"   bordercolor="#385D8A" cellpading="0" cellspacing="0" align="center" bgcolor=#b3e0ff >
								<caption><h2>statut <br> Mercredi 9 Octobre 2013</h2></caption>
								<tr>
									<td><b>REALISE</b> </td><td width="30%">&nbsp <div class="val1">740</div>£</td>
								</tr>	
								<tr>
									<td><b>OBJECTF A DATE</b></td><td>&nbsp <div class="val2">200</div>£</td>
								</tr>	
								<tr>
									<td><b>% D'ATTEINTE A DATE</b></td><td><div class="val3">87</div>%</td>
								</tr>	
								<tr >
									<td colspan="2" align="center"><div class="val4">Octobre 2013</div></td>
								</tr>
								<tr>
									<td><b>OBJECTIF PERIODE</b></td><td><div class="val5">740</div>£</td>
								</tr>
								<tr>
									<td><b>% D'ATTEINTE SUR OCTOBRE 2013</b></td><td><div class="val6">24</div>%</td>
								</tr>
								<tr>
									<td><b>MONTANT DE LA COMMISSION</b></td><td><div class="val7">30</div> &nbsp £</td>
								</tr>
							</table>	
				</div>			
		<div data-role="controlgroup" data-type="horizontal">
			<a href="#page2" data-role="button">voir Statut</a>
			<a href="#page3" data-role="button">Ecart Objectif</a>
			<a href="#page4" data-role="button">Activité par jour</a>
		</div>		
	</div>
	<div data-role="footer">

		 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
				<a href="#commission" data-role="button"   data-theme="b">Mes commissions</a>
				<a href="#rapports" data-role="button"   data-theme="b">Rapports</a>
		</div>
		
    </div>
</div>	
<!-- fin -->

 
<!-- page insertion du diagramme à batton (chart) -->
<div data-role="page3" id="page3" >		
	<div data-role="header" data-theme="d">	
		<a href="#page1" data-role="bouton">Simulation commissions</a>
		<a href="#page4" data-role="bouton">Activité par jour</a>
	</div>
<!---------------------------------partie 2 podium-------------------------------------------------------------------------------->
	<div data-role="content" >
			<!----------------------- second block contenant "ecart Objectif"---------------------------------------->
			
				<div class="entete" >Ecart d'ojectif</div>
				<div class="contenu " style="margin-top: 19px;">
					 <div id='jqxChart' style="width:100%; height:350px;"></div>
					<div class="legende">
						<div class="legende-sup"></div> &nbsp Supplément recalculé<br>
						<div class="legende-obj"></div> &nbsp Objetif initial
					</div>
				</div>
			
			<!-----------------------fin second block ------------------------------------------------------------------------>	
	</div>
</div>
<!-- fin -->

<!-- page insertion de la grid -->
<div data-role="page" id="page4" >	
	<div data-role="header" data-theme="b">	
		<a href="#page1" data-role="bouton" data-theme="d">Simulation commissions</a>
		<a href="#page3" data-role="bouton" data-theme="d">Ecart d'ojectif</a>
	</div>
	
	<div data-role="content" >
		<!----------------------- troisieme block contenant "Activité par jour"---------------------------------------->
		<div class="entete" >Activité par jour</div>
		<!----ajout de la grille jqwidget--->
		<div class="contenu" style="margin-left: 1%; margin-top: 19px;">
			<div id="jqxgrid">
			</div>
		</div>	
		
	</div>
	<!---------------------------------end entête rappot commercial---------------------------------------------------------------------------->
				<!---------------------------------partie 4 rapprot-------------------------------------------------------------------------------->
                        <div data-role="footer"  data-theme="b">
							<!----------------------- quatrieme block contenant "Zone de commentaire sur le rapport"---------------------------------------->
							<div class="entete" >Zone de commentaire sur le rapport</div>
							<p>Les commentaires et discussions relatifs à ce rapport.<br>
								Avec le nom de la personne qui commente, la date et le contenu du commentaire.</p>
							<!------------fin--------------------------------------------------------------------------------------->
							<!----------------------- quatrieme block contenant "Zone de commentaire sur le rapport"---------------------------------------->
							<div class="entete" >Date de dernier rafraichissement : 09/10/2013 à 18:30</div>
							<!------------fin--------------------------------------------------------------------------------------->
                        </div>
                <!---------------------------------end entête rappot commercial---------------------------------------------------------------------------->
</div>
<!-- fin -->
</body>
</html>

November 27, 2013 at 2:38 pm in reply to: grid and jquery mobil problem grid and jquery mobil problem #44836

donvex

Participant

yes I’m sure is the jqwidgets(3.0.4)

thas the code and I use jquery mobile


<div data-role="content" >
		<!----------------------- troisieme block contenant "Activité par jour"---------------------------------------->
		<div class="entete" >Activité par jour</div>
		<!----ajout de la grille jqwidget--->
		<div class="contenu" style="margin-left: 1%; margin-top: 19px;">
			<div id="jqxgrid">
			</div>
		</div>	
		
	</div>
	<!---------------------------------end entête rappot commercial---------------------------------------------------------------------------->
				<!---------------------------------partie 4 rapprot-------------------------------------------------------------------------------->
                        <div data-role="footer"  data-theme="b">
							<!----------------------- quatrieme block contenant "Zone de commentaire sur le rapport"---------------------------------------->
							<div class="entete" >Zone de commentaire sur le rapport</div>
							<p>Les commentaires et discussions relatifs à ce rapport.<br>
								Avec le nom de la personne qui commente, la date et le contenu du commentaire.</p>
							<!------------fin--------------------------------------------------------------------------------------->
							<!----------------------- quatrieme block contenant "Zone de commentaire sur le rapport"---------------------------------------->
							<div class="entete" >Date de dernier rafraichissement : 09/10/2013 à 18:30</div>
							<!------------fin--------------------------------------------------------------------------------------->
                        </div>
                <!---------------------------------end entête rappot commercial---------------------------------------------------------------------------->
</div>

November 27, 2013 at 2:06 pm in reply to: grid and jquery mobil problem grid and jquery mobil problem #44812

donvex

Participant

hello!
I load my application in my smart phone but I have some error

first: when i load my page I’m oblige to refresh the browser after seing grid
second: after grid appear it’s not possible to scroll it using tactil

my browser is OPERA mini

thank

Author

Posts

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