<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<img src="Image/logo_73492.gif" style="height: 73px" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:DropDownList ID="DDLTagIndex1" AutoPostBack="true" runat="server">
<asp:ListItem>---Select-----</asp:ListItem>
<asp:ListItem >TagIndex1 </asp:ListItem>
<asp:ListItem>TagIndex2</asp:ListItem>
<asp:ListItem>TagIndex3</asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="DDLTagIndex2" AutoPostBack="true" runat="server">
<asp:ListItem>---Select-----</asp:ListItem>
<asp:ListItem>TagIndex1</asp:ListItem>
<asp:ListItem>TagIndex2</asp:ListItem>
<asp:ListItem>TagIndex3</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Btnsubmit" runat="server" Text="Submit" />
<asp:Button ID="BtnBack" runat="server" Text="Back" OnClick="BtnBack_Click" Width="67px" />
</td>
</tr>
</table>
<canvas id="Chart" width="500" height="500"></canvas>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
//function will be called on button click having id btnsave
$("#Btnsubmit").click(function () {
//$("[id*=Btnselect]").click(function () {
var obj = {};
obj.TagIndex1 = $.trim($("[id*=TagIndex1]").val());
obj.TagIndex2 = $.trim($("[id*=TagIndex2]").val());
var ctx = document.getElementById("Chart").getContext('2d');
$.ajax({
url: "dropdowncomparetrend.aspx/ChartData",
data: JSON.stringify(obj),
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var chartLabel = eval(response.d[0]); //Labels
var chartData = eval(response.d[1]); //Data
var chartData1 = eval(response.d[2]); //Data
var chartData2 = eval(response.d[3]); //Data
var chartData3 = eval(response.d[4]); //Data
//var chartData4 = eval(response.d[5]); //Data
var barData = {
labels: chartLabel,
datasets: [
{
label: 'line',
fillColor: "rgba(0,120,193, 0.8)",
strokeColor: "Blue",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "Green",
pointHighlightFill: "",
pointHighlightStroke: "rgba(220,220,220,1)",
data: chartData
},
{
label: 'line',
fillColor: "rgba(225,225,225,0.5)",
strokeColor: "Red",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "blue",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,2)",
data: chartData1
},
{
label: 'line',
fillColor: "rgba(225,225,225,0.6)",
strokeColor: "green",
pointColor: "rgba(220,220,220,3)",
pointStrokeColor: "Red",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: chartData2
}, {
label: 'line',
fillColor: "rgba(225,225,225,0.6)",
strokeColor: "green",
pointColor: "rgba(220,220,220,3)",
pointStrokeColor: "Red",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: chartData2
}
]
};
var skillsChart = new Chart(ctx).Line(barData);
}
});
}
);
});
</script>
</body>
</html>