How to implement Dynamic data for chart in MVC? - javascript

Im new in ASP.NET MVC, im doing on my own project and i have some problems. I want to draw line chart from with data from database.
I hope you will understend me (bad english, sorry):
I have table of metals, after i click on specific one, i want to see chart that show me price of metal by date.
For example, i click on Copper;
PricePoint is my Controller, wich action shoud i call here ?
#Html.DisplayFor(modelItem => item.name)
I call DrawChart Action in PricePoint controller:
public ActionResult DrawChart()
{
return View();
}
In same controlller i create action that add data from database to json and return it.
public ActionResult Statistics(int ?id) {
// here i pull data from database to stats
return Json(stats,JsonRequestBehavior.AllowGet);
}
This is my view page where i want to show chart, DrawChart.cshtml file.
<script type="text/javascript">
$.get('#Url.Action("Statistics")', function(result){
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
result
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
});
</script>
When i click on metal, DrawChart action return view DrawChart.cshtml, then JavaScript run Statistics function and populate data for chart, is that how this works?
I have blank page, with no result, when i type in url: http://localhost:50101/PricePoint/DrawChart
When url is next, i see json data from database:
http://localhost:50101/PricePoint/Statistics
I dont know where is problem. When i put example data in script, like this
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
i see line chart as expected. Again, sorry for bad english, hope you can help me and i hope you understend my question.

I had a play with it and I managed to display the chart just fine. Here are a few things to watch out for that may be the cause of your problem:
1) your call to $.get('#Url.Action("Statistics")' is not passing in an id though you declared one on your action public ActionResult Statistics(int ?id). Considering it's nullable maybe you are prepared to serve a default set of data if no id is passed, but thought I'd mention in case that is what's affecting the logic of your database retrieval and affecting the results returned
2) I noticed that your link to the DrawChart action passed in new { id = item.ID } however this not captured on the server-side since your DrawChart action is missing the parameter, it should be something like : public ActionResult DrawChart(id). I understand this could've been for the sake of simplifying it just to post here and may not affect anything but thought I'd point it out
3) Be careful about what you are returning from the MVC action. The stats object in return Json(stats,JsonRequestBehavior.AllowGet); should be a C# array containing the properties value and year for each object in the array, so something like :
new[] {new Entry() {value = 20, year = 2008}, new Entry() {value = 10, year = 2009}};
If you just pass a string to the return Json() statement it won't work properly since it'll think it's just one long json string not a json array object.
If you want to return a string rather than an actual serialized c# collection then you can use something like : return Content(dataString, "application/json");
4) Case matters! Make sure that the json returned contains properties with names of year and value for each entry just as you declared in your morris object on the xkey and ykey values. This can be quite a subtle trap since return Json() will serialize your json objects exactly as they are declared in your classes and while the tendency in javascript code is to start variables and properties with lower-case in .Net properties are usually declared with upper-case such as public int Year { get; set; }
Conclusion:
I got it working by returning this code :
public ActionResult Statistics(int ?id) {
var data = new[] {new Entry() {value = 20, year = 2008}, new Entry() {value = 10, year = 2009}};
return Json(data,JsonRequestBehavior.AllowGet);
}
And on your Morris initialization code remove the array brackets from the data declartion so data : result and not data : [result]
Your first step to troubleshoot this is to look at what your Statistics method is returning. You can do this really easily by testing your web site in Chrome, for instance, and hitting F12 then choose the Network tab. Then Ctrl+F5 the page and find the call to the server in the results pane. Click on it and then choose Response and keep troubleshooting your method till it returns what you need.
If the data is in a wrong format and doesn't contain the keys that Morris expects Morris will throw an error saying Uncaught TypeError: Cannot read property 'match' of undefined . Keep trying till you make that go away and hopefully you should see your graph :)
PS: one last thing, I'd wrap the Morris init code in a $(document).ready() call

When i send data (values and dates) from function (manualy input), everything is ok, json file is populeted god, and i see chart, but when i send data from database, there is no chart but i see that json file is also populeted.
Here is code:
public class YearlyStat
{
public string year { get; set; }
public double value { get; set; }
}
public ActionResult Statistics(int? id)
{
//var result = db.pricepoints.Where(r => r.commodityID.Equals(id));
var items = from item in db.pricepoints
where (item.commodityID == id)
select item;
var stats = new List<YearlyStat>();
foreach (var item in items)
{
stats.Add(new YearlyStat
{
year = item.date_of_price.ToShortDateString(),
value = item.value
});
}
//but this work's
//string s = "2.2.2002";
//double v = 20.20;
//stats.Add(new YearlyStat { year = s, value = v });
//or
//stats.Add(new YearlyStat { year = "2.2.2002", value = 20.20 });
return Json(stats, JsonRequestBehavior.AllowGet);
}
Types are string and double in both cases...

Related

Firebase: startAt() is not filtering data stored with keys as hours since epoch

