Dynamically create Charts using jQuery in ASP.Net

Last Reply on Feb 27, 2017 02:25 AM By AnandM

Posted on Feb 27, 2017 02:17 AM

i want to create dynamic chart for Bar chart,Donutchart,horizntalchart,linechart,monthlylinechart,piechart

please help me

<script>
	    $(document).ready(function () {
	        var chartData = {
	            node: "graph",
	            dataset: [122, 65, 80, 84, 33, 55, 95, 15, 268, 47, 72, 69],
	            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
	            pathcolor: "#288ed4",
	            fillcolor: "#8e8e8e",
	            xPadding: 0,
	            yPadding: 0,
	            ybreakperiod: 50
	        };
	        drawlineChart(chartData);
	    });
	</script>
	
</body>
<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-36251023-1']);
    _gaq.push(['_setDomainName', 'jqueryscript.net']);
    _gaq.push(['_trackPageview']);

    (function () {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="topup.js"></script>
	<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="js/topup.js" type="text/javascript"></script>

 

<div id="jquery-script-menu">
<div class="jquery-script-center">



</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin:150px auto 50px auto; text-align:center;">jQuery Topup Chart Plugin Example</h1>
<div style="margin:20px auto; text-align:center;">
	<canvas id="graph" width="500" height="300" align="center"></canvas></div>

Code for linechart

<script type="text/javascript" src="js/canvasjs.min.js"></script>
   
	<script type="text/javascript">
	    window.onload = function () {
	        var chart = new CanvasJS.Chart("chartContainer",
    {
        title: {
            text: "Monthly Downloads"
        },
        data: [
      {
          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 },
        { 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 src="../../canvasjs.min.js"></script>

 

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

Code for monthlylinechart

 <script src="js/canvasjs.min.js" type="text/javascript"></script>
    <script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
theme: "theme3",
                       animationEnabled: true,

toolTip: {
shared: true
},	
axisY: {
title: "billion of barrels"
},
axisY2: {
title: "million barrels/day"
},	
data: [ 
{
type: "column",	
name: "Proven Oil Reserves (bn)",
legendText: "Proven Oil Reserves",
showInLegend: true, 
dataPoints:[
{label: "Bardoli", y: 262},
{label: "Surat", y: 211},
{label: "Valsad", y: 175},
{label: "Baroda", y: 137},
{label: "Bharuch", y: 115},
{label: "Adajan", y: 104},
{label: "Pipload", y: 97.8},
{label: "Russia", y: 60},
{label: "US", y: 23.3},
{label: "China", y: 20.4}


]
},
{
type: "column",	
name: "Oil Production (million/day)",
legendText: "Oil Production",
axisYType: "secondary",
showInLegend: true,
dataPoints:[
{label: "Bardoli", y: 262},
{label: "Surat", y: 211},
{label: "Valsad", y: 175},
{label: "Baroda", y: 137},
{label: "Bharuch", y: 115},
{label: "Adajan", y: 104},
{label: "Pipload", y: 97.8},
{label: "Russia", y: 10.23},
{label: "US", y: 10.3},
{label: "China", y: 4.3}


]
}

],
         legend:{
           cursor:"pointer",
           itemclick: function(e){
             if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
             	e.dataSeries.visible = false;
             
             }
             else {
               e.dataSeries.visible = true;
             }
           	chart.render();
            
           }
         },
       });

chart.render();

}
    </script>

 

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

Barchart

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="js/simple-skillbar.js" type="text/javascript"></script>
    <script>
        $('.demo').simpleSkillbar({});
    </script>
    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-36251023-1']);
        _gaq.push(['_setDomainName', 'jqueryscript.net']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Simple SkillBar Plugin Demo</title>
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"
        type="text/css">

 

  <style>
        body
        {
        }
        .container
        {
            margin: 150px auto;
            max-width: 640px;
            font-family: 'Open Sans';
        }
        .demo
        {
            margin: 30px auto;
        }
    </style>

 

 <div id="jquery-script-menu">
        <div class="jquery-script-center">
            <div class="jquery-script-ads">
                <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
            </div>
            <div class="jquery-script-clear">
            </div>
        </div>
    </div>
    <div class="container">
        <h1>
            jQuery Simple SkillBar Plugin Demo</h1>
        <div id="skill1" class="demo" data-width="80" data-background="#FFC107">
            JavaScript (80%)</div>
        <div id="skill2" class="demo" data-width="90" data-background="#FF5722">
            HTML5+XML (90%)</div>
        <div id="skill3" class="demo" data-width="70" data-background="#2196F3">
            CSS+CSS3 (70%)</div>
        <div id="skill4" class="demo" data-width="50" data-background="#F44336">
            AngularJS (50%)</div>
        <div id="skill5" class="demo" data-width="80" data-background="#3B5998">
            ReactJS + React Native (80%)</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="js/simple-skillbar.js" type="text/javascript"></script>
    <script>
        $('.demo').simpleSkillbar({});
    </script>

horizontal chart

 <script src="js/canvasjs.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer",
	{
	    title: {
	        text: "Desktop Search Engine Market Share, Dec-2012"
	    },
	    animationEnabled: true,
	    legend: {
	        verticalAlign: "center",
	        horizontalAlign: "left",
	        fontSize: 20,
	        fontFamily: "Helvetica"
	    },
	    theme: "theme2",
	    data: [
		{
		    type: "pie",
		    indexLabelFontFamily: "Garamond",
		    indexLabelFontSize: 20,
		    indexLabel: "{label} {y}%",
		    startAngle: -20,
		    showInLegend: true,
		    toolTipContent: "{legendText} {y}%",
		    dataPoints: [
				{ y: 50.24, legendText: "Chrome", label: "Chrome" },
				{ y: 30.16, legendText: "IE", label: "IE" },
				{ y: 15.67, legendText: "FireFox", label: "FireFox" },
				{ y: 5.67, legendText: "Safari", label: "Safari" },
				{ y: 1.98, legendText: "Opera", label: "opera" }
			]
		}
		]
	});
            chart.render();
        }
    </script>
    <div id="chartContainer" style="height: 300px; width: 100%;" runat="server">
    </div>

piechart