TheunsCanvasjs

TheunsCanvasjs

by TheunsFurter

CSS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Web.Configuration;
using System.Web.Script.Serialization;

namespace ASP.NET_Multi_Series_Chart_Sample
{
    public partial class Canvasjsattempt : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string GetAllRecords()
        {
            DataTable dt = new DataTable();
            using (SqlConnection strcon = new SqlConnection(WebConfigurationManager.ConnectionStrings["con"].ConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT DISTINCT FORMAT(DateMeasured, 'yyyy-MM-dd') AS DateMeasured,SUM (TotalCount) AS TotalCount,SUM (SuccessCount) AS SuccessCount, SUM (TotalCount - SuccessCount) AS FailureCount FROM dbo.Tbl_DataValues INNER JOIN dbo.Tbl_PageDefinitions ON dbo.Tbl_DataValues.DefinitionId = dbo.Tbl_PageDefinitions.DefinitionID WHERE(MONTH(dbo.Tbl_DataValues.DateMeasured) = MONTH(DATEADD(dd, -1, GETDATE()))) AND(YEAR(dbo.Tbl_DataValues.DateMeasured) = YEAR(DATEADD(dd, -1, GETDATE()))) AND dbo.Tbl_PageDefinitions.Description = 'Hourly GPRS Poll Failures Chart' GROUP BY FORMAT(DateMeasured, 'yyyy-MM-dd') ORDER BY FORMAT(DateMeasured, 'yyyy-MM-dd') ", strcon))
                {
                    strcon.Open();
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                    JavaScriptSerializer serializer = new JavaScriptSerializer();
                    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                    Dictionary<string, object> row;
                    foreach (DataRow dr in dt.Rows)
                    {
                        row = new Dictionary<string, object>();
                       ...

JavaScript

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Canvasjsattempt.aspx.cs" Inherits="ASP.NET_Multi_Series_Chart_Sample.Canvasjsattempt" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <script type="text/javascript">
      var storeData = [];
      var chart = null;
      var dataPoints = [];
      
      window.onload = function () {
          $.ajax({
              url: "Canvasjsattempt.aspx/GetAllRecords",
              type: "POST",
              data: {},
              contentType: "application/json",
              datatype: "json",
              success: function (result) {
                  var retrivedData = JSON.parse(result.d);
                  var lengthOfRetrivedData = retrivedData.length;
                  for (var i = 0; i < lengthOfRetrivedData; i++)
                      storeData.push({
                          x: retrivedData[i].X,
                          y1: retrivedData[i].Y1,
                          y2: retrivedData[i].Y2,
                          y3: retrivedData[i].Y3
                      });                
              },
              error: function (err) {
                  alert("fail");
              }
          });
          
          $("input").on("click", function () {
              chart.options.data = [];
              for (var i = 0; i < $("input").length; i++) {
                  dataPoints = [];
                  if ($("input:checked")[i]) {
                      if (Number($("input:checked")[i].value) === 0) {
                          for (var j = 0; j < storeData.length; j++)
                              dataPoints.push({ x: storeData[j].x, y: storeData[j].y1 });
                      }
                      else if...