From 4f96481a2635f83f3b2d84c90f8a07be3af2c30b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Fus?= Date: Mon, 9 Jun 2014 15:50:37 +0200 Subject: [PATCH 1/5] Different options for each level. Closes #26. Now each level has own subset of styles, like rotation or font styles. --- README.md | 46 +++++++++++++++++++++++++++++++++++++++++++ grouped-categories.js | 11 ++++++++--- index.html | 45 +++++++++++++++++++++++++++++++++++++++++- manifest.json | 2 +- 4 files changed, 99 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a791183..9db9623 100644 --- a/README.md +++ b/README.md @@ -156,9 +156,55 @@ window.chart = new Highcharts.Chart({ }] } }); + +For each level you can define subset of styling options. 0-level categories are based on the default Highcharts options. + +``` +xAxis: { + labels: { + groupedOptions: [{ + style: { + color: 'red' // set red font for labels in 1st-Level + } + }, { + rotation: -45, // rotate labels for a 2nd-level + align: 'right' + }], + rotation: 0 // 0-level options aren't changed, use them as always + }, + categories: [{ + name: "America", + categories: [{ + name: "USA", + categories: ["New York", "San Francisco"] + }, { + name: "Canada", + categories: ["Toronto", "Vancouver"] + }, { + name: "Mexico", + categories: ["Acapulco", "Leon"] + }] + }, { + name: "Europe", + categories: [{ + name: "United Kingdom", + categories: ["London", "Liverpool"] + }, { + name: "France", + categories: ["Paris", "Marseille"] + }, { + name: "Germany", + categories: ["Berlin", "Munich"] + }] + }] +} +``` + + + ### Code The latest code is available on github: [https://github.com/blacklabel/grouped_categories/](https://github.com/blacklabel/grouped_categories/) diff --git a/grouped-categories.js b/grouped-categories.js index 3202c57..1053d42 100644 --- a/grouped-categories.js +++ b/grouped-categories.js @@ -11,6 +11,7 @@ var UNDEFINED = void 0, mathRound = Math.round, mathMin = Math.min, mathMax = Math.max, + merge = HC.merge, // cache prototypes axisProto = HC.Axis.prototype, @@ -389,6 +390,7 @@ tickProto.addGroupedLabels = function (category) { options = axis.options.labels, useHTML = options.useHTML, css = options.style, + userAttr= options.groupedOptions, attr = { align: 'center' , rotation: options.rotation }, size = axis.horiz ? 'height' : 'width', depth = 0, @@ -399,10 +401,13 @@ tickProto.addGroupedLabels = function (category) { if (depth > 0 && !category.tick) { // render label element this.value = category.name; - var name = options.formatter ? options.formatter.call(this, category) : category.name; + var name = options.formatter ? options.formatter.call(this, category) : category.name, + hasOptions = userAttr && userAttr[depth-1], + mergedAttrs = hasOptions ? merge(attr, userAttr[depth-1] ) : attr, + mergedCSS = hasOptions && userAttr[depth-1].style ? merge(css, userAttr[depth-1].style ) : css; label = chart.renderer.text(name, 0, 0, useHTML) - .attr(attr) - .css(css) + .attr(mergedAttrs) + .css(mergedCSS) .add(axis.labelGroup); // tick properties diff --git a/index.html b/index.html index 2f132e4..611450d 100644 --- a/index.html +++ b/index.html @@ -174,7 +174,7 @@

Usage and demos

