ChartJS style01

<!DOCTYPE html>
<html>
<head>
	<title>chartJS | NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="chartJS">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<meta name="robots" content="noindex,nofollow">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body>
	<div class="container-fluid">
        <div class="row mt-5 mb-5 text-center mx-auto">
          <div class="col-12">
            <h1 class="text-success">chartJS Exemple</h1>
          </div>
        </div>
        <div class="row mt-5 mb-5">
            <div class="col-xl-4 col-md-6 col-12">
              <canvas id="buyers" width="500" height="400"></canvas>
            </div>
            <div class="col-xl-4 col-md-6 col-12">
              <canvas id="countries" width="500" height="400"></canvas>
            </div>
            <div class="col-xl-4 col-md-6 col-12">
              <canvas id="income" width="500" height="400"></canvas>
            </div>
        </div>
    </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

                                    
// line chart data
var buyerData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
    {
        fillColor : "rgba(172,194,132,0.4)",
        strokeColor : "#ACC26D",
        pointColor : "#fff",
        pointStrokeColor : "#9DB86D",
        data : [203,156,99,251,305,247]
    }
]
}
// get line chart canvas
var buyers = document.getElementById('buyers').getContext('2d');
// draw line chart
new Chart(buyers).Line(buyerData);
// pie chart data
var pieData = [
    {
        value: 20,
        color:"#878BB6"
    },
    {
        value : 40,
        color : "#4ACAB4"
    },
    {
        value : 10,
        color : "#FF8153"
    },
    {
        value : 30,
        color : "#FFEA88"
    }
];
// pie chart options
var pieOptions = {
     segmentShowStroke : false,
     animateScale : true
}
// get pie chart canvas
var countries= document.getElementById("countries").getContext("2d");
// draw pie chart
new Chart(countries).Pie(pieData, pieOptions);
// bar chart data
var barData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "#48A497",
            strokeColor : "#48A4D1",
            data : [456,479,324,569,702,600]
        },
        {
            fillColor : "rgba(73,188,170,0.4)",
            strokeColor : "rgba(72,174,209,0.4)",
            data : [364,504,605,400,345,320]
        }
    ]
}
// get bar chart canvas
var income = document.getElementById("income").getContext("2d");
// draw bar chart
new Chart(income).Bar(barData);
3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Image hover 02

Image hover 02

Image hover 04

Image hover 04

Input file style01

Input file style01

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Table bootstrap with Datatable

Table bootstrap with Datatable

Timeline style04

Timeline style04

Vers le haut

Vers le haut