My data is stored with keys as hours since epoch. I want to get only slice of the data - so for example I want to specify that I want all data starting at 453615.
So far I got this code:
this.dbService.databaseRef.child('dev_trends/' + this.deviceUid)
.orderByKey()
.startAt('453615')
.get().then(dataTrends => {
const data = dataTrends.val();
console.log(data);
});
With the code above I get this results in my console:
My data model looks like this:
What should I change in my code so that I get the data from Firebase filtered?
I create the databaseRef variable inside a service with this code:
constructor(private db: AngularFireDatabase) {
//Set what happens when we read all devices
this.databaseRef = db.database.ref(); //Create databaseReference
}
Json of my data:
{"dev_trends" : {
"-MkMxxZXXzmKclgeGPde" : {
"H" : {
"453614" : "50;45",
"453615" : "50;50",
"453617" : "50;55",
"453630" : "51;60"
},
"T" : {
"453614" : "24;18",
"453615" : "23;17",
"453617" : "23;15",
"453630" : "22;10"
}
}
}}
Find out where the problem was:
The startAt() method was filtering data with keys H and T and
not the lists of data inside those keys.
Solution was to restructure the data model.
New data model:
Additional info:
I am not saying my solution is ideal - but for my specific problem it
will do the trick.
It will still require some additional work for me - so if anyone else has a better solution for this please post Your answer too :)

How to get int array with javascript in play framework template?

