highcharts now showing with activemq's amq - highcharts

I am trying to modify the activemq webapp to dynamically visualize data using highcharts. Specially, the following code works fine where chart1.js does the basic highchart line draw. As soon as I uncomment amq.js, the chart stops showing up. It is a known issue?
<html>
<body>
<!-- <script src="C:/progress/fuse-message-broker-5.3.0.1/webapps/demo/Highcharts-3.0.6/js/highcharts.js"></script> -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"/>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript" src="chart1.js"></script>
<!--- <script type="text/javascript" src="../amq/amq.js"></script>
<script type="text/javascript">amq.uri='../amq';</script>
--->
</body>
</html>
thanks

The old web console in ActiveMQ is deprecated and being replaced with the new HTML5 based hawtio (http://hawt.io/) - such as in the new ActiveMQ 5.9 release. The old web console is to be removed in a future release of ActiveMQ.
You can build custom plugins for hawtio, or help hack on the project to improve it in areas you like.
hawtio also works with older releases of ActiveMQ such as 5.8 etc.

Related

Highcharts maps (even samples) don't work

Running MacOS 10.13.5 and Windows 10 in Parallels. Load Highcharts samples from https://www.highcharts.com/maps/demo/color-axis ... the map background is gray and the states only fill in as I mouse over them.
This happens in both MacOS and in Windows. Screenshot is from Highcharts site.
EDIT Per comment I edited to look like this (since I display both charts and maps from same module):
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<!-- USE MASTER BRANCH OF HIGHCHARTS MAPPING AND NOT RELEASE VERSION **** TEMP *** https://stackoverflow.com/questions/51051239/highcharts-maps-even-samples-dont-work
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
-->
<!--
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
-->
<script src="https://github.highcharts.com/master/maps/highmaps.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/data.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/exporting.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
But I get error 16. I assume I should pull all the libs from github but it looks like as well some of the names have changed?
It seems that this bug is already fixed on master branch of Highcharts:
<script src="https://github.highcharts.com/master/maps/highmaps.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/data.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/exporting.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/offline-exporting.js">
Live demo: https://jsfiddle.net/BlackLabel/teazgj5r/
Fix will be included in the next release of Highmaps.

http://localhost:52951/app/app/app.module.js 404 (Not Found) scripts in layout not working

Im trying to add angular 5 to my mvc project for almost two days now and its not working. When I load the page I get these errors
my scripts view is an .ascx file and the scripts look like this
<!-- Polyfill(s) for older browsers -->
<base href="/">
<script src="<%: Url.ContentWithTimestamp("~/node_modules/core-js/client/shim.min.js") %>"></script>
<script src="<%: Url.ContentWithTimestamp("~/node_modules/zone.js/dist/zone.js") %>"></script>
<script src="<%: Url.ContentWithTimestamp("~/node_modules/systemjs/dist/system.src.js") %>"></script>
<script src="<%: Url.ContentWithTimestamp("~/systemjs.config.js") %>"></script>
<script>
SystemJS.import('<%: Url.ContentWithTimestamp("~/app/main.js") %>').catch(function(err){ console.error(err); });
</script>
Edit: This is the project I put angular in.
Here is one of the packages (dont want to upload img of everyone.They are there.)
The problem was in my main.js. This line:
var app_module_1 = require("./app/app.module");
should be like this:
var app_module_1 = require("./app.module");

How to make jquery.tablesorter work with DocPad?

I am trying to use tablesorter.js with DocPad. I have added the required lines to docpad.coffee to load the css and js for the tablesorter, and I have added the call to tablesorter() in the page where I have the the table I want to sort.
However, the resulting tables do not sort properly for two reasons: All scripts are deferred (defer="defer") and the call to tablesorter() appears before the scripts are loaded, like this:
</tbody></table></p>
<script>
$(document).ready(function(){$("#mytable").tablesorter();})
</script></div>
</article>
...
<!-- Scripts -->
<script defer="defer" src="/vendor/jquery/1.10.2/jquery.min.js"></script>
<script defer="defer" src="/vendor/jquery/tablesorter/jquery.tablesorter.js"></script>
<script defer="defer" src="/vendor/modernizr/2.6.2/modernizr.min.js"></script>
<script defer="defer" src="/vendor/twitter-bootstrap/dist/js/bootstrap.min.js"></script>
<script defer="defer" src="/scripts/script.js"></script>
</body>
If I delete the defer stuff and move the tablesorter() call down, it works fine:
<!-- Scripts -->
<script src="/vendor/jquery/1.10.2/jquery.min.js"></script>
<script src="/vendor/jquery/tablesorter/jquery.tablesorter.js"></script>
<script src="/vendor/modernizr/2.6.2/modernizr.min.js"></script>
<script src="/vendor/twitter-bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/scripts/script.js"></script>
<script>
$(document).ready(function(){$("#mytable").tablesorter();})
</script>
</body>
I need to get rid of the defer setting and I need to call tablesorter() after the scripts have been loaded. How can I do this in DocPad 6.59.6?
I found a fix and a workaround to get tablesorter working.
The sequence issue: In order to load all Javascript before the call
to tablesorter(), I moved the scripts section in the default layout
(src/layouts/default.html.eco) to be loaded as part of the <head/>,
not as the lats part of the <body/> as it originally was.
The defer issue: I couldn't figure out how to modify Docpad's
#getBlock('scripts') to not include the defer="defer" setting.
The workaround was then to not use getBlock and instead just
hardcode the references to the script files.
In summary, going from this:
<html>
...
<body>
...
<%- #getBlock('scripts')...
</body>
</html>
to this:
<html>
<head>
...
<script src="/vendor/jquery/...
...
</head>
<body>
...
</body>
</html>
fixed the problem. I now have a maintenance problem that I have to maintain the list of scripts within the layout (instead of using the scripts: section in docpad.coffee); I can live with that.

Google Map in jQuery Mobile page, zoom feature not rendering properly

I'm building a jQuery Mobile page that incorporates a Google map (API v3). So far I have been successful displaying the map and implementing a lot of functionality. My problem is that the zoom feature on the google map does not render properly (it looks broken up and pixely).
The code at the bottom of the page demonstrates a basic implementation of a Google map in jQuery Mobile. If you test it on the latest version of Firefox you should see the zoom problem. Notice if you comment any of the three libraries below the zoom feature renders properly but the jQuery mobile functionality is lost.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
The research I've done indicates that the libraries implemented in these examples might fix the issue, but it will require me re-writing a large number of methods. Can any one advise me on a simpler way to fix this.
Sample Code:
<head>
<style type="text/css">
#map_canvas {
height: 375px;
width: 550px;
padding:10px;
border:1px solid gray;
margin:10px;
}
</style>
<link rel="stylesheet" href="../_assets/css/jqm-docs.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"
type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body onload="initialize()">
<script type="text/javascript">
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(37.332619, -121.88440100000003),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
</script>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div id="map_canvas"></div>
</div>
</div>
</body>
I am using the plugin you mentioned (http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html) and recommend you to use this with jQM.
The plugin also struggles with some rendering failures on jQM and recommends to refresh all maps on pageshow.
Leads to code like:
jQuery(document).bind('pageshow', function(e, data) {
var page = jQuery(e.target);
page.find('.gmap').gmap('refresh');
});
You should try to do this somehow without the plugin.

jQuery 1.4 - ui Tabstrip with AJAX

So I have elected to play with jQuery 1.4 - and I am noticing something right off. This is not a real project ,so the code here should be taken with a grain of salt. I wrote it to reproduce the error.
Essentially, try to follow the jQuery UI Tabstrip AJAX loading example - you will get awkward results. For instance, the tabs link as ...
ui-tabs-[object%20Object]
Any idea what this is, and how to resolve it?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link href="css/ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("#tabstrip").tabs();
});
</script>
</head>
<body>
<div id="tabstrip">
<ul>
<li>Google</li>
<li>Microsoft</li>
<li>Java</li>
<li>ASP.NET MVC</li>
<li>Mozilla FireFox</li>
</ul>
</div>
</body>
</html>
Wait for the new release of jQueryUI on January 28th. jQueryUI 1.7.2 expects certain behavior from jQuery that has been changed in 1.4.
jQuery 1.4.x is not compatible with jQueryUI 1.7.2
I run into the same problem with tabs that call ajax.
You can wait a few days until they release stable jQueryUI 1.8 or get the 1.8 RC2 now.
I've tested it with jQuery 1.4.2 and is working.

Resources