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
