FullCalendar integrated with HighCharts - highcharts

Has anyone successfully integrated HighCharts with FullCalendar?
Currently I display data in a monthly view using text. I would like to replace them with pie charts generated by the HighCharts js library.
The FullCalendar uses a EventSource to load the events. I send JSON serialized data from my MVC controller. To enable HTML in the Event Title I use the solution mentioned here
I tried using the DotNet.HighCharts library and returning the chart.ToHtmlString() as the event title, but I keep getting the js error below:
Unhandled exception at line 117, column 483 in
/Scripts/Highcharts-2.3.5/js/highcharts.js
0x800a138f - JavaScript runtime error:
Unable to get property 'length' of undefined or null reference

I got this to work. The problem was with the DotNet.HighCharts library. The chart script that is was returning (chart.ToHtmlString()) had issues with the latest version of the HighCharts JS scripts. Instead I removed the DotNet.HighCharts library and constructed the Chart JS script in my controller and it works fine.

Related

Can't render charts in angular 6

I ran the highcharts demo app and it runs fine.
I created a variable called chartOptions in app.component.ts. This variable holds the json which I got from the highcharts cloud.
When I bind this variable to options in Highcharts, the chart is not rendering. There are no errors in the console as well. I am able to render chart using javascript ( $('#wind-rose').highcharts(json from the above link) )
Am I missing something?

JQuery mobile - Dropdown dynamic options are not getting displayed

I am calling a AJAX web service, In the success callback function, I am adding options to a Dropdownlist dynamically. We are using JQuery Mobile in this application.
$("#mylist").append(
$('<option id="myoption' + index + '"></option>').val(myobject.id).html(myobject.description)
);
});
$('#mylist').trigger('change');
But, these options are not getting displayed immediately. Only when i click on any of other static options, Dynamic Options are getting visible.
I saw in few threads, suggesting to use trigger() or refreshmenu. But none of them are working. Is it due to callback function I am using?
Thank you ezanker,
.selectmenu('refresh',true) is working. In my case, I was referring JQuery JS file twice. Once in higher version and second in lower version. It took lower version. In the lower version, selectmenu is not supported.
As soon as I remove the second incorrect JS reference, it worked.

Show message "Loading..." in Highcharts on loading data from array

I am using highcharts to create charts on my site, it works fine. how i display "loading" message until the chart loading on my page. data loaded dynamically from rails array object not a url.
You haven't specified loading option in your highchart configuration. To use showloading() you do need to have this configuration defined. It uses some default time duration to show loading screen. here a complete option url http://api.highcharts.com/highcharts#loading.hideDuration that might help you.

Grails: getting DOM string from g.render?

I need to get the DOM string of a template. However, a highCharts chart is added to the template after it is loaded. When I use g.render, I do not get the chart in the resultant string. Basically, the javascript doesn't run. Can anyone help?
If some kind of javascript has to run on the client, before the server is doing something else, you have to use ajax to make a callback from the client. See the grails ajax docs for code examples.

Is there an alternative to using Gmaps.loadMaps when loading HTML/JS that contains Gmaps4Rails via AJAX?

I'm using Gmap4Rails in the body of a form that is loaded via Ajax. There are custom fields in the form and some of them may be location pickers that I have working on a non-Ajax version of the form.
With the Ajax version of the form, I'm getting "Gmaps.my_map_id" undefined errors.
In the non-Ajax version of the form, I call Gmaps.loadMaps via JavaScript in the HTML page head for "window.onload" as is the normal practice with Gmaps4Rails.
However, this won't work in the context of Ajax, as the map(s) haven't been defined at window.onload time.
In my form, I also define a callback per Gmaps map object. This is what seems to be failing with the "undefined" error, even when I do a "Gmaps.loadMaps();" script directly before the first callback is defined in the code that is loaded by Ajax.
Basically it goes like this in code order:
in a loop, gmaps4rails partial is called to output each map custom field
after that loop finishes, Gmaps.loadMaps() is called once
in another loop, each Gmaps map object has the JS for its callback added
Any suggestions on how to get this working?
UPDATE: possibly only partly correct (i.e. I did have the problem that was outlined here, but calling Gmaps.loadMaps() still doesn't work).
2nd Update: I have had to alter the definition of the load_... to be on the Gmaps object and then alter Gmaps.loadMaps function accordingly. I've put in a pull request to the project at https://github.com/apneadiving/Google-Maps-for-Rails/pull/94.
The Gmaps.loadMaps() call wasn't the issue. So an alternative isn't necessary. The thing that was tripping me up is that in the partial enable_js was being called as false and the JavaScript that declares the new instance of the Gmaps4RailsGoogle and the function for loading it was not being called.
I have a custom version of the partial and in my case, even when enable_js (I interpret as "don't load javascript library files" for my app) is false, I still do the JavaScript that declares the new Gmaps4RailsGoogle instance and defines the load_... function.
That being said, the load_... function appears to be not working for me. It comes back with the following in my case:
TypeError: 'undefined' is not a function (evaluating 'window"load_" + key')
When I call the load_... function directly from the console (rather than the Gmaps.loadMaps call), I get a similar error:
"'undefined' is not a function (evaluating 'this.load_...()')"
Perhaps having to do with not having any markers declared? Any hints on that problem appreciated.
If I step through the steps in the load... function, the first bit that throws an error is .initialize(). Still investigating.

Resources