Sujet Précédent Sujet Suivant

Problème code html

Fermé
itafhamrouni Messages postés 2 Date d'inscription mardi 29 mars 2016 Statut Membre Dernière intervention 29 mars 2016 - 29 mars 2016 à 15:18
itafhamrouni Messages postés 2 Date d'inscription mardi 29 mars 2016 Statut Membre Dernière intervention 29 mars 2016 - 29 mars 2016 à 15:34
bonsoir,
voilà le code HTML que j'ai developpé en utilisant D3.js et j'ai arrivé à j'installer les librairies.

J'ai réussi à afficher des graphes mais j'ai un petit problème : les graphes s'affichent chacun tout seul sans problème mais si on affiche plus qu'un seul le dernier que s'affiche.

voilà le chemin du fichier index :

dashboard\gridster-D3-master\public\index.html
A voir également:

1 réponse

Réponse 1 / 1
itafhamrouni Messages postés 2 Date d'inscription mardi 29 mars 2016 Statut Membre Dernière intervention 29 mars 2016
29 mars 2016 à 15:34 

<!DOCTYPE HTML>
<!--
	Synchronous by TEMPLATED
    templated.co @templatedco
    Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
	<head>
		<title> Dashboard </title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
		<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="js/skel.min.js"></script>
		<script src="js/skel-panels.min.js"></script>
		<script src="js/init.js"></script>
		

			<link rel="stylesheet" href="css/dc.css" />
<link rel="stylesheet" href="css/stylenew.css" />
<link rel="stylesheet" href="css/jquery.gridster.css" />
		<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
		<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
	</head>
	<body>
	<div id="wrapper">
			
			<!-- Header -->
			<div id="header">
				<div class="container"> 
					
					<!-- Logo -->
					<div id="logo">
						<h1><a href="#">Grid-Analytics Dashboard</a></h1>
					</div>
					
					<!-- Nav -->

				</div>
			</div>
			<!-- /Header -->

			<div class="gridster">
    <ul>


						
      <li data-row="1" data-col="2" data-sizex="4" data-sizey="2" style="padding-top:10px;">
						<div class="chart-wrapper" id="menuselect" style="background-color: #33CC99; height: 60px; width: 70%;">
							<div class="chart-title">  <strong> Economic Analysis of Tunisian Economy </strong> </div>	
                           								
						</div>
						
		</li>
<!-- 						<div class="2u">
				<div> <span>  </span></div>
						</div> -->
						
      <li data-row="1" data-col="5" data-sizex="4" data-sizey="2" style="padding-top:10px;">
						<div class="chart-wrapper" id="total-projects">
							<div class="chart-title">  <strong> 1 </strong> 
</div>					
						</div>
					</li>
     <li data-row="1" data-col="8" data-sizex="5" data-sizey="2" style="padding-top:10px;">						

						<div class="chart-wrapper" id="net-donations">
							<div class="chart-title">  <strong> 2</strong> </div>					
						</div>
						
						
						
					

</li>
   <li data-row="1" data-col="11" data-sizex="5" data-sizey="2" style="padding-top:10px;">
					<div>
					<div class="dc-data-count dc-chart" id="row-selection">
						<span class="filter-count">_</span> selected out of  <span class="total-count">_</span> 
records <br/>
						<span>
							<a href='javascript:dc.filterAll();dc.redrawAll();'><font color="#33CC99">Reset All</font></a>
						</span>
					</div>
						</div>	
					</li>

<!-- 1	-->

					<li data-row="2" data-col="1" data-sizex="9" data-sizey="4" style="padding-top:10px;">
              <div class="chart-wrapper"  id="date-chart">
              <div class="chart-title bold"> <strong> Number of Donations </strong></div>
               <div id="chartContainer" style="height: 300px; width: 100%;">
							<!--  -->	
                <script type="text/javascript">
           window.onload = function () {
	       var chart = new CanvasJS.Chart("chartContainer",
	           {
		title:{
			text: "mode of transport by percent% 2014",
			fontFamily: "arial black"
		},
                animationEnabled: true,
		legend: {
			verticalAlign: "bottom",
			horizontalAlign: "center"
		},
		theme: "theme1",
		data: [
		{        
			type: "pie",
			indexLabelFontFamily: "Garamond",       
			indexLabelFontSize: 20,
			indexLabelFontWeight: "bold",
			startAngle:0,
			indexLabelFontColor: "MistyRose",       
			indexLabelLineColor: "darkgrey", 
			indexLabelPlacement: "inside", 
			toolTipContent: "{name}: {y}ind",
			showInLegend: true,
			indexLabel: "#percent%", 
			dataPoints: [
				{  y: 49.6, name: "on foot", legendMarkerType: "square"},
				{  y: 3.6, name: "Train or metro", legendMarkerType: "square"},
				{  y: 8.9, name: "An urban bus transport", legendMarkerType: "square"},
				{  y: 10.1, name: "Taxi or a collective taxi", legendMarkerType: "square"},
				{  y: 9.5, name: "Private car", legendMarkerType: "square"},
				{  y: 6.1, name: "Companion in a private car", legendMarkerType: "square"},
				{  y: 9.9, name: "other means of transport", legendMarkerType: "square"},
				{  y: 2.3, name: "There is no need to transfer", legendMarkerType: "square"},
				      
			]
		}
		]
			
	});
	chart.render();
}
</script>
</div>
</div>
</li>
						
	<!-- 2	-->						
	  					
	 <!--					
  <li data-row="2" data-col="2" data-sizex="7" data-sizey="4" style="padding-top:10px;">
						
						<div class="chart-wrapper" id="resource-chart">
