Why data is not binding while passing dynamic data to jquery chart?

Question

5.00/5 (1 vote)

See more:

Hi I am trying to pass the dynamic data for jquery charts. But am not able to plot the chart by that data is not binding to the chart...it is showing like [Object object]..
Any one help me please...
I have tried this..

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples: AJAX</title>
    <link href="scripts/examples.css" rel="stylesheet" type="text/css" />

    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="scripts/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="scripts/jquery.flot.js"></script>
    <script type="text/javascript">



    $(function() {

        var source = {};

        $.ajax({
            type: 'POST',
            //data:'format=json',
            dataType: 'jsonp',
            async: false,
            url: 'http://localhost:30082/restfrchrst.svc/GetChartdetails',
            //cache: false,
            contentType: 'application/json',
            data: "",
            success: function (data) {
                alert(data);
                source = data;
                //source = $.parseJSON(data);

            },
            error: function (err) {
                alert(err);
            }


        });
        function fn()
        {
            var retdata;
            var arr1 = [];
            retdata = source;
            arr1.push(retdata);
        }

        var plot = $.plot("#placeholder", [
            //{ data: sin, label: "sin(x)"},
            //{ data: cos, label: "cos(x)"}
           { data:  arr1}
        ], {
            series: {
                lines: {
                    show: true
                },
                points: {
                    show: true
                }
            },
            grid: {
                hoverable: true,
                clickable: true
            },
            yaxis: {
                min: 200,
                max: 600
            }

        });

        $("<div id='tooltip'></div>").css({
            position: "absolute",
            display: "none",
            border: "1px solid #fdd",
            padding: "2px",
            "background-color": "#fee",
            opacity: 0.80
        }).appendTo("body");

        $("#placeholder").bind("plothover", function (event, pos, item) {

            if ($("#enablePosition:checked").length > 0) {
                var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
                $("#hoverdata").text(str);
            }

            if ($("#enableTooltip:checked").length > 0) {
                if (item) {
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                    $("#tooltip").html(item.series.label + " of " + x + " = " + y)
                        .css({top: item.pageY+5, left: item.pageX+5})
                        .fadeIn(200);
                    }
                else {
                    $("#tooltip").hide();
                }
            }
        });

        $("#placeholder").bind("plotclick", function (event, pos, item) {
            if (item) {
                $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
                plot.highlight(item.series, item.datapoint);
            }
        });

        // Add the Flot version string to the footer

        $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
    });

    </script>
</head>
<body>
    <div id="header">
        <h2>Interactivity</h2>
    </div>

    <div id="content">

        <div class="demo-container">
            <div id="placeholder" class="demo-placeholder"></div>
        </div>

        <p>One of the goals of Flot is to support user interactions. Try pointing and clicking on the points.</p>

        <p>
            <label><input id="enablePosition" type="checkbox" checked="checked"></input>Show mouse position</label>
            <span id="hoverdata"></span>
            <span id="clickdata"></span>
        </p>

        <p>A tooltip is easy to build with a bit of jQuery code and the data returned from the plot.</p>

        <p><label><input id="enableTooltip" type="checkbox" checked="checked"></input>Enable tooltip</label></p>

    </div>

    <div id="footer">
        Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
    </div>

</body>
</html>

public class restfrchrst : Irestfrchrst
    {
        SqlConnection con = new SqlConnection("Data Source=10.90.90.100;Initial Catalog=SGT_Test;User ID=sgtuser;Password=sgtuser");
        List c = new List();
        public List 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;
        }

svc.cs 

isvc is:
 public interface Irestfrchrst
    {
        [OperationContract]
        [WebGet(UriTemplate = "GetChartdetails", ResponseFormat = WebMessageFormat.Json)]
        
        List GetChartdetails();
    }
    [DataContract]

    public class chart
    {
          [DataMember]
        public int marks { get; set; }
           [DataMember]
        public decimal progress { get; set; }
    } 
}

Posted 1-Feb-14 0:01am

