Highcharts as spring boot service in AngularJS - angularjs

A noob here.
I am exploring the capabilities of AngularJS, Spring Boot and Highcharts.
I want to know if we can build following funtionality:
If I call pieExpenses.html it should just render a page with pie chart.
If call index.html, I should be able render other content along with pieChart (pieExpenses.html) inside it.
I was able to find example for functionality 1 using this project, but was confused with functionality 2.
Thanks in Advance

Related

AngularJS: Is it possible for me to use the codemirror along with AngularJS

I have a requirement where I have to let the user write some code from my application. I wanted to use Code Mirror library (https://codemirror.net/). My application is developed using AngularJS as the main framework with NO JQuery or any other libraries.
Is it possible for me to use the Code Mirror along with the AngularJS? If yes, can someone show light on how to do it?
Thanking you

AngularJs bootstrap and charts

I am working on a project that involves building a line chart. I am getting the data from a mysql DB. I want to know how its possible to use AngularJs and some bootstrap templates to accomplish this. I would very much appreciate it if there is a step by step way of explaining.
thank you in advance
Try using AngularJS service to read the data from your Back end server via HTTP REST API or url that returns json.
Then use nvd3-angular-directive library to show the chart e.g https://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html

Testing Highcharts with protractorjs/Selenium

I am using protractorjs to test a site built with angular.
The angular site generates a lot charts using Highcharts http://www.highcharts.com/.
I am finding it difficult to test these charts via protractorjs for EtoE testing.
Does anyone know a better way of testing Highcharts with
protractor or any other testing tools.
What I am basically looking is for checking whether the
-highchart was loaded on the page,
-checking if the toolstip show data from the JSON file
-The number of bars showing on the highchart have correct values fetched from the JSON.
- Extracting the Highchart JSON from the server response.
Thanks.
There aren't a ton of details here, but I use RSpec against an Angular project just like yours that also uses highcharts.
Your charts should be in a div somewhere with an id. In my app it's wrapped in .highcharts-container. You can wait on those to appear and assert against them.
There should be a class named .highcharts-tooltip that you can find and assert against a specific value as well.

Using AngularJS Library for Monitoring or Dashboard Pages

I am planning to develop my monitoring/dashboard pages for hardware devices like Cisco router/switch/controller using Angular JS Library.
My page contains graphs(line & area), Google maps, tables and some blocks (div with value)
Is it feasible to use Angular for monitoring data?
What are the advantages we can get by using Angular? since it is only monitoring we don't have to use 2 way binding.
I am looking for few points to justify why we need angularJS for monitoring/dashboard kind of pages rather than JQuery/Javascript.
Please let me know your thoughts and comments.
Thanks.
Using AngularJS is totally feasible.
Main advantages is that charts can be implemented as reusable components (AngularJS directives).
There is a project in development that allows building dashboard from arbitrary directives
Running Demo http://nickholub.github.io/angular-dashboard-app
Demo source code https://github.com/nickholub/angular-dashboard-app
Dashboard directive itself https://github.com/nickholub/angular-ui-dashboard
And here is example of visualizing data coming from WebSocket
https://github.com/nickholub/angular-real-time-charts
If your site is 100% static - and by that I mean that you do a request for a status page, and the page you get will never change before you do a new request - then angular might be a little unnecessary.
But if you want your status page to 'live', you could use socket.io to push new events and data to the client and let angular take care of the ui refresh.
There are some angular directives to work with graphs, but I have no experience using them.
Some pointers:
Node.js + socket.io + angular.js:
http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/
angular.js + charts: http://ngmodules.org/tags/charts

Amazing Slider and Angular JS

I am trying to find a solution for an image slider such as Amazing Slider and how to integrate it in my e-commerce web-app which I have developed using Angular JS. I want to have features such as lightbox and a slider with thumbnails underneath, and also video integration. I know its a lot to ask but its a shame that this very strong framework lacks (to my knowledge) a proper image viewer. Has anyone tried this integration before? Are there any other solutions. After doing a google search all I found is bootstrap UI and a gist for lightbox. But these are not anywhere near of what I am asking for. Please advise.
The reason AngularJS does not have such an inbuilt facility is that AngularJS was not meant to address such things. Its an application framework. It is not meant to be a UI framework.
Having said that, I am assuming you have the images you want to render in some sort of collection in AngularJS. So you can just write a very simple directive which will take your collection as a ng-model and render the slider for you. This allows you to reuse this component in multiple places in your app.
If you have only one place in your app that you need the slider, then just a simple ng-repeat will suffice.

Resources