<div class="chart-title">  <strong> Donation Count for Resources </strong> </div>
 <div id="chartContainer2" style="height: 300px; width: 100%;">
							
<script type="text/javascript">
window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer2",
	{
		title:{
			text: "Middle by percent% 1994",
			fontFamily: "arial black"
		},
                animationEnabled: true,
		legend: {
			verticalAlign: "bottom",
			horizontalAlign: "center"
		},
		theme: "theme1",
		data: [
		{        
			type: "pie",
			indexLabelFontFamily: "Garamond",       
			indexLabelFontSize: 20,
			indexLabelFontWeight: "bold",
			startAngle:0,
			indexLabelFontColor: "MistyRose",       
			indexLabelLineColor: "darkgrey", 
			indexLabelPlacement: "inside", 
			toolTipContent: "{name}: {y}ind",
			showInLegend: true,
			indexLabel: "#percent%", 
			dataPoints: [
				{  y: 64.1, name: "communal", legendMarkerType: "square"},
				{  y: 35.9, name: "Non communal", legendMarkerType: "square"},
				
			]
		}
		]
			
	});
	chart.render();
}
</script></div></div>
 </li> -->	







<!-- 3	-->	



<!--
				<li data-row="2" data-col="5" data-sizex="7" data-sizey="4" style="padding-top:10px;">
					
						<div class="chart-wrapper" id="funding-chart">
							<div class="chart-title">  <strong> Funding Status </strong> </div>	
							 <div id="chartContainer3" style="height: 300px; width: 100%;">
                           
<script type="text/javascript">
						    
  window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer3", {
            title: {
                text: "Workers aged between 18 and 59 years affiliated to social funds according to different sectors in 2014 (%)",
                fontFamily: "Verdana",
                fontColor: "Peru",
                fontSize: 14
            },
            animationEnabled: true,
            axisY: {
                tickThickness: 0,
                lineThickness: 0,
                valueFormatString: " ",
                gridThickness: 0                    
            },
            axisX: {
                tickThickness: 0,
                lineThickness: 0,
                labelFontSize: 18,
                labelFontColor: "Peru"
            },
            data: [
            { 
                indexLabelFontSize: 13,
                toolTipContent: "<span style='\"'color: {color};'\"'><strong>{indexLabel}</strong></span><span style='\"'font-size: 20px; color:peru '\"'><strong>{y}</strong></span>",
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                indexLabelFontWeight: 600,
                indexLabelFontFamily: "Verdana",
                color: "#62C9C3",
                type: "bar",
                dataPoints: [
                    { y: 35.9, label: "35.9%", indexLabel: "Building" },
                    { y: 36.7, label: "36.7%", indexLabel: "Agriculture and Fisheries" },
                    { y: 61.1, label: "61.1%", indexLabel: "Commerce and Services" },
                    { y: 73.7, label: "73.7%", indexLabel: "Manufacturing industry" },
                    { y: 77.2, label: "77.2%", indexLabel: "Transport and Storage" },
                    { y: 85.9, label: "85.9%", indexLabel: "Health and Administrative Services" },
                    { y: 91.6, label: "91.6%", indexLabel: "Extractive Industry" }
                    
                ]
            }
            ]
        });
		chart.render();
    }
  </script>
</div></div> 

</li>-->





					
					
					
					
					
					<!--4--> 
					
<li data-row="3" data-col="1" data-sizex="8" data-sizey="4" style="padding-top:10px;">
						<div class="chart-wrapper"  id="grade-chart">
							<div class="chart-title">  <strong> Donation Count by Grade </strong> </div>
						</div>
</li>


<!--5-->

						<li data-row="3" data-col="2" data-sizex="8" data-sizey="4" style="padding-top:10px;">
						<div class="chart-wrapper" id="poverty-chart">
							<div class="chart-title">  <strong> Donation Count by Poverty Level</strong></div>							

						</div>
</li>

<!--6-->

						<li data-row="3" data-col="4" data-sizex="7" data-sizey="4" style="padding-top:10px;">
												<div class="chart-wrapper"  id="state-donations">
							<div class="chart-title">  <strong> Donation Amount by State ($) </strong> </div>
						</div>

					</li>

					

					
					
					
</ul>
</div>
</div>	

		
<script type="text/javascript" src="canvasjs.min.js"></script>
<script src='js/crossfilter.js' type='text/javascript'></script>
<script src='js/d3.js' type='text/javascript'></script>
<script src='js/dc.js' type='text/javascript'></script>
<script src='js/queue.js' type='text/javascript'></script>
<script src='js/Dashboard.js' type='text/javascript'></script>

    <script src="js/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
      var gridster;

      $(function(){

        var log = document.getElementById('log');


        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [55, 55],
          widget_margins: [5, 5],
          resize: {
            enabled: false,
            
          }
        }).data('gridster');


      });
    </script>
	</body>
</html>
0

Discussions similaires

code d'activation GTA 5 steam
ylyes59 -
David -

6 réponses
Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses
Codes bateaux et avion GTA vice city Stories
matt3610 -
Diglo -

30 réponses
enigme
sillvain -
Kai61 -

1 réponse