Member 10324774

Updated 1-Feb-14 1:21am

Sampath Lokuge

v2

Add a Solution

Comments

JoCodes 1-Feb-14 6:31am

Whats the error?

Member 10324774 1-Feb-14 6:43am

no error but not plotting the data. I have written alert(data); then it is showing [Object object] [Object object] [Object object] [Object object] [Object object] [Object object] like this but don't know y?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sampath Lokuge · Answer 1 · 2014-02-01T00:46:00

Solution 1

Please add the document.ready() method is as below.

XML

<script type="text/javascript">
$(document).ready(function() {
    //your code here
});
</script>

UPDATE

C#

[Serializable]
public class chart
  {
        [DataMember]
        public int marks { get; set; }

        [DataMember]
        public decimal progress { get; set; }
    }

Try to use associative array :

C#

var value = { "aaa": "111", "bbb": "222", "ccc": "333" };
var blkstr = [];
$.each(value, function(idx2,val2) {
     var str = idx2 + ":" + val2;
     blkstr.push(str);
});
alert(blkstr.join(", "));

For more info : Associative array

Posted 1-Feb-14 0:46am

Sampath Lokuge

Updated 2-Feb-14 1:59am

v3

Comments

Member 10324774 1-Feb-14 6:57am

no change..not binding the data..

Sampath Lokuge 1-Feb-14 7:02am

Can you put the code snippet for 'GetChartdetails' method ?

Member 10324774 1-Feb-14 7:17am

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;
}

svc.cs

isvc is:
public interface Irestfrchrst
{
[OperationContract]
[WebGet(UriTemplate = "GetChartdetails", ResponseFormat = WebMessageFormat.Json)]

List<chart> GetChartdetails();
}
[DataContract]

public class chart
{
[DataMember]
public int marks { get; set; }
[DataMember]
public decimal progress { get; set; }
}
}

Sampath Lokuge 1-Feb-14 7:27am

Please check my 'UPDATE' section.Add [Serializable] attribute too.

Member 10324774 1-Feb-14 8:11am

hi
I updated my code , wcf rest service data is taken in an array but not able to plot chart...
please check..
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: AJAX</title>
<link href="scripts/examples.css" rel="stylesheet" type="text/css" />


<script language="javascript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="scripts/jquery.flot.js"></script>
<script type="text/javascript">

$(document).ready(function () {

var source = {};

$.ajax({
type: 'POST',
//data:'format=json',
dataType: 'jsonp',
async: false,
url: 'http://localhost:30082/restfrchrst.svc/GetChartdetails',
//cache: false,
contentType: 'application/json',
data: "",
success: function (data) {

var arrayReturn = data;
for (var i = 0, len = arrayReturn.length; i < len; i++) {

var chart = arrayReturn[i];
var arr = [];
arr.push([chart.marks, chart.progress]);
//alert(arr);
//alert(chart.progress);
}
//source = $.parseJSON(data);

},
error: function (err) {
alert(err);
}

});

var plot = $.plot("#placeholder", [{ data: arr }], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
min: 200,
max: 600
}

});

$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");

$("#placeholder").bind("plothover", function (event, pos, item) {

if ($("#enablePosition:checked").length > 0) {
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#hoverdata").text(str);
}

if ($("#enableTooltip:checked").length > 0) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);

$("#tooltip").html(item.series.label + " of " + x + " = " + y)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
}
else {
$("#tooltip").hide();
}
}
});

$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
plot.highlight(item.series, item.datapoint);
}
});

// Add the Flot version string to the footer

$("#footer").prepend("Flot " + $.plot.version + " – ");
});
});
</script>
</head>
<body>
<div id="header">

Interactivity

</d

Sampath Lokuge 1-Feb-14 8:21am

IS there any javascript error on you js code ? Plz check that with the chrome dev tool.

Member 10324774 1-Feb-14 8:31am

It is saying that "uncaught reference:arr is not defined"

