Tag Archive: angularjs



Gather insights from user events – part 1

In this blog series I am going to explain our setup for a system that helps in getting insights based on user events. The solution generates events in the web application and in a mobile app. These events are send to a backend to be cleaned, enriched and stored. With these events we can create dashboards that show information about what the visitors do on the website and what pages are visited. We calculate the amount of visitors and the amount of visits to a page within a certain time window. The following image gives an overview of this solution.

data-insights-figuur-1

I start with the event generation in the website and the mobile app. Both run AngularJS. The mobile app is built using Ionic, which is AngularJS as well. The events are send to a REST backend created as a spring boot application. The spring boot application stores the events in Kafka. Using the Kafka Streams API I’ll show you how to do some basic window based calculations. A long the way I’ll explain some of the concepts or point you to other resources. In the next blogs I am going to talk about Elastic Logstash and Kibana as well as Apache Flink.

(more…)


Article about elasticsearch geo support on found.no

This week an article from Jettro is published on the website of Found. Found is a hosted elasticsearch environment now owned by the elastic company. The article is called: Combining Geo Points With the Elasticsearch Percolator. The article discusses how to index documents containing geo points and how to use these geo points in queries and filters. The article also discusses how to combine these queries with the percolator to determine the province for each location in The Netherlands.

The article is supported by a code repository containing a sample application using the mentioned technologies. Below you’ll find the code repository and the reference to the article on the found website.

Found article ~ Combining Geo Points With the Elasticsearch Percolator
Github repository


Directives for graphs with c3js library

Since the beginning of this year I am working on an AngularJS library with directives to make it easier to create graphs using the excellent c3js library. I started with some basic graphs, but by now a lot has changed. There now is better documentation, more examples, more graphs and finally we now have support for events. Time to give an update.

Better documentation

There are now two things you can reach out for when in need for documentation. There is a documentation page containing a lot of samples, contact information, gettings started, etc. This page can be found here:

http://jettro.github.io/c3-angular-directive/

If you are more into source code, you can checkout the project from github and use grunt to run the sample. If you do not like grunt you can also copy the examples folder to a webserver of your choice and it should work as well.

# git clone https://github.com/jettro/c3-angular-directive.git
# cd c3-angular-directive
# grunt devserver

Point your browser to localhost:8888 and you should see the tutorial page.

Some new graphs

Below some examples of new graphs that are now available. Most op the options available through the c3js api are now also available through the directive.

Scatter

scatter-graph

Stacked bar

stackedbar-graph

Gauge

gauge-graph

Clickable Donut

Before I show the graph I want to make it clear that the clickable part can also be combined with all the other graphs. For I know a lot of you want this functionality I’ll give it a bit more attention. First below the source code in html:

<c3chart bindto-id="donut-plot1-chart">
  <chart-column column-id="Data 1"
              column-values="70"
              column-type="donut"/>
  <chart-column column-id="Data 2"
              column-values="35"
              column-type="donut"/>
  <chart-column column-id="Data 3"
              column-values="60"
              column-type="donut"/>
  <chart-donut title="Donut" width="60"/>
  <chart-events on-click-data="showClick(data)"/>
</c3chart>

Notice the last directive chart-events. In here we refer to a function called showClick. Be sure to give the name of the parameter to pass called data. This is the correct way of passing a callback function to a directive. The next code block shows the controller function.

graphApp.controller('GraphCtrl', function ($scope) {
  $scope.clicked = {};
  $scope.showClick = function(data) {
    $scope.clicked = data;
  }
});

Clickable-donut-graph

Next steps

Before making version 1.0 available there are still a few things to do. I want to make the library more flexible in relation to missing properties by providing a hook to add some configurations yourself. Now that we have events for the complete graph like mouseover and mouseout as well as events for the data points in the graph, I also want to make the events for the legenda available. Finally I want to have a look at making things like the columns dynamic as well and maybe provide a hook to redraw the graph.

If you have other ideas you would like to have included, feel free to create an issue in Github for the project.

https://github.com/jettro/c3-angular-directive/issues


Maintain elasticsearch: the indexes

When using elasticsearch to store and query your data, there are a number of tasks that you want to perform for every project again. I am going to write a series of blog posts that discuss one area of these tasks each. The first one is about creating/duplicating/removing indexes. I will show how to do some actions manually and I will introduce a tool I created to help you with some of these index related tasks.

(more…)


c3js directives for AngularJS

Some time a go I started experimenting with c3js, a nice library around the very popular D3 graphics library. It is all about creating nice looking charts with lots of options. When integrating this in an AngularJS application it is logical to create some reusable directives. The next step is to make these directives easily available to integrate in other projects. Nowadays the easiest way to do this in front-end projects is to use Bower. During development GruntJS helps with some tasks you just need to do.

In this blog post I am going to introduce you to the library, show you how I used it in my elasticsearch plugin and show some of the GruntJS functionality that help me during development.

(more…)


Improve my AngularJS project with grunt

Some time a go I created issue 63 for my elasticsearch gui plugin. This issue was about improving the plugin with tools like grunt and bower. The plugin is an angularjs based library and it makes use of a number of other libraries like: d3, c3js, elasticsearch.js. In this blog post I am describing the steps I took to improve my web application using grunt and bower.

(more…)