Pie chart & Column Chart made with "Canvas JS" library

Pie chart & Column Chart made with "Canvas JS" library

Avatar

 BY TEJAS




By using "Canvas JS" you can add charts on your Site easily you don't have to make images and other data by just adding codes you can simply create charts. As shown below example




As shown below example
This charts example we made on Topic of "Top Search Engines"

For this example we make some space for Pie chart and some for Column chart using <div> tag and we use some Bootstrap.
After giving space we add "Canvas JS" CDN link in <script> tag which is https://canvasjs.com/assets/script/canvasjs.min.js

We use little bit Bootstrap for making divisions nothing another use of Bootstrap in this example.



Also Check:-
  • Good Looking & Working Calculator Example
  • Fully Working Fan Using Buttons in CSS
  • Stylish & Working Example of Clock
  • See the TyppingEffect Example


  • Then we add some CSS code to stylize the charts Colours, Values, etc.
    After adding CSS we add Javascript code for showing the graph in manner.

    Remember both CSS and Javascript Codes are used in this example are already defined in "Canvas JS" library. According to Canvas JS we use that Codes

    In This example javascript code is little-bit big. But don't worry it's simple not that much hard.


    In below video shows Charts


    below here is a HTML, CSS, and Javascript codes.



    charts.html :-
        
            <!--Code by ProgramTuts.com-->
            <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Pie chart & Column Chart using "Canvas JS library" & "Bootstrap"</title>
      <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
      <link rel="stylesheet" href="charts-style.css">
    </head>
    <body>
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          <div id="pieChart">
          </div>
        </div>
        <div class="col-md-6">
          <div id="columnChart">
          </div>
        </div>
      </div>
    </div>
    
    <script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script>
    <script  src="charts.js"></script>
    
    </body>
    </html>
    
        
    
    charts-style.css :-
        
         
            
            .container-fluid {
                margin-top: 10%;
            }
            #pieChart {
                height: 360px;
                width: 100%;
            }
            #columnChart {
                height: 360px;
                width: 100%;
            }
        
      


    charts.js :-
        
    
    var pieChartValues = [{
      y: 39.16,
      exploded: true,
      indexLabel: "Google",
      color: "#00badd"
    }, {
      y: 21.8,
      indexLabel: "Bing",
      color: "#e60023"
    }, {
      y: 21.45,
      indexLabel: "Yahoo",
      color: "#4267b2"
    }, {
      y: 5.56,
      indexLabel: "Baidu",
      color: "#ef4d5d"
    }, {
      y: 5.38,
      indexLabel: "Yandex",
      color: "#5cb85c"
    }, {
      y: 3.73,
      indexLabel: "DuckDuckGo",
      color: "#fd9d08"
    }, {
      y: 2.92,
      indexLabel: "ASk.com",
      color: "#9dcb07"
    }];
    renderPieChart(pieChartValues);
    
    function renderPieChart(values) {
    
      var chart = new CanvasJS.Chart("pieChart", {
        backgroundColor: "white",
        colorSet: "colorSet2",
    
        title: {
          text: "Pie Chart",
          fontFamily: "Verdana",
          fontSize: 25,
          fontWeight: "normal",
        },
        animationEnabled: true,
        data: [{
          indexLabelFontSize: 15,
          indexLabelFontFamily: "Monospace",
          indexLabelFontColor: "darkgrey",
          indexLabelLineColor: "darkgrey",
          indexLabelPlacement: "outside",
          type: "pie",
          showInLegend: false,
          toolTipContent: "#percent%",
          dataPoints: values
        }]
      });
      chart.render();
    }
    var columnChartValues = [{
      y: 686.04,
      label: "Google",
      color: "#00badd"
    }, {
      y: 381.84,
      label: "Bing",
      color: "#e60023"
    }, {
      y: 375.76,
      label: "Yahoo",
      color: " #4267b2"
    }, {
      y: 97.48,
      label: "Baidu",
      color: "#ef4d5d"
    }, {
      y: 94.2,
      label: "Yandex",
      color: "#5cb85c"
    }, {
      y: 65.28,
      label: "DuckDuckGO",
      color: "#fd9d08"
    }, {
      y: 51.2,
      label: "Ask.com",
      color: "#9dcb07"
    }];
    renderColumnChart(columnChartValues);
    
    function renderColumnChart(values) {
    
      var chart = new CanvasJS.Chart("columnChart", {
        backgroundColor: "white",
        colorSet: "colorSet3",
        title: {
          text: "Column Chart",
          fontFamily: "Verdana",
          fontSize: 25,
          fontWeight: "normal",
        },
        animationEnabled: true,
        legend: {
          verticalAlign: "bottom",
          horizontalAlign: "center"
        },
        theme: "theme2",
        data: [
    
          {
            indexLabelFontSize: 15,
            indexLabelFontFamily: "Monospace",
            indexLabelFontColor: "darkgrey",
            indexLabelLineColor: "darkgrey",
            indexLabelPlacement: "outside",
            type: "column",
            showInLegend: false,
            legendMarkerColor: "grey",
            dataPoints: values
          }
        ]
      });
    
      chart.render();
    }
            
        
    
        
            <!--Code by ProgramTuts.com-->
            <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Pie chart & Column Chart using "Canvas JS library" & "Bootstrap"</title>
      <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
      <link rel="stylesheet" href="charts-style.css">
    </head>
    <body>
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          <div id="pieChart">
          </div>
        </div>
        <div class="col-md-6">
          <div id="columnChart">
          </div>
        </div>
      </div>
    </div>
    
    <script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script>
    <script  src="charts.js"></script>
    
    </body>
    </html>
    
        
    
    charts-style.css :-
        
    
            .container-fluid {
                margin-top: 10%;
            }
            #pieChart {
                height: 360px;
                width: 100%;
            }
            #columnChart {
                height: 360px;
                width: 100%;
            }
        
      


    charts.js :-
        
    
    var pieChartValues = [{
      y: 39.16,
      exploded: true,
      indexLabel: "JavaScript",
      color: "#00badd"
    }, {
      y: 21.8,
      indexLabel: "CSS",
      color: "#e60023"
    }, {
      y: 21.45,
      indexLabel: "HTML",
      color: "#4267b2"
    }, {
      y: 5.56,
      indexLabel: "Bootstrap",
      color: "#ef4d5d"
    }, {
      y: 5.38,
      indexLabel: "PHP",
      color: "#5cb85c"
    }, {
      y: 3.73,
      indexLabel: "jQuery",
      color: "#fd9d08"
    }, {
      y: 2.92,
      indexLabel: "AJAX",
      color: "#9dcb07"
    }];
    renderPieChart(pieChartValues);
    
    function renderPieChart(values) {
    
      var chart = new CanvasJS.Chart("pieChart", {
        backgroundColor: "white",
        colorSet: "colorSet2",
    
        title: {
          text: "Pie Chart",
          fontFamily: "Verdana",
          fontSize: 25,
          fontWeight: "normal",
        },
        animationEnabled: true,
        data: [{
          indexLabelFontSize: 15,
          indexLabelFontFamily: "Monospace",
          indexLabelFontColor: "darkgrey",
          indexLabelLineColor: "darkgrey",
          indexLabelPlacement: "outside",
          type: "pie",
          showInLegend: false,
          toolTipContent: "#percent%",
          dataPoints: values
        }]
      });
      chart.render();
    }
    var columnChartValues = [{
      y: 686.04,
      label: "JavaScript",
      color: "#00badd"
    }, {
      y: 381.84,
      label: "CSS",
      color: "#e60023"
    }, {
      y: 375.76,
      label: "HTML",
      color: " #4267b2"
    }, {
      y: 97.48,
      label: "Bootstrap",
      color: "#ef4d5d"
    }, {
      y: 94.2,
      label: "PHP",
      color: "#5cb85c"
    }, {
      y: 65.28,
      label: "jQuery",
      color: "#fd9d08"
    }, {
      y: 51.2,
      label: "AJAX",
      color: "#9dcb07"
    }];
    renderColumnChart(columnChartValues);
    
    function renderColumnChart(values) {
    
      var chart = new CanvasJS.Chart("columnChart", {
        backgroundColor: "white",
        colorSet: "colorSet3",
        title: {
          text: "Column Chart",
          fontFamily: "Verdana",
          fontSize: 25,
          fontWeight: "normal",
        },
        animationEnabled: true,
        legend: {
          verticalAlign: "bottom",
          horizontalAlign: "center"
        },
        theme: "theme2",
        data: [
    
          {
            indexLabelFontSize: 15,
            indexLabelFontFamily: "Monospace",
            indexLabelFontColor: "darkgrey",
            indexLabelLineColor: "darkgrey",
            indexLabelPlacement: "outside",
            type: "column",
            showInLegend: false,
            legendMarkerColor: "grey",
            dataPoints: values
          }
        ]
      });
    
      chart.render();
    }
        
    

    Thank You