series: [{ data: [19, 6, 2, 1, 9, 4, 15, 2, 9, 11, 16, 18] }], - xAxis: { + xAxis: { categories: [{ name: "America", categories: [{ @@ -205,6 +205,49 @@

Usage and demos

+

For each level you can define subset of styling options. 0-level categories are based on the default Highcharts options.

+ +

+xAxis: {  	
+    labels: {
+        groupedOptions: [{
+            style: {
+                color: 'red' // set red font for labels in 1st-Level  
+            }
+        }, {
+            rotation: -45, // rotate labels for a 2nd-level
+            align: 'right'
+        }],
+        rotation: 0 // 0-level options aren't changed, use them as always
+    },
+    categories: [{
+        name: "America",
+        categories: [{
+            name: "USA",
+            categories: ["New York", "San Francisco"]
+        }, {
+            name: "Canada",
+            categories: ["Toronto", "Vancouver"]
+        }, {
+            name: "Mexico",
+            categories: ["Acapulco", "Leon"]
+        }]
+    }, {
+        name: "Europe",
+        categories: [{
+            name: "United Kingdom",
+            categories: ["London", "Liverpool"]
+        }, {
+            name: "France",
+            categories: ["Paris", "Marseille"]
+        }, {
+            name: "Germany",
+            categories: ["Berlin", "Munich"]
+        }]
+    }]
+}
+
+

Code

The latest code is available on github: https://github.com/blacklabel/grouped_categories/

diff --git a/manifest.json b/manifest.json index c2e42ec..62b9149 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name": "Grouped-Categories", - "version": "1.0.3", + "version": "1.0.4", "title": "Grouped Categories", "author": { "name": "Black Label", From 2adb0967fa578863c2f8d137199bb08dcf5920df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Fus?= Date: Tue, 17 Jun 2014 13:03:00 +0200 Subject: [PATCH 2/5] Use group visibility, not label itself [t:27] --- grouped-categories.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/grouped-categories.js b/grouped-categories.js index 1053d42..a2db832 100644 --- a/grouped-categories.js +++ b/grouped-categories.js @@ -299,7 +299,9 @@ axisProto.render = function () { tick.destroyed = 0; } else - tick.label.show(); + tick.label.attr({ + visibility: '' + }); }); }; From 229cb5247ab79ba79acd412a0e96ec4a15029b22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Fus?= Date: Mon, 23 Jun 2014 16:15:31 +0200 Subject: [PATCH 3/5] Remove jQuery requirement from plugin Added HighchartsAdapter requirement. --- grouped-categories.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/grouped-categories.js b/grouped-categories.js index a2db832..fa792ce 100644 --- a/grouped-categories.js +++ b/grouped-categories.js @@ -5,7 +5,7 @@ * * License: Creative Commons Attribution (CC) */ -(function(HC){ +(function(HC, HA){ /*jshint expr:true, boss:true */ var UNDEFINED = void 0, mathRound = Math.round, @@ -493,7 +493,7 @@ tickProto.render = function (index, old, opacity) { function fixOffset(group, treeCat, tick){ var ret = 0; if(isFirst) { - ret = $.inArray(treeCat.name, treeCat.parent.categories); + ret = HA.inArray(treeCat.name, treeCat.parent.categories); ret = ret < 0 ? 0 : ret; return ret; } @@ -548,4 +548,4 @@ tickProto.getLabelSize = function () { return _tickGetLabelSize.call(this); }; -}(Highcharts)); +}(Highcharts, HighchartsAdapter)); From 14e89598eeb458468adc0927e9205a5f37dea228 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Fus?= Date: Wed, 16 Jul 2014 12:59:04 +0200 Subject: [PATCH 4/5] Add stroke-width for 4.0.3 compatibility. Closes #30. --- grouped-categories.js | 3 ++- manifest.json | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/grouped-categories.js b/grouped-categories.js index fa792ce..732cc00 100644 --- a/grouped-categories.js +++ b/grouped-categories.js @@ -259,7 +259,8 @@ axisProto.render = function () { if (!grid) { grid = axis.labelsGrid = axis.chart.renderer.path() .attr({ - strokeWidth: options.lineWidth, + strokeWidth: options.lineWidth, // < 4.0.3 + 'stroke-width': options.lineWidth, // 4.0.3+ #30 stroke: options.lineColor }) .add(axis.axisGroup); diff --git a/manifest.json b/manifest.json index 62b9149..7d8b89b 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name": "Grouped-Categories", - "version": "1.0.4", + "version": "1.0.5", "title": "Grouped Categories", "author": { "name": "Black Label", @@ -26,7 +26,7 @@ "maintainers": [ { "name": "Sebastian Bochan", - "email": "sebastian2@blacklabel.pl", + "email": "sebastian@blacklabel.pl", "url": "http://www.blacklabel.pl" },{ "name": "Paweł Fus", From 459e25e56e69c7ec0e13f9f2048aed54c8ba7a85 Mon Sep 17 00:00:00 2001 From: Brian Xerri Date: Tue, 5 Aug 2014 17:42:30 +0100 Subject: [PATCH 5/5] Allows axis label formatter function to be set via the options Axis label formatter option was only applied to grouped labels. Now it is working across all of them. --- grouped-categories.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/grouped-categories.js b/grouped-categories.js index 732cc00..adb0d76 100644 --- a/grouped-categories.js +++ b/grouped-categories.js @@ -368,7 +368,9 @@ axisProto.groupSize = function (level, position) { // Override methods prototypes tickProto.addLabel = function () { - var category; + var category, + axis = this.axis, + options = axis.options.labels; _tickAddLabel.call(this); @@ -377,9 +379,12 @@ tickProto.addLabel = function () { return; // set label text - if (category.name) - this.label.attr('text', category.name); - + if (category.name) { + this.value = category; + var labelText = options.formatter ? options.formatter.call(this, category) : category.name; + this.label.attr('text', labelText); + } + // create elements for parent categories if (this.axis.isGrouped) this.addGroupedLabels(category);