mirror of https://github.com/ColorlibHQ/AdminLTE
Added chartjs page
Abdullah Almsaeed
parent
51822ddcb0
commit
ac94f181a9
|
|
@ -25,12 +25,12 @@ $(function () {
|
|||
datasets: [
|
||||
{
|
||||
label: "Electronics",
|
||||
fillColor: "rgba(210, 214, 222, 1)",
|
||||
strokeColor: "rgba(210, 214, 222, 1)",
|
||||
pointColor: "rgba(210, 214, 222, 1)",
|
||||
fillColor: "rgb(210, 214, 222)",
|
||||
strokeColor: "rgb(210, 214, 222)",
|
||||
pointColor: "rgb(210, 214, 222)",
|
||||
pointStrokeColor: "#c1c7d1",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
pointHighlightStroke: "rgb(220,220,220)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
|
|
@ -78,7 +78,7 @@ $(function () {
|
|||
//Boolean - Whether to fill the dataset with a color
|
||||
datasetFill: true,
|
||||
//String - A legend template
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%=datasets[i].label%></li><%}%></ul>",
|
||||
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
|
||||
maintainAspectRatio: false,
|
||||
//Boolean - whether to make the chart responsive to window resizing
|
||||
|
|
@ -158,7 +158,9 @@ $(function () {
|
|||
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
|
||||
maintainAspectRatio: false,
|
||||
//String - A legend template
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
|
||||
//String - A tooltip template
|
||||
tooltipTemplate: "<%=value %> <%=label%> users"
|
||||
};
|
||||
//Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
|
|
|
|||
|
|
@ -2,17 +2,15 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AdminLTE 2 | Morris.js Charts</title>
|
||||
<title>AdminLTE 2 | ChartJS</title>
|
||||
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
||||
<!-- Ionicons -->
|
||||
<link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
|
||||
<!-- Morris charts -->
|
||||
<link href="../../plugins/morris/morris.css" rel="stylesheet" type="text/css" />
|
||||
<!-- Theme style -->
|
||||
<link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
|
||||
<!-- AdminLTE Skins. Choose a skin from the css/skins
|
||||
<!-- AdminLTE Skins. Choose a skin from the css/skins
|
||||
folder instead of downloading all of them to reduce the load. -->
|
||||
<link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
|
|
@ -62,54 +60,6 @@
|
|||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li><!-- end message -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="pull-left">
|
||||
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="user image"/>
|
||||
</div>
|
||||
<h4>
|
||||
AdminLTE Design Team
|
||||
<small><i class="fa fa-clock-o"></i> 2 hours</small>
|
||||
</h4>
|
||||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="pull-left">
|
||||
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="user image"/>
|
||||
</div>
|
||||
<h4>
|
||||
Developers
|
||||
<small><i class="fa fa-clock-o"></i> Today</small>
|
||||
</h4>
|
||||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="pull-left">
|
||||
<img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="user image"/>
|
||||
</div>
|
||||
<h4>
|
||||
Sales Department
|
||||
<small><i class="fa fa-clock-o"></i> Yesterday</small>
|
||||
</h4>
|
||||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="pull-left">
|
||||
<img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="user image"/>
|
||||
</div>
|
||||
<h4>
|
||||
Reviewers
|
||||
<small><i class="fa fa-clock-o"></i> 2 days</small>
|
||||
</h4>
|
||||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="footer"><a href="#">See All Messages</a></li>
|
||||
|
|
@ -131,27 +81,6 @@
|
|||
<i class="fa fa-users text-aqua"></i> 5 new members joined today
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-users text-red"></i> 5 new members joined
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-shopping-cart text-green"></i> 25 sales made
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-user text-red"></i> You changed your username
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="footer"><a href="#">View all</a></li>
|
||||
|
|
@ -181,45 +110,6 @@
|
|||
</div>
|
||||
</a>
|
||||
</li><!-- end task item -->
|
||||
<li><!-- Task item -->
|
||||
<a href="#">
|
||||
<h3>
|
||||
Create a nice theme
|
||||
<small class="pull-right">40%</small>
|
||||
</h3>
|
||||
<div class="progress xs">
|
||||
<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
||||
<span class="sr-only">40% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li><!-- end task item -->
|
||||
<li><!-- Task item -->
|
||||
<a href="#">
|
||||
<h3>
|
||||
Some task I need to do
|
||||
<small class="pull-right">60%</small>
|
||||
</h3>
|
||||
<div class="progress xs">
|
||||
<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
||||
<span class="sr-only">60% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li><!-- end task item -->
|
||||
<li><!-- Task item -->
|
||||
<a href="#">
|
||||
<h3>
|
||||
Make beautiful transitions
|
||||
<small class="pull-right">80%</small>
|
||||
</h3>
|
||||
<div class="progress xs">
|
||||
<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
||||
<span class="sr-only">80% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li><!-- end task item -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="footer">
|
||||
|
|
@ -437,7 +327,7 @@
|
|||
<!-- Content Header (Page header) -->
|
||||
<section class="content-header">
|
||||
<h1>
|
||||
Morris Charts
|
||||
ChartJS
|
||||
<small>Preview sample</small>
|
||||
</h1>
|
||||
<ol class="breadcrumb">
|
||||
|
|
@ -449,10 +339,6 @@
|
|||
|
||||
<!-- Main content -->
|
||||
<section class="content">
|
||||
<div class="callout callout-warning">
|
||||
<h4>Warning!</h4>
|
||||
<p><b>Morris.js</b> charts are no longer maintained by its author. We would recommend using any of the other charts that come with the template.</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- AREA CHART -->
|
||||
|
|
@ -460,8 +346,8 @@
|
|||
<div class="box-header">
|
||||
<h3 class="box-title">Area Chart</h3>
|
||||
</div>
|
||||
<div class="box-body chart-responsive">
|
||||
<div class="chart" id="revenue-chart" style="height: 300px;"></div>
|
||||
<div class="box-body">
|
||||
<canvas id="areaChart" height="250"></canvas>
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
|
||||
|
|
@ -470,8 +356,10 @@
|
|||
<div class="box-header">
|
||||
<h3 class="box-title">Donut Chart</h3>
|
||||
</div>
|
||||
<div class="box-body chart-responsive">
|
||||
<div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>
|
||||
<div class="box-body">
|
||||
<div class="chart-responsive">
|
||||
<canvas id="pieChart" height="250"></canvas>
|
||||
</div>
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
|
||||
|
|
@ -482,8 +370,8 @@
|
|||
<div class="box-header">
|
||||
<h3 class="box-title">Line Chart</h3>
|
||||
</div>
|
||||
<div class="box-body chart-responsive">
|
||||
<div class="chart" id="line-chart" style="height: 300px;"></div>
|
||||
<div class="box-body">
|
||||
<canvas id="lineChart" height="250"></canvas>
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
|
||||
|
|
@ -492,8 +380,8 @@
|
|||
<div class="box-header">
|
||||
<h3 class="box-title">Bar Chart</h3>
|
||||
</div>
|
||||
<div class="box-body chart-responsive">
|
||||
<div class="chart" id="bar-chart" style="height: 300px;"></div>
|
||||
<div class="box-body">
|
||||
<canvas id="barChart" height="230"></canvas>
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
|
||||
|
|
@ -516,7 +404,7 @@
|
|||
<!-- Morris.js charts -->
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
|
||||
<!-- ChartJS 1.0.1 -->
|
||||
<script src="plugins/chartjs/Chart.min.js" type="text/javascript"></script>
|
||||
<script src="../../plugins/chartjs/Chart.min.js" type="text/javascript"></script>
|
||||
<!-- FastClick -->
|
||||
<script src='../../plugins/fastclick/fastclick.min.js'></script>
|
||||
<!-- AdminLTE App -->
|
||||
|
|
@ -525,7 +413,210 @@
|
|||
<script src="../../dist/js/demo.js" type="text/javascript"></script>
|
||||
<!-- page script -->
|
||||
<script>
|
||||
|
||||
$(function () {
|
||||
/* ChartJS
|
||||
* -------
|
||||
* Here we will create a few charts using ChartJS
|
||||
*/
|
||||
|
||||
//--------------
|
||||
//- AREA CHART -
|
||||
//--------------
|
||||
|
||||
// Get context with jQuery - using jQuery's .get() method.
|
||||
var areaChartCanvas = $("#areaChart").get(0).getContext("2d");
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
var areaChart = new Chart(areaChartCanvas);
|
||||
|
||||
var areaChartData = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Electronics",
|
||||
fillColor: "rgba(210, 214, 222, 1)",
|
||||
strokeColor: "rgba(210, 214, 222, 1)",
|
||||
pointColor: "rgba(210, 214, 222, 1)",
|
||||
pointStrokeColor: "#c1c7d1",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "Digital Goods",
|
||||
fillColor: "rgba(60,141,188,0.9)",
|
||||
strokeColor: "rgba(60,141,188,0.8)",
|
||||
pointColor: "#3b8bba",
|
||||
pointStrokeColor: "rgba(60,141,188,1)",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(60,141,188,1)",
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var areaChartOptions = {
|
||||
//Boolean - If we should show the scale at all
|
||||
showScale: true,
|
||||
//Boolean - Whether grid lines are shown across the chart
|
||||
scaleShowGridLines: false,
|
||||
//String - Colour of the grid lines
|
||||
scaleGridLineColor: "rgba(0,0,0,.05)",
|
||||
//Number - Width of the grid lines
|
||||
scaleGridLineWidth: 1,
|
||||
//Boolean - Whether to show horizontal lines (except X axis)
|
||||
scaleShowHorizontalLines: true,
|
||||
//Boolean - Whether to show vertical lines (except Y axis)
|
||||
scaleShowVerticalLines: true,
|
||||
//Boolean - Whether the line is curved between points
|
||||
bezierCurve: true,
|
||||
//Number - Tension of the bezier curve between points
|
||||
bezierCurveTension: 0.3,
|
||||
//Boolean - Whether to show a dot for each point
|
||||
pointDot: false,
|
||||
//Number - Radius of each point dot in pixels
|
||||
pointDotRadius: 4,
|
||||
//Number - Pixel width of point dot stroke
|
||||
pointDotStrokeWidth: 1,
|
||||
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
|
||||
pointHitDetectionRadius: 20,
|
||||
//Boolean - Whether to show a stroke for datasets
|
||||
datasetStroke: true,
|
||||
//Number - Pixel width of dataset stroke
|
||||
datasetStrokeWidth: 2,
|
||||
//Boolean - Whether to fill the dataset with a color
|
||||
datasetFill: true,
|
||||
//String - A legend template
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
|
||||
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
|
||||
maintainAspectRatio: false,
|
||||
//Boolean - whether to make the chart responsive to window resizing
|
||||
responsive: true
|
||||
};
|
||||
|
||||
//Create the line chart
|
||||
areaChart.Line(areaChartData, areaChartOptions);
|
||||
|
||||
//-------------
|
||||
//- LINE CHART -
|
||||
//--------------
|
||||
var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
|
||||
var lineChart = new Chart(lineChartCanvas);
|
||||
var lineChartOptions = areaChartOptions;
|
||||
lineChartOptions.datasetFill = false;
|
||||
lineChart.Line(areaChartData, lineChartOptions);
|
||||
|
||||
//-------------
|
||||
//- PIE CHART -
|
||||
//-------------
|
||||
// Get context with jQuery - using jQuery's .get() method.
|
||||
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
|
||||
var pieChart = new Chart(pieChartCanvas);
|
||||
var PieData = [
|
||||
{
|
||||
value: 700,
|
||||
color: "#f56954",
|
||||
highlight: "#f56954",
|
||||
label: "Chrome"
|
||||
},
|
||||
{
|
||||
value: 500,
|
||||
color: "#00a65a",
|
||||
highlight: "#00a65a",
|
||||
label: "IE"
|
||||
},
|
||||
{
|
||||
value: 400,
|
||||
color: "#f39c12",
|
||||
highlight: "#f39c12",
|
||||
label: "FireFox"
|
||||
},
|
||||
{
|
||||
value: 600,
|
||||
color: "#00c0ef",
|
||||
highlight: "#00c0ef",
|
||||
label: "Safari"
|
||||
},
|
||||
{
|
||||
value: 300,
|
||||
color: "#3c8dbc",
|
||||
highlight: "#3c8dbc",
|
||||
label: "Opera"
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
color: "#d2d6de",
|
||||
highlight: "#d2d6de",
|
||||
label: "Navigator"
|
||||
}
|
||||
];
|
||||
var pieOptions = {
|
||||
//Boolean - Whether we should show a stroke on each segment
|
||||
segmentShowStroke: true,
|
||||
//String - The colour of each segment stroke
|
||||
segmentStrokeColor: "#fff",
|
||||
//Number - The width of each segment stroke
|
||||
segmentStrokeWidth: 2,
|
||||
//Number - The percentage of the chart that we cut out of the middle
|
||||
percentageInnerCutout: 50, // This is 0 for Pie charts
|
||||
//Number - Amount of animation steps
|
||||
animationSteps: 100,
|
||||
//String - Animation easing effect
|
||||
animationEasing: "easeOutBounce",
|
||||
//Boolean - Whether we animate the rotation of the Doughnut
|
||||
animateRotate: true,
|
||||
//Boolean - Whether we animate scaling the Doughnut from the centre
|
||||
animateScale: false,
|
||||
//Boolean - whether to make the chart responsive to window resizing
|
||||
responsive: true,
|
||||
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
|
||||
maintainAspectRatio: false,
|
||||
//String - A legend template
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
|
||||
};
|
||||
//Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
pieChart.Doughnut(PieData, pieOptions);
|
||||
|
||||
//-------------
|
||||
//- BAR CHART -
|
||||
//-------------
|
||||
var barChartCanvas = $("#barChart").get(0).getContext("2d");
|
||||
var barChart = new Chart(barChartCanvas);
|
||||
var barChartData = areaChartData;
|
||||
barChartData.datasets[1].fillColor = "#00a65a";
|
||||
barChartData.datasets[1].strokeColor = "#00a65a";
|
||||
barChartData.datasets[1].pointColor = "#00a65a";
|
||||
var barChartOptions = {
|
||||
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
|
||||
scaleBeginAtZero: true,
|
||||
//Boolean - Whether grid lines are shown across the chart
|
||||
scaleShowGridLines: true,
|
||||
//String - Colour of the grid lines
|
||||
scaleGridLineColor: "rgba(0,0,0,.05)",
|
||||
//Number - Width of the grid lines
|
||||
scaleGridLineWidth: 1,
|
||||
//Boolean - Whether to show horizontal lines (except X axis)
|
||||
scaleShowHorizontalLines: true,
|
||||
//Boolean - Whether to show vertical lines (except Y axis)
|
||||
scaleShowVerticalLines: true,
|
||||
//Boolean - If there is a stroke on each bar
|
||||
barShowStroke: true,
|
||||
//Number - Pixel width of the bar stroke
|
||||
barStrokeWidth: 2,
|
||||
//Number - Spacing between each of the X value sets
|
||||
barValueSpacing: 5,
|
||||
//Number - Spacing between data sets within X values
|
||||
barDatasetSpacing: 1,
|
||||
//String - A legend template
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
|
||||
//Boolean - whether to make the chart responsive
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
|
||||
barChartOptions.datasetFill = false;
|
||||
barChart.Bar(barChartData, barChartOptions);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue