how to create graph in webpage

 

Areachart

<!DOCTYPE HTML>

<html>

<head>

  <script type="text/javascript">

  window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer",

    {

      title: {

        text: "Monthly Downloads",

        fontSize: 25

      },

      axisX:{

        valueFormatString: "MMM" ,

        interval: 1,

        intervalType: "month"

 

      },

      axisY: {

        title: "Downloads"

      },

 

      data: [

      {

        indexLabelFontColor: "green",

        type: "area",

        dataPoints: [//array

 

        { x: new Date(2012, 00, 1), y: 2600},

        { x: new Date(2012, 01, 1), y: 3800 },

        { x: new Date(2012, 02, 1), y: 4300 },

        { x: new Date(2012, 03, 1), y: 2900 },

        { x: new Date(2012, 04, 1), y: 4100 },

        { x: new Date(2012, 05, 1), y: 4500 },

        { x: new Date(2012, 06, 1), y: 8600,  indexLabel: "Covered on Forbes" },

        { x: new Date(2012, 07, 1), y: 6400 },

        { x: new Date(2012, 08, 1), y: 5300 },

        { x: new Date(2012, 09, 1), y: 6000}

        ]

      }

      ]

    });

 

    chart.render();

  }

  </script>

  <script type="text/javascript" src="E:\canvasjs-3.4.9\canvasjs.min.js"></script></script>

</head>

<body>

  <div id="chartContainer" style="height: 300px; width: 50%;">

  </div>

</body>

</html>

Barchart

 

<!DOCTYPE HTML>

<html>

<head>

  <script type="text/javascript">

  window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer",

    {

      title:{

        text: "Olympic Medals of all Times (till 2012 Olympics)"

      },

      axisY: {

        title: "Medals won",

        maximum: 1010

      },

      data: [

      {

        type: "bar",

        showInLegend: true,

        legendText: "Gold",

        color: "gold",

        dataPoints: [

        { y: 198, label: "Italy"},

        { y: 201, label: "China"},

        { y: 202, label: "France"},

        { y: 236, label: "Great Britain"},

        { y: 395, label: "Soviet Union"},

        { y: 957, label: "USA"}

        ]

      },

      {

        type: "bar",

        showInLegend: true,

        legendText: "Silver",

        color: "silver",

        dataPoints: [

        { y: 166, label: "Italy"},

        { y: 144, label: "China"},

        { y: 223, label: "France"},

        { y: 272, label: "Great Britain"},

        { y: 319, label: "Soviet Union"},

        { y: 759, label: "USA"}

        ]

      },

      {

        type: "bar",

        showInLegend: true,

        legendText: "Bronze",

        color: "#DCA978",

        dataPoints: [

        { y: 185, label: "Italy"},

        { y: 128, label: "China"},

        { y: 246, label: "France"},

        { y: 272, label: "Great Britain"},

        { y: 296, label: "Soviet Union"},

        { y: 666, label: "USA"}

        ]

      }

      ]

    });

 

chart.render();

}

</script>

<script type="text/javascript" src="E:\canvasjs-3.4.9\canvasjs.min.js"></script></head>

<body>

  <div id="chartContainer" style="height: 300px; width: 50%;">

  </div>

</body>

</html>

Bubblechart

<!DOCTYPE HTML>

<html>

<head>

  <script type="text/javascript">

  window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer",

    {

      title:{

       text: "Comparison among Countries on Fertility Rate Vs Life Expectancy in 2009"

      },

      axisX: {

        title:"Life Expectancy",

       maximum: 85

      },

      axisY: {

        title:"Fertility Rate"

      },

      legend:{

        verticalAlign: "bottom",

        horizontalAlign: "left"

      },

      data: [

      {

        type: "bubble",

        legendText: "Size of Bubble Represents Population",

        showInLegend: true,

        legendMarkerType: "circle",

 toolTipContent: "<strong>{name}</strong> <br/> Fetility Rate: {y}<br/> Life Expectancy: {x} yrs<br/> Population: {z} mn",

     dataPoints: [

    // { x: 64.8, y: 2.66, z:12074.4 , name: "India"},

   //  { x: 73.1, y: 1.61, z:13313.8, name: "China"},

     { x: 78.1, y: 2.00, z:306.77, name: "US" },

     { x: 68.5, y: 2.15, z: 237.414, name: "Indonesia"},

     { x: 72.5, y: 1.86, z: 193.24, name: "Brazil"},

     { x: 76.5, y: 2.36, z: 112.24, name: "Mexico"},

     { x: 50.9, y: 5.56, z: 154.48, name: "Nigeria"},

     { x: 68.6, y: 1.54, z:141.91, name: "Russia" },

     { x: 82.9, y: 1.37, z:127.55, name: "Japan" },

     { x: 79.8, y: 1.36, z:81.90, name:"Australia" },

     { x: 72.7, y: 2.78, z: 79.71, name: "Egypt"},

     { x: 80.1, y: 1.94, z:61.81, name:"UK" },

     { x: 55.8, y: 4.76, z: 39.24, name: "Kenya"},

     { x: 81.5, y: 1.93, z:21.95, name:"Australia" },

     { x: 68.1, y: 4.77, z: 31.09, name: "Iraq"},

     { x: 47.9, y: 6.42, z: 33.42, name: "Afganistan"},

     { x: 50.3, y: 5.58, z: 18.55, name: "Angola"}

     ]

   }

   ]

 });

