4👍
✅
I changed your data structure. With this new “data”, the code works. I think that you used a specific data structure for line chart.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
// Get the context of the canvas element we want to select
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);
</script>
</body>
</html>
1👍
Retrieving Data from the database using Chat.js
Here is the code it worked for me.
<link href="JSfiles/ui.jqgrid.css" rel="stylesheet" />
<link href="JSfiles/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<script src="JSfiles/jquery-1.7.1.min.js"></script>
<script src="JSfiles/grid.locale-en.js"></script>
<script src="JSfiles/jquery.jqGrid.min.js"></script>
<script src="JSfiles/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
$(function () {
var lastsel2;
debugger;
$("#dataGrid").jqGrid({
url: 'offers.aspx/LoadGrid',
datatype: 'json',
mtype: 'POST',
height: 200,
width: 500,
//localReader: { CampaignID: 'CampaignID' },
editurl: 'clientArray',
onSelectRow: function (date) {
if (txAmount && txAmount !== lastsel2) {
jQuery('#dataGrid').restoreRow(lastsel2);
jQuery('#dataGrid').editRow(date, true);
lastsel2 = date;
}
},
serializeGridData: function (postData) {
//alert(postData);
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json" },
loadonce: true,
colNames: ['China', 'Indonesia', 'Cambodia', 'Malayasia', 'Thailand', 'Vietnam', 'Date', ],
colModel: [
{ name: 'CN', index: 'CN', width: 10, height: 30, editable: false, sortable: true },
{ name: 'ID', index: 'ID', width: 10, height: 30, editable: false, sortable: true },
{ name: 'KH', index: 'KH', width: 10, height: 30, editable: false, sortable: true },
{ name: 'MY', index: 'MY', width: 10, height: 30, editable: false, sortable: true },
{ name: 'TH', index: 'TH', width: 10, height: 30, editable: false, sortable: true },
{ name: 'VN', index: 'VN', width: 10, height: 30, editable: false, sortable: true },
{ name: 'date', index: 'date', width: 10, sortable: true, sorttype: "number", formatter: 'date', formatoptions: { srcformat: "Y-m-d", newformat: 'd/m/y', datefmt: 'd/m/y' } }
],
pager: '#pagingGrid',
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "date"
},
sortname: 'date',
sortorder: "desc",
sortable: true,
loadComplete: function () {
var $self = $(this);
if ($self.jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$self.trigger("reloadGrid"); // Call to fix client-side sorting
}, 50);
}
},
caption: 'Incomming Offers Report '
});
jQuery("#dataGrid").jqGrid('navGrid', '#pagingGrid',
{ search: true, edit: false, add: false, del: false, refresh: true }, {}, {}, {},
{ recreateFilter: true, overlay: true, multipleSearch: true, multipleGroup: true });
});
</script>
C# file
--------
[WebMethod]
public static List<object> Chartload()
{
DataTable dt = new DataTable();
string StartDate = DateTime.Now.AddDays(-180).ToString("yyyy-MM-dd");
string EndDate = DateTime.Now.ToString("yyyy-MM-dd");
List<ChartDetails> dataList = new List<ChartDetails>();
string country = string.Empty;
List<object> iData = new List<object>();
Dataclass objoffers = new Dataclass();
dt = objoffers.Getoffers("", StartDate, EndDate, "");
string[] columnNames = dt.Columns.Cast<DataColumn>().Select(x => x.ColumnName).ToArray();
foreach (string dc in columnNames)
{
List<string> labels = new List<string>();
List<double> lst_dataItem_1 = new List<double>();
for (int j = 0; j < dt.Rows.Count; j++)
{
if (dc == "date")
{
labels.Add(dt.Rows[j]["date"].ToString());
//iData.Add(labels);
}
else
{
lst_dataItem_1.Add(Convert.ToDouble(dt.Rows[j][dc].ToString()));
}
}
if (dc == "date")
iData.Add(labels);
else
iData.Add(lst_dataItem_1);
//}
}
return iData;
}
Source:stackexchange.com