Hiii
I am trying to bind data dynamically for jqx charts...
I have tried this but not getting the chart.
Here is my code...
<%@ 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');
}
});
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..