I cameup with some problem upon using Highcharts recently that require me to have data contain in point and series. In this post I'm gonna put some solution up.

Starting point

Let's take this fiddle straight from Highcharts docs and add some spice to it:

Extra series datas

Let's say we have an extra for each of the series here we want to add. For example, I want to have each serie contains a country object.

{
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
        country: 'Japan'
    }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
        country: 'USA'
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0],
        country: 'German'
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
        country: 'UK'
    }]
}

After add the variable in serie data, we can use it using this.series.options.country in formaters.

Here is an example in a tooltip formater:

tooltip: {
         formatter: function() {
             return 'Country:' + this.series.options.country;
         }
      }

The good thing is that you can put almost anything in here, including complex JSON Object with some anonymous functions.

Extra point data

We have extra datas for the whole serie, how about each of the point with another custom value? The reason why I need to work on this solution because the data: [] in series object is only accept an array of numbers and anything else will be rejected. I tried with array of object but it won't work that way. Instead I use the index and an extra unique ID for each of the serie to map with an object. For the data array, you will need to write some function to output this array from your set of data.

To get the index of a point: this.series.data.indexOf( this.point )

Let's say we have this data:

var tempDb = {
    'tokyo': [
        {'feellike': -1, 'detail': 'Cloudy'},
        {'feellike': -2, 'detail': 'Sunny'},
        {'feellike': -6, 'detail': 'Cloudy'},
        {'feellike': -7, 'detail': 'Sunny'},
        {'feellike': -8, 'detail': 'Foggy'},
    ],
    'newyork': [
        {'feellike': -2, 'detail': 'Sunny'},
        {'feellike': -3, 'detail': 'Foggy'},
        {'feellike': -6, 'detail': 'Cloudy'},
        {'feellike': -7, 'detail': 'Sunny'},
        {'feellike': -8, 'detail': 'Foggy'},
    ],
    'berlin': [
        {'feellike': -2, 'detail': 'Sunny'},
        {'feellike': -3, 'detail': 'Foggy'},
        {'feellike': -4, 'detail': 'Funny'},
        {'feellike': -5, 'detail': 'Rainy'},
        {'feellike': -6, 'detail': 'Cloudy'},
    ],
    'london': [
        {'feellike': -4, 'detail': 'Funny'},
        {'feellike': -5, 'detail': 'Rainy'},
        {'feellike': -6, 'detail': 'Cloudy'},
        {'feellike': -7, 'detail': 'Sunny'},
        {'feellike': -8, 'detail': 'Foggy'},
    ]
};

Here is the updated tooltip formatter:

tooltip: {
     formatter: function() {
         var i = this.series.data.indexOf( this.point ),
             data = tempDb[this.series.options._id][i];

         /*
         * You definitly will want to check for
         * null / undefine here before output
         */

         return '<b>' + this.series.name + '</b>' +
             '<br />Country: ' + this.series.options.country +
             '<br />Month: ' + this.x +
             '<br />Temperature: ' + this.y +'°C' +
             '<br />Feel like: ' + data.feellike +'°C' +
             '<br />Detail: ' + data.detail;
     }
    }

I also add an id in series option so I can get the id using this.series.options._id.

Here's the result:

Note: You can also set the serie option to contain a set of extra data for points:

{
    name: 'London',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
    country: 'UK',
    extra: tempDb[_id]
}

And in tooltips, use the ff. code: this.series.options.extra[ this.series.data.indexOf( this.point ) ] to access point value.

Highcharts is a very powerful charting library, I have to admit. Hope you guys enjoy the technique and have a great time with Highcharts. If you have any questions, don't hestitate to give a comment.

HTML5 is powerful, as we can make almost everything with the support of javascript. Still HTML5 is still a XML-base document no different than HTML4, but with the new specifications and new tags. This will helps SEO a lot.

Jekyll + Github

It has been 2 years since I stop wring my previous blog on tech, or more precise, programming because a hosting company delete my host before. So now, the end of the year 2014, I decided to restart my blog from scratch on Github Pages with Jekyll.

Seriously, this Jekyll is really useful. Just after 2 hours of work, I already have my base structure of the blog ready. If you guys want to pull the site, just go ahead and go to Github. Just remember to not include my posts on your websites.

I will soon write a blog post about this jekyll and how it is useful.

HTML5

With the new version of HTML, now introduce lots of new tags like <audio>, <video>, <section>, <header>..., we are having a much more clear XML representation of website data than ever. I would like to focus on the following tags in this post on SEO:

• <section>
• <article>
• <header>
• <footer>
• <nav>
• <main>
• <time>
• <link>
• <h1>

<article>
    <header>
        <h1> My post </h1>
        <time>01-01-1997</time>
    </header>
    <section>
        <h1> Chapter 1</h1>
        <p>My beautiful text</p>
    </section>
    <footer></footer>
</article>

<section>
    <h1> Category </h1>
    <article>
        <h1>Article 1</h1>
    </article>
    <article>
        <h1>Article 2</h1>
    </article>
    <article>
        <h1>Article 3</h1>
    </article>
</section>

<section> & <article>

This tag by definition from w3 is a grouping of content. You can group different section in an article or multiple article in a section like category.

<header> & <footer>

header and footer is a block, refer to the heading of a section or body, you can use multiple times but once per level. We can use it to differentiate the heading or footer of a post and it's body. Refer to the first example above for the usage of header and footer.

You can use this tag for the page header and footer too just like I did (view source)

<main>

Main is the main content of the <body>, it can only be use one, so pick carefully which part of data on your website you want to be the main. For example: a blogpost page main should contain it's articles.

<nav>

Nav is anything that helps user navigate to different page on the website. Let it be the navbar of your page, the sidebar navigation, or pagination, wrap this tag around it.

I also recommend use a list inside nav. IMO, it's better for the robot to crawl than bunch of divs stack together.

<time>

Use the time on your article. Straight forward so the crawler don't need to guess.

<link>

Give the permalink on your post for consistency purpose.

<h1>

Why H1? As of HTML5 we can have multiple H1 per document. H1 by default is the biggest heading for all sections, articles, footers, headers...

Schema.org

Schema.org is a markup volcabulary that helps search engines index easier the content of your website.

Let's improve the first example we have done above with schema.org included:

<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
    <header>
        <h1 itemprop="headline"> My post </h1>
        <time itemprop="datePublished" datetime="01-01-1997">01-01-1997</time>
        <link itemprop="url" href="/myblog/mypost/">
    </header>
    <section itemprop="articleBody">
        <h1> Chapter 1</h1>
        <p>My beautiful text</p>
    </section>
    <footer></footer>
</article>

So an article is now identify as a blogPost. Inside this blogPost we have headline, datePublished, url, and the articleBody. Pretty straight forward, right? By structure your html like this. Google can easily find which part of your document is the article and which is the heading. And the benefit? SEO

Backward compatible? Internet Explorer?

IE8: Not Support IE9: Basic Support

My advice: Screw IE. Just kidding. You can use this script (html5shiv) for backward support on IE or browser not supporting these kind of tags