jQWidgets Forums

jQuery UI Widgets › Forums › Chart › How to bind the json data through wcf rest service for jqxlinechart?

Tagged: , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  archana.k 11 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    How to bind the json data through wcf rest service for jqxlinechart? Posts
  • February 3, 2014 at 8:34 am How to bind the json data through wcf rest service for jqxlinechart? #48834

    archana.k
    Participant

    Hi
    I am trying to pass the data dynamically for jqxlinechart through service url..I got the data into an array but am not able to plot the jqxchart..?
    i have tried this..
    please help me..
    <html lang=”en”>
    <head>
    <title id=’Description’>jqxChart Line Series Data Points</title>
    <link rel=”stylesheet” href=”scripts/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”scripts/jqxcore.js”></script>
    <script type=”text/javascript” src=”scripts/jqxdata.js”></script>
    <script type=”text/javascript” src=”scripts/jqxchart.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $.ajax({
    dataType: “jsonp”,
    type: “POST”,
    async: ‘false’,
    url: “http://localhost:30082/restfrchrst.svc/GetChartdetails”,
    contentType: “application/json”,
    success: function (data) {
    var arrayReturn = data;
    var marksarr = [];
    for (var i = 0, len = arrayReturn.length; i < len; i++) {
    var chart = arrayReturn[i];
    marksarr.push([chart.marks,chart.progress]);
    }
    alert(marksarr);
    }
    });

    var dataAdapter = new $.jqx.dataAdapter(marksarr);

    // perform Data Binding.
    dataAdapter.dataBind();
    // prepare jqxChart settings

    var settings ={
    title: “Monthly scorecard”,
    description: “Time spent in vigorous exercise by activity”,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 10, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    categoryAxis:
    {
    text: ‘Category Axis’,
    textRotationAngle: 0,
    dataField: ‘Month’,
    showTickMarks: true,
    valuesOnTicks: false,
    tickMarksInterval: 1,
    tickMarksColor: ‘#888888’,
    unitInterval: 1,
    gridLinesInterval: 1,
    gridLinesColor: ‘#888888’,
    axisSize: ‘auto’
    },
    colorScheme: ‘scheme05’,
    seriesGroups:
    [
    {
    type: ‘line’,
    showLabels: true,
    symbolType: ‘circle’,
    valueAxis:
    {
    unitInterval: 50,
    minValue: 200,
    maxValue: 600,
    description: ‘Score in tests’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’
    },
    series: [
    { dataField: ‘Score’, displayText: ‘Score in tests’ }
    ]
    }
    ]
    };

    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);
    });

    </script>
    </head>
    <body class=’default’>
    <div id=’jqxChart’ style=”width:680px; height:400px”>

    </div>
    </body>
    </html>

    February 5, 2014 at 6:48 am How to bind the json data through wcf rest service for jqxlinechart? #48978

    archana.k
    Participant

    please send me the solution as soon as possible…

    February 5, 2014 at 8:27 am How to bind the json data through wcf rest service for jqxlinechart? #48988

    Peter Stoev
    Keymaster

    Hi archana.k.

    Here’s a help topic which describes how to bind a Chart to a Web Service – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-web-service-chart.htm.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    February 5, 2014 at 10:04 am How to bind the json data through wcf rest service for jqxlinechart? #49000

    archana.k
    Participant

    I tried that one also but not working…
    Suggest me something..
    When I use my wcf rest service url it is showing error..

    February 5, 2014 at 10:27 am How to bind the json data through wcf rest service for jqxlinechart? #49003

    archana.k
    Participant

    Actually I am using wcf restful service for json data…
    My service code is..
    namespace restsrvc1
    {
    // NOTE: You can use the “Rename” command on the “Refactor” menu to change the interface name “Irestfrchrst” in both code and config file together.
    [ServiceContract]
    public interface Irestfrchrst
    {
    [OperationContract]
    [WebGet(UriTemplate = “GetChartdetails”, ResponseFormat = WebMessageFormat.Json)]

    List<chart> GetChartdetails();
    }
    [DataContract]
    [Serializable]
    public class chart
    {
    [DataMember]
    public int marks { get; set; }
    [DataMember]
    public decimal progress { get; set; }
    }
    }

    namespace restsrvc1
    {
    // NOTE: You can use the “Rename” command on the “Refactor” menu to change the class name “restfrchrst” in code, svc and config file together.
    // NOTE: In order to launch WCF Test Client for testing this service, please select restfrchrst.svc or restfrchrst.svc.cs at the Solution Explorer and start debugging.
    public class restfrchrst : Irestfrchrst
    {
    SqlConnection con = new SqlConnection(“Data Source=10.90.90.100;Initial Catalog=SGT_Test;User ID=sgtuser;Password=sgtuser”);
    List<chart> c = new List<chart>();
    public List<chart> GetChartdetails()
    {
    con.Open();
    SqlCommand cmd = new SqlCommand(“select * from charts”,con);
    SqlDataReader dr = cmd.ExecuteReader();
    if (dr.HasRows)
    {
    while (dr.Read())
    {
    c.Add(new chart { marks = Convert.ToInt32(dr[0]), progress = Convert.ToDecimal(dr[1]) });
    }
    }
    con.Close();
    return c;
    }

    }
    }
    and the above code is aspx page code…
    Tell me the solution…

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.