| Server IP : 209.209.40.120 / Your IP : 216.73.217.112 Web Server : Microsoft-IIS/10.0 System : Windows NT NEWWWW 10.0 build 17763 (Windows Server 2019) i586 User : NEWWWW$ ( 0) PHP Version : 8.3.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/HostingSpaces/admin/sms4real.com/wwwroot/topold1/dashboard/ |
Upload File : |
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<title>Dashboard Charts, Free Admin Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/templatemo_main.css">
<!--
Dashboard Template
http://www.templatemo.com/preview/templatemo_415_dashboard
-->
</head>
<body>
<div id="main-wrapper">
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<div class="logo"><h1>Dashboard - Admin Template</h1></div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="template-page-wrapper">
<div class="navbar-collapse collapse templatemo-sidebar">
<ul class="templatemo-sidebar-menu">
<li>
<form class="navbar-form">
<input type="text" class="form-control" id="templatemo_search_box" placeholder="Search...">
<span class="btn btn-default">Go</span>
</form>
</li>
<li><a href="index.html"><i class="fa fa-home"></i>Dashboard</a></li>
<li class="sub">
<a href="javascript:;">
<i class="fa fa-database"></i> Nested Menu <div class="pull-right"><span class="caret"></span></div>
</a>
<ul class="templatemo-submenu">
<li><a href="#">Aenean</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Congue</a></li>
<li><a href="#">Interdum</a></li>
<li><a href="#">Facilisi</a></li>
</ul>
</li>
<li class="active"><a href="#"><i class="fa fa-cubes"></i><span class="badge pull-right">9</span>Data Visualization</a></li>
<li><a href="maps.html"><i class="fa fa-map-marker"></i><span class="badge pull-right">42</span>Maps</a></li>
<li><a href="tables.html"><i class="fa fa-users"></i><span class="badge pull-right">NEW</span>Manage Users</a></li>
<li><a href="preferences.html"><i class="fa fa-cog"></i>Preferences</a></li>
<li><a href="javascript:;" data-toggle="modal" data-target="#confirmModal"><i class="fa fa-sign-out"></i>Sign Out</a></li>
</ul>
</div><!--/.navbar-collapse -->
<div class="templatemo-content-wrapper">
<div class="templatemo-content">
<ol class="breadcrumb">
<li><a href="index.html">Admin Panel</a></li>
<li><a href="#">Data Visualization</a></li>
<li class="active">Charts</li>
</ol>
<h1>Data Visualization</h1>
<p>Credit goes to <a href="http://www.chartjs.org">chartjs.org</a></p>
<div class="templatemo-charts">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">Pie Chart & Doughnut Chart</div>
</div>
<div class="row templatemo-chart-row">
<div class="templatemo-chart-box col-lg-3 col-md-3 col-sm-4 col-xs-12">
<canvas id="templatemo-pie-chart"></canvas>
<h4>Pie Chart</h4>
<span class="text-muted">Maecenas non</span>
</div>
<div class="templatemo-chart-box col-lg-3 col-md-3 col-sm-4 col-xs-12">
<canvas id="templatemo-doughnut-chart"></canvas>
<h4>Doughnut Chart</h4>
<span class="text-muted">Sodales orci aliquet</span>
</div>
<div class="templatemo-chart-box col-lg-3 col-md-3 col-sm-4 col-xs-12">
<canvas id="templatemo-radar-chart"></canvas>
<h4>Radar Chart</h4>
<span class="text-muted">Lorem sed</span>
</div>
<div class="templatemo-chart-box col-lg-3 col-md-3 col-sm-4 col-xs-12">
<canvas id="templatemo-polar-chart"></canvas>
<h4>Polar Area Chart</h4>
<span class="text-muted">Curabitur</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="panel panel-success">
<div class="panel-heading">Line Chart</div>
<canvas id="templatemo-line-chart"></canvas>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">Bar Chart</div>
<canvas id="templatemo-bar-chart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Are you sure you want to sign out?</h4>
</div>
<div class="modal-footer">
<a href="sign-in.html" class="btn btn-primary">Yes</a>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<footer class="templatemo-footer">
<div class="templatemo-copyright">
<p>Copyright © 2084 Your Company Name <!-- Credit: www.templatemo.com --></p>
</div>
</footer>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/templatemo_script.js"></script>
<script type="text/javascript">
// Line chart
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
} // lineChartData
var pieChartData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
] // pie chart data
// radar chart
var radarChartData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}; // radar chart
// polar area chart
var polarAreaChartData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
window.onload = function(){
var ctx_line = document.getElementById("templatemo-line-chart").getContext("2d");
var ctx_bar = document.getElementById("templatemo-bar-chart").getContext("2d");
var ctx_pie = document.getElementById("templatemo-pie-chart").getContext("2d");
var ctx_doughnut = document.getElementById("templatemo-doughnut-chart").getContext("2d");
var ctxRadar = document.getElementById("templatemo-radar-chart").getContext("2d");
var ctxPolar = document.getElementById("templatemo-polar-chart").getContext("2d");
window.myLine = new Chart(ctx_line).Line(lineChartData, {
responsive: true
});
window.myBar = new Chart(ctx_bar).Bar(lineChartData, {
responsive: true
});
window.myPieChart = new Chart(ctx_pie).Pie(pieChartData,{
responsive: true
});
window.myDoughnutChart = new Chart(ctx_doughnut).Doughnut(pieChartData,{
responsive: true
});
var myRadarChart = new Chart(ctxRadar).Radar(radarChartData, {
responsive: true
});
var myPolarAreaChart = new Chart(ctxPolar).PolarArea(polarAreaChartData, {
responsive: true
});
}
</script>
</body>
</html>