I'm new in highcharts. I try to use it in my asp.net MVC 4 project. I want to pass information relative to charts from controller to view. I've used session to pass differents categories, the chart appear but without categories. Is there any solution to pass information from controller to view?
this is part of my code:
view:
<script type="text/javascript">
$(function () {
$('#divStat').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: ''
},
xAxis: {
categories: '#Session["affiche"]',
title: {
text: null
}
},
[...]
});
</script>
controller:
public ActionResult Stat()
{
String[] list = new String[5];
list[0] = "Africa";
list[1] = "America";
list[2] = "Asia";
list[3] = "Europe";
list[4] = "Oceania";
Session["affiche"] = list;
return PartialView("Charts");
}
You have to put "," among the strings to make javascript understand that is an array
#{
string[] theList = (string[])Session["affiche"];
string javascriptArrayString = "";
foreach(string str in theList){
javascriptArrayString += "'"+ str +"',";
}
javascriptArrayString = javascriptArrayString.Substring(javascriptArrayString.Length,javascriptArrayString.Length-1);
}
then:
categories: [#javascriptArrayString],
and the html result will be like :
categories: ['Africa','Asia','America','Europe','Oceania'],
this is a bit rough coding , but i think you'll get the point.
Related
I have a Map that looks like this
{
title: "Hello world",
images: [
{ url: "http://example.com/image1" },
{ url: "http://example.com/image2" },
{ url: "http://example.com/image3" }
]
}
and I need a List<String> of the images that looks like this
[
"http://example.com/image1",
"http://example.com/image2",
"http://example.com/image3"
]
My current code looks like this
List<String> images = [];
if( map['images'] is List<dynamic> ) {
map['images'].forEach((v) {
if (null != v['url'])
images.add(v['url']);
});
}
It works good, but I am curious if there is a one-liner that would accomplish the same thing in a neat (and error safe) way?
var list = map['images'].map((innerMap) => innerMap['url']).toList()
I guess you are looking for something like this:
var images = map['images'].where((m) => m['url'] != null).map((value) => value['url']).toList();
First we select all the items from map that do not contain a null field for url. Then we map these url values to a new List.
I want to bind a KendoGrid to an object array so that it reflects what ever the user enters. The object will have two fields ExceptionName and ExceptionType. ExceptionType needs to be a dropdown of 5 items (this is working). The ExceptionName will be free text.
If I double click on the kendo grid, I can edit, but it does not reflects in the object. Same thing for Delete & new row. (So I think I am doing something wrong in the binding or in the declaration of the object)
Below, find a snippet of my code:
Object array:
var authorizationInformation = [{
id:1,
exemptionName: "",
exemptionType: "Unknown"
}];
KendoGrid:
$("#AuthorizationGrid").kendoGrid({
columns: [{
field: "exemptionName", title: "Exemption Name"
},
{
field: "exemptionType",
title: "Exemption Type",
template: function (value) {
for (var i = 0; i < exemptionTypeList.length; i++) {
if (exemptionTypeList[i].exemptionType == value.exemptionType) {
return exemptionTypeList[i].description;
}
}
},
editor: function (container) {
var input = $('<input id="exemptionType" name="exemptionType">');
input.appendTo(container);
// initialize a dropdownlist
input.kendoDropDownList({
dataTextField: "description",
dataValueField: "exemptionType",
dataSource: exemptionTypeList
}).appendTo(container);
}
},
{
command: "destroy"
}],
dataSource: authorizationInformation,
editable: true,
scrollable: false,
});
Any suggestion would be appreciated.
Thanks, M
Senario is:
mcalendar: model,
mevent: model,
relationship: mcalendar has_many mevents,
in the mcalendar.show route I have:
model: function(params) {
return this.store.find('mcalendar', params.mcalendar_id);
},
what I want to do is:
to have a function in the mcalendar.show route to return all mevents of mcalendar in the form of an array. Something like this:
A HOOK(maybe afterModel): function(){
//return all mevents like:
return {
events: Ember.A([
{
title: mevent.get('title'),
start: mevent.get('start')
}])
the purpose is to use this array for feeding fullCalendar. I have tried some ways but none of them was successful.
Ember cli: 0.2.7
Thanks
are your mevents returned in the payload when requesting mcalendar? if so, you could do this in the setupController hook instead like...
setupController: function(controller, model) {
controller.set('events', model.get('mevents').toArray());
}
afterModel: function () {
var _this = this;
var model = this.modelFor(this.routeName);
return model.get('mevents').then(function(mevents) {
var allMevents = mevents.map(function(mevent){
return {
title: mevent.get('title'),
start: mevent.get('start')
};
});
_this.controllerFor('mcalendars.show').set('events', allMevents);
});
},
I'm working on a website, asp.net MVC kind of thing. On the home page, I have two alternate views. One is a jquery FullCalendar, and one is an index view, both displaying events from a database.
I can currently change the month being viewed in either, but I want to be able to link them up, so that for example changing to view april 2013 in the calendar and then clicking "index view" will take me to april 2013 in the index view, rather than the default.
My "GetEventsForCalendar" method is as follows:
[HttpPost]
public virtual ActionResult GetEventsForCalendar(long start, long end)
{
var startDateTime = start.ToDateTime();
var endDateTime = end.ToDateTime();
var listOfEvents = eventRepository.List.Where(e => e.ToDate >= startDateTime
&& e.FromDate <= endDateTime).ToList() .Select(eventSerialiser.SerialiseForFullCalendarJS);
return Json(listOfEvents);
}
But I can't find anywhere in the codebase where it is given these parameters. The only place the function is specified is in the calendar partial view scrips section:
#section scripts {
#Scripts.Render(Links.Bundles.Scripts.calendar)
#Scripts.Render(Links.Bundles.Scripts.events_calendar)
<script type="text/javascript">
$(document).ready(function() {
SohoHouse.EventsCalendar.setup("#Url.Action(MVC.Events.GetEventsForCalendar())");
})
</script>
}
I think the details of the month being viewed are persisted in a cookie, but I'm not sure how to access this from my index view.
If you need any other code then please ask, I'm very new to programming and stack overflow so I'm still not sure how to ask questions well :)
Managed to get this working in the end: abandoned the idea of a seperate view for the index, and instead used the jquery to create a table with a list view of the events. Then used a button to toggle between the two. For reference, the calander.js looked something like this:
var report = $("#report");
var calendar = $("#calendar .fc-content");
report.hide();
$("#toggle-view").click(function() {
calendar.toggle();
report.toggle();
$("#calendar").fullCalendar("refetchEvents");
$("#calendar").fullCalendar("render");
updateToggleButtonText();
});
function updateToggleButtonText() {
$("#toggle-view").text(report.is(":visible") ? "View Calendar" : "View List");
}
function setUpCalendar() {
$("#calendar").fullCalendar({
events: {
url: getEventsUrl,
type: "POST",
eventDataTransform: addReportRow
},
timeFormat: "H:mm{ - H:mm}",
allDayDefault: false,
eventBorderColor: "gray",
header: {
left: "prev,next",
center: "title",
right: null
},
weekMode: "variable",
loading: function(isLoading) {
if (isLoading) {
$("table#report > tbody:last").empty();
}
},
allDaySlot: false
});
}
function addReportRow(data) {
var calendarMonth = $("#calendar").fullCalendar("getDate").getMonth();
var startDate = new Date(data.start);
var endDate = new Date(data.end);
if (startDate.getMonth() > calendarMonth || endDate.getMonth() < calendarMonth) {
return null;
}
var tableDetails = [
data.title,
$.fullCalendar.formatDate(startDate, "dd MMMM yyyy"),
$.fullCalendar.formatDate(endDate, "dd MMMM yyyy"),
data.published ? "Published" : "Not Published"
];
var row = $("<tr></tr>");
for (var i = 0; i < tableDetails.length; i++) {
row.append($("<td></td>").text(tableDetails[i]));
}
$("table#report > tbody:last").append(row);
return data;
}
function gotoDateFromCookie() {
var calendarDate = $.cookie("calendarDate");
if (calendarDate !== null && calendarDate !== "Invalid Date") {
$("#calendar").fullCalendar("gotoDate", new Date(calendarDate));
$.cookie("calendarDate", null);
}
}
function storeDateAsCookie() {
var calendarDate = $("#calendar").fullCalendar("getDate");
$.cookie("calendarDate", calendarDate);
}
window.eventDropdownChanged = function() {
location.reload();
};
};
Hello Every One!!!
I added codes for getting unique dropdownlist in the columns of jqgrid .
Dropdownlist is coming but it is coming for the first page of the jqgrid means that dropdownlist has the unique values of the first page of the jqgrid whereas i need all the unique values of the whole Jqgrid..
Below I am posting my codes...
grid = $("#gridId");
getUniqueNames = function (columnName) {
var texts = grid.jqGrid('getCol', columnName), uniqueTexts = [],
textsLength = texts.length, text, textsMap = {}, i;
for (i = 0; i < textsLength; i++) {
text = texts[i];
if (text !== undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts;
},
buildSearchSelect = function (uniqueNames) {
var values = ":All";
$.each(uniqueNames, function () {
values += ";" + this + ":" + this;
});
return values;
},
setSearchSelect = function (columnName) {
grid.jqGrid('setColProp', columnName,
{
stype: 'select',
searchoptions: {
value: buildSearchSelect(getUniqueNames(columnName)),
sopt: ['eq']
}
}
);
};
This function i have called like this...
setSearchSelect('extension');
grid.jqGrid('setColProp', 'Name',
{
searchoptions: {
sopt: ['cn'],
dataInit: function (elem) {
$(elem).autocomplete({
source: getUniqueNames('Name'),
delay: 0,
minLength: 0
});
}
}
});
setSearchSelect('username');
grid.jqGrid('setColProp', 'Name',
{
searchoptions: {
sopt: ['cn'],
dataInit: function (elem) {
$(elem).autocomplete({
source: getUniqueNames('Name'),
delay: 0,
minLength: 0
});
}
}
});
In between these two code snippets I am loading data into jqgrid locally using Ajax call.
Any help will be heartely appreciated..
Thanx in advance..
I belive getCol will return only currently loaded data from jqgrid (for defined column).
Because at first you load just first page, autocomplete has no way of knowing unique values of column for more than that!
You will have to either load all pages at once (small dataset) or
fill autocomplete from database.