Problème code html
itafhamrouni
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
itafhamrouni Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
itafhamrouni Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
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
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
1 réponse
-
<!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>
