I am a beginner in ASP .net Visual Studio. Following Highchart's tutorial of getting started, I have created a basic MVC application with a basic chart.
Now, I want to bind the data to the database model to generate dynamic data. How do I do that? I have written psuedocode below. Thank you for your help!
<script>$(function () {
$('#line').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [
#foreach (var item in Model){ #psuedocode: pull out data from model so it display data as example below }
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
You need to use the #: operator to revert razor to text mode to iterate your model into json data.
series: [
#foreach (var item in Model)
{
#:{ name: "#item.Name", data: [
#foreach(var d in item.data)
{
#:parseInt(#d.value),
}
},
}
]
Here is a link from Scott Guthrie talking about the #: and #<text> syntax.
Related
I am new to tabulator and i wanted to know why this is isn't working my data response is like this
[{"UserId":2,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"4:37","Date":"2018-05-15T08:35:20"},
{"UserId":14,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"0:47","Date":"2018-05-15T08:36:10"},
{"UserId":8,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"1:20","Date":"2018-05-15T08:37:47"},
{"UserId":16,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"2:55 (Nuk ka Deklaruar Pauze)","Date":"2018-05-15T08:37:52"},
{"UserId":11,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"2:54 (Nuk ka Deklaruar Pauze)","Date":"2018-05-15T08:38:03"},
{"UserId":1,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"2:38 (Nuk ka Deklaruar Pauze)","Date":"2018-05-15T08:49:23"}]
(the names are all the same for purpose of privacy)
And this is my javascript
<script type="text/javascript">
var table = new Tabulator("#MyTable", {
ajaxURL: "#Url.Action("WorkingHours", "Dashboard")",
height: "292px",
layout: "fitColumns",
pagination: "local",
paginationSize: 20,
movableColumns: true,
columns: [
{ title: "UserId", field: "Id", formatter: "star", align: "center", width: 100 },
{ title: "Name", field: "name", width: 200 },
{ title: "Working Minutes", field: "progress", sorter: "number" },
{ title: "Working Hours", field: "progress" , sorter : "number" },
{ title: "Date", field: "dob", align: "center", sorter: "date" },
],
});
I checked the console and the response and it said this : Data Loading Error - Unable to process data due to invalid data type Expecting: array Received: string
and then the data that is in the begging of the question. And yes me method returns a string but it is json.
The data you are returning is in the format needed for an Un-Paginated Table
For paginated data it needs the following format:
{
"last_page":15, //the total number of available pages (this value must be greater than 0)
"data":[ // an array of row data objects
{id:1, name:"bob", age:"23"}, //example row data object
]
}
Full documentation on how to use remote pagination can be found on the Tabulator Website
I have have the following JSON data that i'm retrieving from a database. How do I go about getting the value of the label property?
{
elementAttributes: {
"layout": "row"
},
fieldGroup: [
{
type: "select",
key: "title",
className: "flex-100 layout-column",
templateOptions: {
label: "Title *",
multiple: false,
required: true,
disabled: false,
labelProp: "desc",
valueProp: "id",
options: [
{ desc: "Mr", id: 1 },
{ desc: "Mrs", id: 2 },
{ desc: "Ms", id: 3 },
{ desc: "Miss", id: 4 },
{ desc: "Dr", id: 5 }
],
description: ""
}
}
]
}
Just use Newtonsoft.Json, there is very good example:
http://www.newtonsoft.com/json/help/html/deserializeobject.htm
To generate class, u can use:
http://json2csharp.com/
I have a hierarchical data grid that recieves data from a json call fine. But I have problems with the child band. I don't know if it is the code or how the data is presented within the list from the json call.
<table id="hierarchicalGrid"></table>
<script type="text/javascript">
var data = #MyData.AsRawJson()
$("#hierarchicalGrid").igHierarchicalGrid({
dataSource: data,
odata: true,
initialDataBindDepth: -1,
autoGenerateLayouts: true,
autoGenerateColumns: false,
primaryKey: "Username",
columns:
[{ key: "Username", headerText: "Username", dataType: "string" },
{key: "EmplID", headerText: "EmplID", dataType: "string" },
{key: "Comment", headerText: "Comment", dataType: "string" }],
features:
[{name: 'Paging',
type: "local",
pageSize: 50},
{ name: "Resizing"},
{ name: 'ColumnMoving' }],
columnLayouts: [
{
key: "GroupName",
primaryKey: "GroupName",
foreignKey: "GroupMembers",
autoGenerateColumns: false,
columns: [
{ key: "GroupName", headerText: "UserName", dataType: "string", width: "100px" },
{ key: "GroupDescription", headerText: "GroupDescription", dataType: "string", width: "100px" },
{ key: "GroupMembers", headerText: "GroupMembers", dataType: "string", width: "100px" }
],
features: [
{
name: "Sorting",
type: "local"
}]
}]
});
</script>
The data comes as follows
[username],[EmplID],[comment],[GroupName],[GroupDescription],[GroupMembers]
with UserName,EmplID, and Comment repeating with the same values per username while values for GroupName, and GroupDescription continue to be unique. GroupMembers has the same data as UserName. All of the data is coming from a view, which is a join from Users ([username],[EmplID],[comment]) and Groups ([GroupName],[GroupDescription],[GroupMembers]). I would like a single row for UserName,EmplID, and Comment as if it were a groupby then expanding the child band would show [GroupName] and [GroupDescription].
When the initial grid opens, I get repeating rows of [username],[EmplID],[comment] and when I try to expand the child band, it throws a errormessage displaying:
Unable to get value of the property '_injectGrid': object is null or undefined.
For what its worth, this is written on C# Razor pages using ServiceStack to Bootstrap. Any and all help is greatly appreciated.
I have a report which generates chart.I am showing this report on pre defined data set.
First Image is from chrome browser.Second is from firefox.Firefox shows the correct data. But chrome is showing incorrect. you can see the month order.
I went through This question in StackOverflow.
still I got the result similar to first image.
anyone came up with these sort of issue ??
setDataSource: function (jsonData) {
myDataSource = new kendo.data.DataSource({
data: jsonData,
group: [{ "field": "Series" }],
sort: [{ "field": "Series", dir: "asc" }, { "field": "SortOrder", dir: "asc" }],
schema: {
model: {
fields: {
Category: {
"type": "string"
},
Series: {
"type": "number"
},
Value: {
"type": "number"
}
}
}
}
});
},
setupChart: function (id) {
$("#chart" + id).kendoChart({
dataSource: myDataSource,
title: {
text: "#Lables.LBL_PlanningProjection"
},
legend: {
position: "top"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line"
},
series: [{
field: "Value"
}],
valueAxis: {
labels: {
format: "{0:N0}"
},
line: {
visible: true
},
majorUnit: 10000
},
categoryAxis: {
field: "Category",
labels: {
template: "#: value #",
rotation: 0
},
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}",
template: "#= series.name #: #= value #"
}
});
}
This is a problem occurs with Chrome's implementation of Array.sort;
You can fix it by sorting the data source explicitly here.
And as I can see in your code, there is a field named SortOrder here. I think in the original code that you have get this, used that field to sort the dataset explicitly.
Check your Controller or Back-End code inorder to find the SortOrder property. If not you can add that in your back-end logic to sort your dataset explicitly according to the month order.
As I can see you can't do a explicit sort here by adding following line.
sort: [{ "field": "Series", dir: "asc" }, { "field": "Category", dir: "asc" }],
Because it 'll get your data set sorted as the first image.
Apr , Aug, Dec , Feb , Jan , Jul , Jun, Mar , May, Nov , Oct, Sep
I think that's why the original code has a property called SortOrder.
I have searched high and low for this problem... and I found a lot of people have the same problem but none have a definite solution...
Basically I have a grid on extjs... it gets data from sqldb. It loads fine using json. "But"... when trying to implement paging, this is where it gets messy...
pagesize is set to 5... which means first page should only show 5 records, but my grid shows the entire records
Even though the "next" button exists, it does not work technically because the entire record is already there on the first page
I set page.loadPage(2)... and the message says "Displaying Second Page", but it's actually displaying the entire records
The page number in "Page _ of 6" is always blank. see below image...
Below is my store...
var store = Ext.create('Ext.data.Store', {
storeId: 'myData',
pageSize: 5,
autoLoad: true,
method: "POST",
remoteSort: true,
fields: [
{ name: 'Q1', type: 'int' },
{ name: 'Q2', type: 'int' },
{ name: 'Q3', type: 'int' },
{ name: 'Q4', type: 'int' },
{ name: 'Q5', type: 'int' },
{ name: 'Improvements', type: 'string' },
{ name: 'Comments', type: 'string' }
],
sorters: [
{
property: 'Q1',
direct: 'ASC'
}
],
proxy: {
type: 'ajax',
url: 'GridView/writeRecord',
reader: {
type: 'json',
totalProperty: "count",
root: "myTable"
}
},
autoLoad: { params: { start: 0, limit: 5} }
});
this.grid = Ext.create('Ext.grid.Panel', {
title: ' ',
trackMouseOver: true,
disableSelection: true,
autoHeight: true,
store: store,
loadMask: true,
height: 500,
width: 800,
renderTo: Ext.getBody(),
columns: [
{ header: 'Q1',
sortable: true, dataIndex: 'Q1'
},
{ header: 'Q2',
sortable: true, dataIndex: 'Q2'
},
{ header: 'Q3',
sortable: true, dataIndex: 'Q3'
},
{ header: 'Q4',
sortable: true, dataIndex: 'Q4'
},
{ header: 'Improvements', flex: 1,
sortable: true, dataIndex: 'Improvements'
},
{ header: 'Comments', flex: 1,
sortable: true, dataIndex: 'Comments'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
preprendButtons: true,
displayMsg: 'Displaying Surveys {0} - {1} of {2}',
emptyMsg: "No Surveys to display"
})
});
and this is my JSON... it has actually 30 records but I trimmed it down...
{
"count": 30,
"myTable": [
{
"Q1": "1",
"Q2": "1",
"Q3": "1",
"Q4": "1",
"Improvements": "",
"Comments": "1"
},
{
"Q1": "3",
"Q2": "2",
"Q3": "2",
"Q4": "2",
"Improvements": "This is A very long comment. What do you think?",
"Comments": "Agreed"
},
{
"Q1": "4",
"Q2": "2",
"Q3": "4",
"Q4": "3",
"Improvements": "Hello2",
"Comments": "Hello2"
},
{
"Q1": "3",
"Q2": "2",
"Q3": "2",
"Q4": "1",
"Improvements": "Hello4",
"Comments": "Hello4"
}
]
}
Also if it helps this is how I get my Json
string sqlquery = "SELECT Q1, Q2, Q3, Q4, Improvements, Comments FROM ITable";
conn.Open();
SqlDataAdapter cmd = new SqlDataAdapter(sqlquery, conn);
SqlCommand comd = new SqlCommand(sqlquery, conn);
DataSet myData = new DataSet();
cmd.Fill(myData, "myTable");
comd.CommandText = "SELECT COUNT(*) FROM ITable";
Int32 count = (Int32)comd.ExecuteScalar();
comd.ExecuteNonQuery();
conn.Close();
var results = (new
{
TotalNumber = count,
myTable = myData
});
return JsonConvert.SerializeObject(new { count=count, myTable = myData.Tables[0] }, Formatting.Indented,
new JsonSerializerSettings
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore
});
I know my Json is right... and it reads 30 records because is says "Displaying _ of 30"... I just have no clue what I am doing wrong... It cannot be a browser issue... why is it throwing up all in one page? anybody?
When using the paging toolbar, the server is supposed to page the data for you. You don't feed it all of the records at once.
The paging toolbar will send requests asking for each page, and the server is supposed to return just the records for that page.
If you want to page with in memory data (fetching them all at once, you have to implement your own, or use one of the extensions.
See the section titled "Paging with Local Data" at http://docs.sencha.com/ext-js/4-1/#!/api/Ext.toolbar.Paging
Therefore, to use it as intended, you have to change your server code to account for the start and limit HTTP parameters