chart.render();

}

</script>

<script type="text/javascript" src="E:\canvasjs-3.4.9\canvasjs.min.js"></script></head>

<body>

  <div id="chartContainer" style="height: 300px; width: 50%;">

  </div>

</body>

</html>

Doughnut chart

<!DOCTYPE HTML>

<html>

<head>

  <script type="text/javascript">

  window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer",

    {

      title:{

        text: "U.S Smartphone OS Market Share, Q3 2012",

        fontFamily: "Impact",

        fontWeight: "normal"

      },

      legend:{

        verticalAlign: "bottom",

        horizontalAlign: "center"

      },

      data: [

      {

        //startAngle: 45,

       indexLabelFontSize: 20,

       indexLabelFontFamily: "Garamond",

       indexLabelFontColor: "darkgrey",

       indexLabelLineColor: "darkgrey",

       indexLabelPlacement: "outside",

       type: "doughnut",

       showInLegend: true,

       dataPoints: [

       {  y: 53.37, legendText:"Android 53%", indexLabel: "Android 53%" },

       {  y: 35.0, legendText:"iOS 35%", indexLabel: "Apple iOS 35%" },

       {  y: 7, legendText:"Blackberry 7%", indexLabel: "Blackberry 7%" },

       {  y: 2, legendText:"Windows 2%", indexLabel: "Windows Phone 2%" },

       {  y: 5, legendText:"Others 5%", indexLabel: "Others 5%" }

       ]

     }

     ]

   });

    chart.render();

  }

  </script>

  <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>

  <body>

    <div id="" style="height: 300px; width: 100%;">

    </div>

  </body>

 </html>

Pyramid chart

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer",

{

                title: {

                                text: "Assets of ACME Company"

                },

                animationEnabled: true,

                data: [

                {

                                type: "pyramid",

                                //valueRepresents: "area",

                                indexLabelFontSize: 20,

                                indexLabelFontFamily: "Lucida",

                                dataPoints: [

                                { y: 30000, indexLabel: "Stocks", color: "#4071B0" },

                                { y: 22000, indexLabel: "Bond", color: "#BEDF7A", exploded: true },

                                { y: 20000, indexLabel: "Real Estate", color: "#BCA7E9" },

                                { y: 15000, indexLabel: "Annuities", color: "#F9C89F" },

                                { y: 8000, indexLabel: "Insurance", color: "#D19393" },

                                { y: 10000, indexLabel: "Cash", color: "#CBC689" }

                                ]

                }

                ]

});

chart.render();

}

</script>

</head>

<body>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

How to create Animated 3d chart with R.

  The rgl package is the best option to build 3d charts in R. Please see this post for an introduction to 3d scatterplots using it. It also provides the plot3d() and play3d() functions that allow to animate the 3d chart, and eventually to export the result at a .gif format. Here is an application to the famous iris dataset, with a nice animated 3d scatterplot chart. Arguments x, y, z vectors of points to be plotted. Any reasonable way of defining the coordinates is acceptable. See the function  xyz.coords  for details. xlab, ylab, zlab labels for the coordinates. type For the default method, a single character indicating the type of item to plot. Supported types are: 'p' for points, 's' for spheres, 'l' for lines, 'h' for line segments from z = 0, and 'n' for nothing. For the mesh3d method, one of 'shade', 'wire', or 'dots'. Partial matching is used. col the color to be used for plotted...
Read more

Linux/Unix Commands frequently used

  Linux/Unix Commands ls  --- lists your files ls -l  --- lists your files in 'long format', which contains lots of useful information, e.g. the exact size of the file, who owns the file and who has the right to look at it, and when it was last modified. ls -a  --- lists all files, including the ones whose filenames begin in a dot, which you do not always want to see. There are many more options, for example to list files by size, by date, recursively etc. more  filename  --- shows the first part of a file, just as much as will fit on one screen. Just hit the space bar to see more or  q  to quit. You can use  / pattern  to search for a pattern. gzip  filename  --- compresses files, so that they take up much less space. Usually text files compress to about half their original size, but it depends very much on the size of the file and the nature of the co...
Read more

R Programming Introduction

R Download Link- https://cran.r-project.org/bin/windows/base/old/3.4.0/ R Studio Download link- https://www.rstudio.com/products/rstudio/download/  R is a programming language and software environment for statistical analysis, graphics representation and reporting. R was created by Ross Ihaka and Robert Gentleman at the University of Auckland, New Zealand, and is currently developed by the R Development Core Team. The core of R is an interpreted computer language which allows branching and looping as well as modular programming using functions. R allows integration with the procedures written in the C, C++, .Net, Python or FORTRAN languages for efficiency. R is freely available under the GNU General Public License, and pre-compiled binary versions are provided for various operating systems like Linux, Windows and Mac. R is free software distributed under a GNU-style copy left, and an official part of the GNU project called  GNU S . Evolution of R R was initially writ...
Read more