When I tried to pass a list to the template I got an error.
The list is defined like:
myList: List<Map<String,int[]>>
Now the data of myList is :
[{First Try=[1,0,0,1], Second Try=[1,1,2,2]}, {}]
I use chart.js to show a chart and so I need a int[] as data list.
my view:
#(myList: List[Map[String,Array[Int]]])
var list = #myList;
for(var i=0;i<list.length;i++){
var map = list[i];
for(var key in map){
myFunction(key,map[key]);
}
}
myFunction(string,array){
//I want directly use the array to the chart’s datasets
//others
var myChart = new Chart(chartid, {
type: 'bar',
data: {
labels: [“a”, “b", “c”, ”s”],
datasets: [{
data: array
}]
}
}
But I got error when I try to traversal the List (The error line shown with Chrome debug)
var out = [{First Try=[I#6e37161d, Second Try=[I#5788d8a9}, {}];
// “Uncaught SyntaxError: Invalid or unexpected token”.
I know when directly output array with
System.out.println(array);
in java it will happen with the string like [I#6e37161d, but I don’t know how to deal with it in javascript.How can I use this array?I will be grateful if anyone can help .
Thank you very much.
You can't convert the Java object directly to a Javascript variable like you're attempting to do.
var list = #myList;
That just takes myList.toString() and attempts to set that as a literal Javascript variable. You need to serialize your Java object to JSON first, then you can parse the JSON in Javascript. Like so:
// Java controller code
String myListJson = Json.stringify(Json.toJson(myList));
// Template
#(myListJson: String)
var list = JSON.parse("#myListJson");

populate dropdownlist from jsonresult using .each

I have a dropdown list that I need to dynamically populate based on the selection of another. It all works up to the point that I have to render the new data in the dropdown list after clearing the list first. The list clears, but then fails to populate the new data being returned from the controller. I am attempting to use .each for this.
Here's the controller method in question:
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult UpdateDocumentSubType(string DocumentType)
{
List<SelectListItem> DocumentSubTypeList = new List<SelectListItem>();
PropertyModel model = new PropertyModel();
int DocTypeID = 0;
//get DocTypeID
DocTypeID = model.GetDocTypeID(DocumentType);
//gets new document subtype list
DocumentSubTypeList = model.GetDocumentSubTypes(DocTypeID);
//return document subtype list
return Json(DocumentSubTypeList, JsonRequestBehavior.AllowGet);
}
As you can see, I'm returning a serialized json result of List.
On the view, I have the following:
$.ajax({
url: '#Url.Action("UpdateDocumentSubType","Document")',
type: 'GET',
dataType: "json",
data: { DocumentType: SelectedDocTypeText },
async: true,
success: function (data) {
var select = $("#Docs_DocumentSubTypeID");
select.empty();
$.each(data, function (index, item) {
select.append($('<option></option>').val(item).html(index));
});
}
});
This is where it all falls apart. The code hits select.empty(): and executes it successfully, but then as the "text" value of the SelectListItem, it instead provides the index element of the array of objects. Essentially, the tags render something like this:
<option value="[object Object]">1</option>
<option value="[object Object]">2</option>
<option value="[object Object]">3</option>
<option value="[object Object]">4</option>
I have verified that the data IS being passed. When I take the .each and put it in its own function, call that function, and add "debugger;" to it, I can see the data in the resulting "data" as four elements of [object, object].
As you may have guessed, JQuery isn't my strong suit, so any assistance would be appreciated. :)
First you should not be returning List<SelectListItem> in your UpdateDocumentSubType method - there is no point returning the extra properties of SelectListItem back to the client when you never use them. All you need to return is an anonymous object containing 2 properties, one for the option value, and one for its display text.
You have not shown the model,but assuming it contains properties say int ID and string Name, then it would be (say)
var data = db.YourTable.Where(...).Select(x => new
{
Value = x.ID,
Text = x.Name
};
return Json(data, JsonRequestBehavior.AllowGet);
The reason why your seeing value="[object Object]" is that your returning an array of complex objects so item in $.each(data, function (index, item) { is referring to an object containing properties Value, Selected, Text, Group etc. (i.e. the properties of SelectListItem), so you script needs to be
$.each(data, function (index, item) {
select.append($('<option></option>').val(item.Value).html(item.Text));
});
I am new as well so this might not be correct.
Try
$('<option></option>').val(item[index]).html(index));
or
$('<option></option>').val(item[0]).html(index));
instead of what you wrote.
I need some more information. Can you share the github repo?
I am working on something very similar and this is what I did:
(Look at render function from line 85 to 96)
https://github.com/stephenhu3/codepal/blob/development/js/youtubeComponent.js
It worked for me.

Overwriting Original Values In Collections

I am fetching data from database and storing it on $groups. It has different created_at for each entry.
I want to overwrite on created_at field in collection, just before returning it to the view, and have nice ->diffForHumans() version.
$groupsArray = $messages;
foreach($groupsArray as $key => $group) {
var_dump($groupsArray[$key]['created_at']); // works: 2015-10-17 21:55:46.000000'
var_dump($groupsArray[$key]['created_at']->diffForHumans()); // Error: A two digit month could not be found Data missing
$groupsArray[$key]['created_at'] = $groupsArray[$key]['created_at']->diffForHumans(); // Not Working
}
return $groupsArray->toJson();
If I change groupsArray = $messages->toArray();, the '// Error' bit of above chunk changes to Call to a member function diffForHumans() on string.
Eventually, I need to return it as json as it is ajax request. I want to overwrite on created_at, so I can use group[i]['created_at'] in javascript part in the view, after returning and get Carbon versions.
First, make sure 'created_at' is in your $dates array in your model.
Like described on http://laravel.com/docs/5.1/eloquent-mutators#date-mutators
Second, you can iterate and update over a collection by doing the following:
$messages->transform(function ($item, $key) {
$item->difference = $item->created_at->diffForHumans(); // 10 hrs ago
return $item;
});
$messages->toJson();
use &you can replace the original value !
foreach($groupsArray as &$key => &$group) {
var_dump($groupsArray[$key]['created_at']);
var_dump($groupsArray[$key]['created_at']->diffForHumans());
$groupsArray[$key]['created_at'] = $groupsArray[$key] ['created_at']->diffForHumans(); // Not Working
}

How to append database values to JSON data

I have a JSON which lists the values from database. Below is the JSON data of 2 rows from the database.
[{"Name":"P1","Description":"pd1","Value":"v1","Attribute":"a1"},{"Name":"P1","Description":"pd1","Value":"v2","Attribute":"a2"}]
database values are the result of a left join query. Only 'Value' and 'Attribute' fields are different. Can I append that fields to JSON instead of multiple sets of record? I know there is 'push' to do this, but I am unaware where and how to use this in my code. below is the code for fetching values from db and serializing the values.
GetProfileDataService GetProfileDataService = new BokingEngine.MasterDataService.GetProfileDataService();
IEnumerable<ProfileData> ProfileDetails = GetProfileDataService.GetList(new ProfileSearchCriteria { Name = strProfileName });
JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
string strSerProfileDetails = javaScriptSerializer.Serialize(ProfileDetails);
context.Response.ContentType = "text/json";
context.Response.Write(strSerProfileDetails);
Below is my getJSON
$(document).ready(function () {
$.getJSON('ProfileHandler.ashx', { 'ProfileName': 'Profile 1' }, function (data) {
$.each(data, function (k, v) {
alert(v.Attribute+' : '+v.Value);
});
});
});
Please help me here.
There are several things you can do.
Store value and attribute as arrays:
[{"Name":"P1","Description":"pd1","Value":["v1", "v2"],"Attribute":["a1", "a2"]}]
Or store them as a 'symbol'-separated string:
[{"Name":"P1","Description":"pd1","Value":"v1;v2"],"Attribute":"a1;a2"]}]
In order to use the first case, you'll have to try and figure out how to format the ProfileDetails in order to have javaScriptSerializer.Serialize parse it correctly. You will likely have to convert your data first in order for this to work (i.e. convert value and attribute to arrays).
For the second case to work you could modify your GetProfileDataService.GetList method so that values and attributes are merged to symbol-separated strings (something like this: GROUP BY to combine/concat a column)

Categories