Sampath Lokuge 1-Feb-14 8:40am

You have to declare 2 dimensional array for store your data. Plz check this link for more info.
http://stackoverflow.com/questions/6933096/jquery-creating-two-dimensional-array

Member 10324774 2-Feb-14 3:07am

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_line_series_symbol_type.htm
see this link
I want to do like this
For that I have modified my code
Here is my updated code..
<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 () {
// prepare chart data as an array
//var sampleData = [
// { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
// { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
// { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
// { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
// { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
// { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
// { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
//];
$.ajax({
dataType:"jsonp",
type:"GET",
async:'false',
url:"http://localhost:30082/restfrchrst.svc/GetChartdetails",
contentType:"application/json",
success:function(data){
var arrayReturn=data;
for(var i= 0, len = arrayReturn.length; i < len; i++)
{
var chart=arrayReturn[i];
var marksarr=[];
marksarr.push([chart.Month, chart.Score]);
alert(marksarr);
}

}
//error: function (err) {
// alert(err);
//}
});

// 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: marksarr,
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'

Member 10324774 2-Feb-14 3:07am

but not getting the chart to be plotted

Sampath Lokuge 2-Feb-14 3:10am

Is there any js error ?

Member 10324774 2-Feb-14 3:30am

no blank page
getting the data in alert window but didn't understand y source property not taking that?

Sampath Lokuge 2-Feb-14 3:33am

try by changing your type as 'post' instead of 'Get'?

Member 10324774 2-Feb-14 3:39am

no change in that
..

Sampath Lokuge 2-Feb-14 3:41am

What happened when you use the hard coded values ? is it working with that ?

Member 10324774 2-Feb-14 3:45am

if we pass ststic data then its working

Sampath Lokuge 2-Feb-14 3:49am

OK then may be your problem is with data formats.So check abt that.

Member 10324774 2-Feb-14 5:54am

data format is incorrect..
actually we want data like this {[434,5.4],[345,5.2]} but I am getting as 434,5.4,345,5.2
To get like that what should I do..?

Member 10324774 2-Feb-14 6:50am

data format is also correct..

Sampath Lokuge 2-Feb-14 6:52am

Now what's your problem ?

Member 10324774 2-Feb-14 7:07am

I am getting data in my array but it is showing that undefined array
Again I have to take an array and pass these values to that , how to do that?

Sampath Lokuge 2-Feb-14 7:13am

Again The way you declared the array is wrong.You have to declare it as 2d array.
http://stackoverflow.com/questions/6933096/jquery-creating-two-dimensional-array

Member 10324774 2-Feb-14 7:24am

yaa.. then in my case how to do...please don't mind tel me clearly

Member 10324774 2-Feb-14 7:27am

can I write like this

var o = {
product: [
{ attribute: "value" },
{ attribute: "value" }
]
};

Sampath Lokuge 2-Feb-14 7:43am

Yep,What happened then ?

Member 10324774 2-Feb-14 7:50am

value is not available in my case. am passing synamically so I did like this
success: function (data) {
var arrayReturn = data;
var sol = [];
var o = {};
o.chart = [];
for (var i = 0, len = arrayReturn.length; i < len; i++) {

var chart = arrayReturn[i];
//sol.push([chart.marks, chart.progress]);
o.chart.push([chart.marks]);
o.chart.push([chart.progress]);
}
even not getting the output

Member 10324774 2-Feb-14 7:52am

I also did like this

var source = {};
source.c1 = [];
source.c1.push(["marks:chart.marks"]);
source.c1.push(["progress:chart.progress"]);

Member 10324774 2-Feb-14 7:53am

but not getting..

Sampath Lokuge 2-Feb-14 8:00am

Try to use associative array.I have updated my answer above. Plz check that.

Member 10324774 2-Feb-14 8:24am

No use ..

Member 10324774 2-Feb-14 8:35am

Any one help me please...

Member 10324774 3-Feb-14 2:12am

hi did u find any solution?