Data not binding to jqxcharts?

Question

0.00/5 (No votes)

See more:

Hiii
I am trying to bind data dynamically for jqx charts...
I have tried this but not getting the chart.
Here is my code...

XML

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title id='Description'>jqxChart Line Series Example</title>
    <link href="scripts/jqx.base.css" rel="stylesheet" type="text/css" />
<link href="scripts/jqx.classic.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="scripts/jqxcore.js" type="text/javascript"></script>
<script src="scripts/jqxdata.js" type="text/javascript"></script>
<script src="scripts/jqxchart.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var source = {};
        $.ajax({
            type: 'GET',
            dataType: 'json',
            async: false,
            url: 'http://localhost:30082/restfrchrst.svc/GetChartdetails',
            cache: false,
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                alert(data);
                source = $.parseJSON(data.d);
            },
            error: function (err) {
                alert('Error');
            }
        });
        // prepare jqxChart settings
        var settings = {
            title: "student marks",
            description: "Progress of student",
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: source,
            categoryAxis:
                    {
                        dataField: 'marks',
                        showGridLines: true
                    },
            colorScheme: 'scheme01',
            seriesGroups:
                    [
                        {
                            type: 'line',
                            columnsGapPercent: 50,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                unitInterval: 50,
                                minValue: 200,
                                maxValue: 600,
                                displayValueAxis: true,
                                description: 'Marks in tests' ,
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'marks', displayText: 'marks' },
                                    { dataField: 'progress', displayText: 'progress' },

                            ]
                        }
                    ]
        };
        $('#jqxChart').jqxChart(settings);
    });
</script>
    </head>
    <body>
<div id="jqxChart" style="width: 600px; height: 400px;"></div>
        </body>
</html>

help me out..

Posted 30-Jan-14 1:30am

Member 10324774

Add a Solution

Comments

Killzone DeathMan 7-Feb-14 4:42am

Please try it simple first: http://www.jqchart.com/jquery/chart/ChartTypes/LineChart
Then when you see it working, add carefully the parameters "padding", "titlePadding", etc.
If you need more help add my skype :)

Member 10324774 7-Feb-14 5:08am

If I pass static data I will get the output but I have to pass data dynamically through the service url...then I did like above and my updated code is here...
$(document).ready(function () {
var source = {};
$.ajax({
dataType: "jsonp",
type: "GET",
datafields: [
{ name: 'marks' },
{ name: 'progress' },

],
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);
source = marksarr;
}
});

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: source,
categoryAxis:
{
text: 'Category Axis',
textRotationAngle: 0,
dataField: 'marks',
showTickMarks: true,
valuesOnTicks: false,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 100,

gridLinesInterval: 1,
gridLinesColor: '#888888',
axisSize: 'auto',

},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'line',
showLabels: true,
symbolType: 'circle',
valueAxis:
{
unitInterval: 0.5,
minValue: 0.5,
maxValue: 6.0,
description: 'Score in tests',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'progress', displayText: 'progress of student' }
]
}
]
};

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

</script>

Killzone DeathMan 7-Feb-14 5:45am

I cannot help you here.. I dont have the library "jqxChart" and I dont know whats the result of "marksarr", please add my skype: miguel.poegel

Member 10324774 7-Feb-14 5:52am

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_line_series.htm
from this I have written the code....
and marksarr is defined by me..
It is an empty array..
and I pushed my data into that..

Killzone DeathMan 7-Feb-14 6:48am

Thats weird, I just include, and copy the examples like they describe, and no errors, no warnings, and the chart didnt appear :s

Member 10324774 7-Feb-14 7:19am

which one you tried? send me the link...

Killzone DeathMan 7-Feb-14 7:26am

https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm

Member 10324774 7-Feb-14 7:36am

did you included "orders.xml" file in the solution?

Killzone DeathMan 7-Feb-14 9:24am

Of course :P
It GETs the xml file!

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)