Hi mod7609,
Refer the below code.
HTML
<div id="dvChart">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "CS.aspx/GetChart",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var labels = r.d[0];
var series1 = r.d[1];
var series2 = r.d[2];
var data =
{
labels: labels,
datasets:
[
{
label: "",
fillColor: "rgba(255, 255, 193, 0.2)",
strokeColor: "#FCD209",
pointColor: "#FF8C00",
data: series1
},
{
label: "",
fillColor: "rgba(217, 237, 247, 0.2)",
strokeColor: "#BCE8F1",
pointColor: "#0090CB",
data: series2
}
]
};
$("#dvChart").html("");
var canvas = document.createElement('canvas');
$("#dvChart")[0].appendChild(canvas);
//Fix for IE 8
if ($.browser.msie && $.browser.version == "8.0") {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
ctx.canvas.height = 300;
ctx.canvas.width = 500;
var lineChart = new Chart(ctx).Line(data, {
bezierCurve: false
});
},
failure: function (response) {
alert('There was an error.');
}
});
});
</script>
Code
[WebMethod]
public static List<object> GetChart()
{
List<object> chartData = new List<object>();
string query = "SELECT SUBSTRING(DATENAME(MONTH,[Time]),0,4)+CONVERT(VARCHAR(10),DATEPART(DAY,[Time])) Day FROM PL_PK";
DataTable dtYears = GetData(query);
List<string> labels = new List<string>();
foreach (DataRow row in dtYears.Rows)
{
labels.Add(row["Day"].ToString());
}
chartData.Add(labels);
query = "SELECT SUBSTRING(DATENAME(MONTH,[Time]),0,4)+CONVERT(VARCHAR(10),DATEPART(DAY,[Time])) Day,Total FROM PL_PK";
DataTable dtCountry1 = GetData(query);
List<int> series1 = new List<int>();
foreach (DataRow row in dtCountry1.Rows)
{
series1.Add(Convert.ToInt32(row["Total"]));
}
chartData.Add(series1);
query = "SELECT SUBSTRING(DATENAME(MONTH,[Time]),0,4)+CONVERT(VARCHAR(10),DATEPART(DAY,[Time])) Day,[Plan] FROM PL_PK";
DataTable dtCountry2 = GetData(query);
List<int> series2 = new List<int>();
foreach (DataRow row in dtCountry2.Rows)
{
series2.Add(Convert.ToInt32(row["Plan"]));
}
chartData.Add(series2);
return chartData;
}
private static DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}
SQL
CREATE TABLE PL_PK([ID] INT,[L90] INT,[B90] INT,[Time] DATETIME,Total INT,[Plan] INT)
INSERT INTO PL_PK VALUES(57,100,100,'2016/10/10',200,10)
INSERT INTO PL_PK VALUES(58,50,50,'2016/10/11',100,10)
INSERT INTO PL_PK VALUES(59,58,48,'2016/10/12',106,12)
INSERT INTO PL_PK VALUES(60,48,50,'2016/10/13',98,50)
INSERT INTO PL_PK VALUES(61,88,45,'2016/10/14',133,60)
INSERT INTO PL_PK VALUES(62,70,80,'2016/10/15',150,70)
INSERT INTO PL_PK VALUES(63,90,40,'2016/10/16',130,50)
Screenshot
