Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: JS Pie chart

  1. #1
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation JS Pie chart

    <!DOCTYPE html>
    <html lang="en">

    <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bare - Start Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <script src="js/chart.js"></script>
    <script src="js/jquery-3.1.1.min"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    </head>

    <body>

    <!-- Navigation -->


    <!-- Page Content -->


    <canvas id="mycanvas" width="256" height="256" >
    <script>
    $(document).ready(function(){
    var ctx = $("#mycanvas").get(0).getContext("2d");

    //pie chart data
    var data= [
    {
    value: 270,
    color: "cornflowerblue",
    highlight: "lightskyblue",
    label: "corn Flower Blue"

    },
    {
    value: 90,
    color: "lightgreen",
    highlight: "yellowgreen",
    label: "Lightgreen"

    }];
    var piechart = new Chart(ctx).Pie(data);
    });
    </script>


    <script src="js/chart.js"></script>
    <script src="js/jquery-3.1.1.min"></script>

    </body>

    </html>

    this the code for a pie chart using html5 canvas but the pie chart is not showing up on the browser its a blank page.i dont know whrer is the fault.help is needed asap.

  2. #2
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    194
    Thanks
    2
    Thanked 37 Times in 37 Posts
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Bare  Template</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    </head>
    <body>
    <div id=con style="width:200px;height:200px">
    <canvas id="myChart"></canvas></div>
    <script>
    var data = {
        labels: [
            "Red",
            "Blue",
            "Yellow"
        ],
        datasets: [
            {
                data: [300, 50, 100],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]
    };
    var myPieChart = new Chart(myChart,{
        type: 'pie',
        data: data,
       
    });
    </script>
    </body>
    </html>
    Last edited by Shaka Zorba; 01-09-2017 at 10:47 PM.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •