how to add morris chart in aspnet c ltscriptgt function LINE CHART var line new MorrisLine element 39linechart39 resize true data y 392012022439 Points 8 y 392012022539 Points 7

Refer below sample code for your reference and implement it as per your code logic here i used Northwind DatabaseHTMLDefaultaspxlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltlink type34textcss34 rel34stylesheet34 href34cdnjscloudflarecomajaxlibsmorrisjs051morriscss34gt ltscript type34textjavascript34 src34ajaxgoogleapiscomajaxlibsjquery190jqueryminjs34gtltscriptgt ltscript type34textjavascript34 src34cdnjscloudflarecomajaxlibsraphael210raphaelminjs34gtltscriptgt ltscript type34textjavascript34 src34cdnjscloudflarecomajaxlibsmorrisjs051morrisminjs34gtltscriptgt ltscript type34textjavascript34gt documentreadyfunction ajax type 39POST39 url 34DefaultaspxGetGr

Draw Line chart from database using jQuery morris plugin in ASP.Net

mukesh1

SOLVED CLOSED ACTIVE ANSWERED
User: mukesh1
Posted: on May 17, 2018 12:00 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 6864
Sample Code: Download

how to add morris chart in asp.net c#

                    <script>
                        $(function () {
                            // LINE CHART
                            var line = new Morris.Line({
                                element: 'line-chart',
                                resize: true,
                                data: [
                                  { y: '2012-02-24', Points: 8},
                                  { y: '2012-02-25', Points: 7 },
                                  { y: '2012-02-25', Points: 6 },
                                  { y: '2012-02-26', Points: 5 },
                                  { y: '2012-02-26', Points: 3 },
                                  { y: '2012-02-26', Points: 7 },
                                  { y: '2012-02-26', Points: 8 },
                                  { y: '2012-02-28', Points: 2 },
                                  { y: '2012-02-28', Points: 3 },
                                  { y: '2012-02-30', Points: 3 }
                                ],
                                xkey: 'y',
                                ykeys: ['Points'],
                                labels: ['Points '],
                                lineColors: ['#3c8dbc'],
                                hideHover: 'auto'
                            });
                        });
                    </script>

want to add morris chart values dyanmically from codebehiind

DataSet ds1 = sql.getds("select task.task_title,task_performance.totalpoints,convert(varchar(20),date,113) as date from task_performance join task on task.task_id=task_performance.task_id where user_id='" + Session["iduser"].ToString() + "' and date between '" + txtfrom.Text + "' and '" + txtto.Text + "'");

Download FREE API for Word, Excel and PDF in ASP.Net

kalpesh

0 1

Reply
ANSWER
User: kalpesh
Replied: on May 17, 2018 03:38 AM
Modified: on May 17, 2018 03:40 AM
Report

Refer below sample code for your reference and implement it as per your code logic here i used Northwind Database.

HTML

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                url: "Default.aspx/GetGraphData",
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: {},
                success: function (result) {
                    new Morris.Line({
                        element: 'line-chart',
                        data: result.d,
                        xkey: 'label',
                        ykeys: ['value'],
                        labels: ['value']
                    });
                },
                error: function (error) {
                    alert(error.responseText);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="line-chart">
    </div>
    </form>
</body>
</html>

Namespaces

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;

VB.Net

Imports System.Web.Services
Imports System.Data.SqlClient

Class

public class GraphData
{
    public string label { get; set; }
    public int value { get; set; }
}

VB.Net

Public Class GraphData
    Public Property label As String
    Public Property value As Integer
End Class

Code

Default.aspx.cs

[WebMethod]
public static List<GraphData> GetGraphData()
{
    List<GraphData> graphDataList = new List<GraphData>();
    string constr = ConfigurationManager.ConnectionStrings["ConStr"].ConnectionString;
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd = new SqlCommand("SELECT TOP 5 OrderId,Freight FROM Orders");
    cmd.Connection = con;
    con.Open();
    SqlDataReader sdr = cmd.ExecuteReader();
    while (sdr.Read())
    {
        graphDataList.Add(new GraphData
        {
            label = Convert.ToString(sdr["OrderId"]),
            value = (Convert.ToInt32(sdr["Freight"]))
        }
        );
    }
    con.Close();
    return graphDataList;
}

VB.Net

Default.aspx.vb

<WebMethod()>
Public Shared Function GetGraphData() As List(Of GraphData)
    Dim graphDataList As List(Of GraphData) = New List(Of GraphData)()
    Dim constr As String = ConfigurationManager.ConnectionStrings("ConStr").ConnectionString
    Dim con As SqlConnection = New SqlConnection(constr)
    Dim cmd As SqlCommand = New SqlCommand("SELECT TOP 5 OrderId,Freight FROM Orders")
    cmd.Connection = con
    con.Open()
    Dim sdr As SqlDataReader = cmd.ExecuteReader()

    While sdr.Read()
        graphDataList.Add(New GraphData With {
            .label = Convert.ToString(sdr("OrderId")),
            .value = (Convert.ToInt32(sdr("Freight")))
        })
    End While

    con.Close()
    Return graphDataList
End Function

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Draw Line chart from database using jQuery morris plugin in ASP.Net

Company

Explore

Follow us

Contact Us