##### Loading...

Disable Preloader

## Chart

#### Polar Area

    Polar Area Chart
    <div style="width: 80%" class="text-center">
      <canvas id="polar-area" width="400" height="400"/>
      </canvas>
    </div>

    $(document).ready(function() {
        // Polar Area Chart
        var polarData = [
          {
            value: 200,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Red"
          },
          {
            value: 50,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Green"
          },
          {
            value: 120,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Yellow"
          },
          {
            value: 40,
            color: "#949FB1",
            highlight: "#A8B3C5",
            label: "Grey"
          },
          {
            value: 150,
            color: "#4D5360",
            highlight: "#616774",
            label: "Dark Grey"
          }
        ];

      window.onload = function(){
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
          responsive:true
        });
      };
    });

#### Doughnut Chart

    Doughnut Chart
    <div style="width: 80%" class="text-center">
      <canvas id="doughnutChart" width="500" height="500"/>
      </canvas>
    </div>

    $(document).ready(function() {
        // Doughnut Chart
        var doughnutData = [
          {
            value: 200,
            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 chart_doughnutChart = document.getElementById("doughnutChart").getContext("2d");
        window.myDoughnut = new Chart(chart_doughnutChart).Doughnut(doughnutData, {
          responsive : true
        });
      };
    });

#### Radar Chart

#### Line Chart

    Radar Chart
    <div style="width: 80%" class="text-center">
      <canvas id="radarChart" width="500" height="500"/>
      </canvas>
    </div>

    $(document).ready(function() {
        // 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]
            }
          ]
        };
        window.onload = function(){
          var chart_radarChart = document.getElementById("radarChart").getContext("2d");
          window.myRadar = new Chart(chart_radarChart).Radar(radarChartData, {
            responsive: true
          });
        };

    });

    Line Chart
    <div style="width: 90%" class="text-center">
      <canvas id="lineChart" height="450" width="600"></canvas>
    </div>

    $(document).ready(function() {
        // 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()]
            }
          ]
        }
      };
        window.onload = function(){
          var chart_lineChart = document.getElementById("lineChart").getContext("2d");
          window.myLine = new Chart(chart_lineChart).Line(lineChartData, {
            responsive: true
          });
        };

    });

#### Bar Chart

#### Pie Custom Tooltips

    Bar Chart
    <div style="width: 90%" class="text-center">
      <canvas id="barChart" width="500" height="500"/>
      </canvas>
    </div>

    $(document).ready(function() {
        // Bar Chart
          var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
          var barChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
              {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
              },
              {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,0.8)",
                highlightFill : "rgba(151,187,205,0.75)",
                highlightStroke : "rgba(151,187,205,1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
              }
            ]
          }
      };
        window.onload = function(){
          var chart_barChart = document.getElementById("barChart").getContext("2d");
          window.myBar = new Chart(chart_barChart).Bar(barChartData, {
            responsive : true
          });
        };
    });

    Pie Custom Tooltips
    <div style="width: 80%" class="text-center">
      <canvas id="pieChart" width="500" height="500"/>
      </canvas>
    </div>

    $(document).ready(function() {
        // Pie Chart
          var pieData = [
            {
              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 chart_peiChart = document.getElementById("peiChart").getContext("2d");
          window.myBar = new Chart(chart_peiChart).Pie(pieData, {
            responsive : true
          });
        };
    });