<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>แก้ไข Animated chart</title>
<meta name="description" content="เว็บไซต์แนะนำเกี่ยวกับนายวินัย บุตรศาสตร์">
<meta name="keywords" content="Nize portfolio template">
<meta name="author" content="Nize">
<!-- Favicons
================================================== -->
<link rel="icon" href="../../../img/icon/icon.png">
<style>
table {
width: 100%;
height: 100%;
padding-top: 20px;
/* margin-left: 20px; */
}
#editTD {
width: 30%;
height: 100%;
}
#showTD {
width: 60%;
height: 100%;
}
#paddingLTD {
width: 5%;
height: 100%;
}
#paddingRTD {
width: 5%;
height: 100%;
}
showDiv {
width: 100%;
height: 100%;
margin-right: 20px;
}
td {
border: 1px;
border-style: hidden;
border-spacing: 0px;
padding: 0px;
}
</style>
</head>
<body>
<table>
<tr>
<td id="paddingLTD"></td>
<td id="editTD">
<div id="divTD">
<h3>ชื่อกราฟ :
<textarea form="tArea" id="graphName"></textarea>
</h3>
</div>
<button id="bt1">บันทึก</button>
</td>
<td id="showTD">
<div id="showDiv"></div>
</td>
<td id="paddingRTD"></td>
</tr>
</table>
<script src="../../../asset/js/canvasjs/canvasjs.min.js"></script>
<script src="../../../asset/js/jquery/jquery.min.js"></script>
<script>
var data = [{
y: 51.08,
label: "Chrome"
},
{
y: 27.34,
label: "Internet Explorer"
}, {
y: 10.62,
label: "Firefox"
}, {
y: 5.02,
label: "Microsoft Edge"
}, {
y: 4.07,
label: "Safari"
}, {
y: 1.22,
label: "Opera"
}, {
y: 0.44,
label: "Others"
}
];
var nameG = "Desktop Browser Market Share in 2016";
$('#graphName').val(nameG);
for (var i in data) {
$('#divTD').append("<div><h3>" + "<input type='text' class='te' value='" + data[i].label + "' size='10'>" +
" : <input type='text' value='" + data[i].y + "' size='2'> %</h3></div>");
// <button>ลบ</button>
}
window.onload = function () {
Render();
}
$(document).ready(function () {
$('#graphName').mouseout(function () {
nameG = $('#graphName').val();
Render();
});
$('#bt1').click(function () {
Redata();
});
// $('button').click(function () {
// $(this).parent().remove();
// Redata();
// });
function Redata() {
var a = $('input');
for (var i = 0; i < a.length; i += 2) {
data[i / 2].label = a[i].value;
i++;
data[(i - 1) / 2].y = a[i].value;
i--;
Render();
}
}
});
function Render() {
var chart = new CanvasJS.Chart("showDiv", {
theme: "light2", // "light1", "light2", "dark1", "dark2"
exportEnabled: true,
animationEnabled: true,
title: {
text: nameG
},
data: [{
type: "pie",
startAngle: 25,
toolTipContent: "<b>{label}</b>: {y}%",
showInLegend: "true",
legendText: "{label}",
indexLabelFontSize: 16,
indexLabel: "{label} - {y}%",
dataPoints: data
}]
});
chart.render();
}
</script>
</body>
</html>