blacklabel / grouped_categories Goto Github PK

Hi, me again.

In my company, we have specific needs and we would like to display several large charts in one page. To do so, grouped-categories is automatically required with require.js.

We want to get rid if there are too many when we update a chart for optimization a nice rendering.

So, we used xAxis.labels: { enabled: false } and we've got an error vomitted in console:

Uncaught TypeError: Cannot read property 'attr' of null grouped-categories.js:360

Is there any way more simple than "to crop" the categories tree ?

Thanks a lot sir.

Good DAy My dearest,
Im trying to adapt your library on a test but when i try to place hour format on y axis, i cant get the hours on there. I wonder if is there any possibility to do this?

Regards,

AC

Is there the possibility to make this work with 3d charts ?

When I use 3 or 4 levels, some labels disappear from the pdf file.

example :

http://jsfiddle.net/mhwlng/3v8gy/

(p.s. in my application, when I export to pdf, the same labels that are missing in the pdf, also disappear from the screen, but I can't replicate that in this jsfiddle)

I've been looking all websites for solution to this bug but i cant get the right answer.

i cant see the category name "Fish" With their values, everything's right when we use just 3 subcategories. Anyone knows how to solve this bug?.

Regards,

AC

I've been looking all websites for solution to this bug but i cant get the right answer.

i cant see the category name "Fish" With their values, everything's right when we use just 3 subcategories. Anyone knows how to solve this bug?.

Regards,

AC

Example: http://jsfiddle.net/shD6K/11/

Labels for categories are overlapping lower level.

Hi again,

Sorry for re-opening a new issue about that.

If I've got more than 2 levels of 'grouped categories', so the first ones are not displayed in tooltip.

Related to your example:

• what we have: " Very Famous Orchard, Granny Smith, Apple, Fruit ",
• with your solution: " Apple, Granny Smith ",
• what I would like to have: " Fruit, Apple, Granny Smith, Very Famous Orchard ".

Thanks for all.

Hey,

First at all, thanks for this plugin, very usefull to display several dimensions.

However, I'd like to know if there is a way to reverse category for tooltip:
In the case of your example, I'd like to display " Fruit, Apple " instead of " Apple, Fruit ".

Or, if there is not, could you implement this feature ?

Thank you.

The category name does not display correctly in Internet Explorer version 8 (which is supported by highchart)

IE9 is ok:

This might be related to the fact that IE8 uses a fallback to VML ?

I've been looking all websites for solution to this bug but i cant get the right answer.

i cant see the category name "Fish" With their values, everything's right when we use just 3 subcategories. Anyone knows how to solve this bug?.

Regards,

AC

Hi,

I am using the latest version of Highcharts which is 4.0.1.
In each grouped chart seems that the fist line is not vertical centered.
For replicate the issue is sufficient to go http://blacklabel.github.io/grouped_categories/,
and check the vertical alignment of the first line (Apple, banana , Orange,...)

Please can you help me to solve this issue.

Thank you.
Giuseppe

I've tried to make more than 3 subcategories but it doesnt show the results.
Is there a way to make the library works with this script:

The ability to select one of the group text and the graph will only show that group with the option of returning back to the full view.

I.e. click on managers view removes all the other managers leaving behind the employees only for that manager. Then a button appears to return to back full view.

If possible also have the ability to have non rotated text if the main axis labels are rotated.

If chart has long categories labels and step option for labels is set to non-zero value then labels from second level slide down under first level. Example is here:
http://jsfiddle.net/j3PZ2/
Step option set to 1:

Step option set to 2:

Step option set to 0:

Example: http://jsfiddle.net/amidamaru_rookie/bZ3s8/1/

Steps to reproduce:

1. Drag around navigator
2. Observe second level of categories, it may happen that gridlines will be wrongly drawn

Required: better example, it will take forever to determine root of a bug and fix.

my english is so bad , but I hope you can understand what I say.

i used Grouped Categories v0.0.1 (2013-02-22)

i got the category json data like this :

{
  "id": "id1",
  "name": "name1",
  "url": "area=area1",
  "categories":
   [
      {
        "id": "id1_1",
        "name": "name1_1",
        "url": "type=type1_1"
      },
     {
        "id": "id1_2",
        "name": "name1_2",
        "url": "type=type1_2"
      }
]
}

when we used "e.point.category" in the click events,we found id and url is missing

I modified the code as follows：

function Category(obj, parent) {
  this.name = obj.name || obj;
  this.parent = parent;
  for (var key in obj){
      this[key] = obj[key];
  }
  return this;
}

It is working properly

I faced a problem recently , I want to apply some format in category labels of each category,
It's working for all levels of grouped category but this format is not applying to final level of grouped-category.
Could you help me to solve this problem?

My formatter :

labels:{
formatter: function(){
if (this.value.length > 10){
return this.value.substr(0,10) + "...";
}else{
return this.value;
}
}
}

See examples it is even happening there.

hay friends,
this is working fine and solved my big problems for represent data. but one more requirement
i want to display Image in first level in xAxis (replace of Fruit,Vegetable,Fish name )

thanks,

I noticed this a few days ago. Specified labels for grouped categories no longer appear; instead, the labels show up as "Object". Grouping also appears to be broken. A screenshot of a graph appearing properly is here, as taken from the grouped_categories repo:

https://f.cloud.github.com/assets/381865/75319/77f67946-60bf-11e2-8e0a-b8291a3024e9.png

Here are the accompanying jsfiddle demos that are now broken:

http://jsfiddle.net/shD6K/

http://jsfiddle.net/UJE8X/

Hello everyone,

I have a little position issue:
http://jsfiddle.net/j3PZ2/23/

Thanks for your help

Hi,

Grouped Categories - It's a very useful plugin

Is there a scope for something very similar for grouped yAxis (expanding charts vertically)

thanks.

I would like to rotate the 2nd and 3rd Level category as displayed for the 1st values.

Is it possible at all?

'maxPos' and 'maxPos' variables are defined in global scope:
minPos = tickPosition(tick, mathMax(group.startAt - 1, min - 1));
maxPos = tickPosition(tick, mathMin(group.startAt + group.leaves - 1 - fix, max));

Demo: http://jsfiddle.net/BlackLabel/TFhd7/show

Labels aren't visible in IE8.

If you apply grouped categories plugin to the Highcharts 3.x you will get broken zoom reset functionality. Horizontal lines will not be restored after "Reset zoom" button is pressed. Only lines which were visible during zoom mode will be visible after restore. You can test it here:
http://jsfiddle.net/EmYzH/

Initial view:

Zoomed view:

Restored view:

Hi,

Does grouped_categories support percentages ?

I couldn't seem to get this work when I tried set

plotOptions: 'percent'

Carl

Hi
I am using HighChartjs for reports, I have used Group_ Categories to create Stacked Reports, Please check for demo:
http://fiddle.jshell.net/gWccY/1/
http://fiddle.jshell.net/mbC4z/2/

I am facing one issue when trying to export the report to PDF using export
functionality of HighChartJS . when I tried to export it to PDF , in
PDF grouping labels are missing. Please suggest me . I tried to attach the PDF but not able to attach.you guys can use the export functionality from the demo URL.Kindly revert us soon.

In the same vein as some of the other issues about long labels wrapping or showing up below the lower category, would it be possible (or is it possible) to set different rotation values for different category levels?

e.g. to ensure the top-level category labels fit without overflow, I set rotation to -90. But can I set the 2nd level category ("Fruit", "Vegetable", etc in the example) to 0?
http://jsfiddle.net/joelion/5JpM2/1/

I'm sorry for repeating the same issue several times, i know it wont speed things.

I've tried to make more than 3 subcategories but it doesnt show the results.
Is there a way to make the library works with this script:

//can be changed by type: "column"

window.chart = new Highcharts.Chart({
chart: {
renderTo: "chart",
type: "spline", spacingLeft:0
},
series: [{
data: [4, 14, 18, 5, 6, 5]
},{data:[12,2,3,4,5]}

],
 xAxis: {

    //inicia
categories: [{
  name: "",
  categories: [{
    name: "USA",
    categories: ["New York", "San Francisco","peru1","peru2"]
  }, {
    name: "Canada",
    categories: ["Toronto", "Vancouver","peru5","peru6"]
  }, {
    name: "Mexico",
    categories: ["Acapulco", "Leon","peru4","peru3"]
  }]
}]
,labels:{
    rotation:-90,
    style:{
        align:'Right'
    }
}

}
});

I've tried to research on every link on the net but with no luckness, i hope you could guide me with this.

Regards,

AC

If I set my categories as per the below everything looks fine.

drawHorizontalBorders: false,
categories: [{
name: "Q1",
categories: [' ',' ',' ']
}, {
name: "Q2",
categories: [' ',' ',' ']
}, {
name: "Q3",
categories: [' ',' ',' ']
}, {
name: "Q4",
categories: [' ',' ',' ']
}],

However, when I duplicate it for the secondary axis (as per below) nothing appears.

linkedTo:0,
opposite: true,
drawHorizontalBorders: false,
categories: [{
name: "Q1",
categories: [' ',' ',' ']
}, {
name: "Q2",
categories: [' ',' ',' ']
}, {
name: "Q3",
categories: [' ',' ',' ']
}, {
name: "Q4",
categories: [' ',' ',' ']
}],

Example: http://jsfiddle.net/TFhd7/172/

Simply hide series using legend and observe errors in console.

Is it possible to hide the second category?

In this jsFiddle I'd like to hide the "Apple", "Banana", "Orange" category.

Thanks

When I create a nested group chart, right side border not drawn if only one nested group

http://jsfiddle.net/gmrpY/7/

When we clicked the export link, the pdf or image is downloaded but the Category values in the X-axis are not displayed and its simply shown as blank. Is there any solution for this issue.

The existing lineWidth option affects the entire grid that outlines the categories, both horizontal and vertical lines.

Is there a way to hide the horizontal lines (or the bottom-most horizontal line), so that only the vertical lines are displayed?

Actually the export function doesn't work with this plugin. The data witch is in the lower row of the X-axis doesn't appear in the exported image.

This is how the chart looks like on the page (printscreen): http://i.imgur.com/plAlGke.png
This is the exported image: http://i.imgur.com/OjgXvGf.png

Furthermore - after the export, the chart changes so that the second row is compressed so the text is not in the appropriate columns, like this: http://i.imgur.com/1itWdxw.png

JSFIDDLE: http://jsfiddle.net/nljuba/ma7Lz/

Note: Issue in this thread: #8 still appears if the min-width of the container is set to a smaller size 300px.

Hi,

I am using the latest version of Highcharts which is 4.0.1.
When I hide the series ( click on it in the legend ) it it disappear, but the axis label continue to be visible.
For replicate the issue is sufficient to go http://blacklabel.github.io/grouped_categories/, and click on Series 1 in the legend.
The chart series is removed, but the label Fruits, Vegetable, Fish continues to be visible.

Please can you help me to hide axis labels.

Thank you.
Giuseppe

We found an execption when we use a grouped chart:

• group the chart
• filter the chart so that no data will be displayed anymore
• remove the filter and refresh the chart

=> exception: in line 306 "delete ticks[n].parent;" is not possible
Reason can be found in line 305:
current: if (ticks[n].parent);
can be fixed with: if (ticks[n].parent)
(remove the semicolon at the end of line 305)

Dear dev team grouped_categories plugin, when I draw chart with categories so many data, chart draw wrong grid line. Description as the image below:

Well, please show me how to fix it?

Sorry for new issue but I think i did not give you a good explanation of my issue

In my computer it's align to right but it's not very beautiful like this. It's better with label align on center.

http://jsfiddle.net/j3PZ2/25/

I paste the js from repository

And when i have "br"on label the height of box is not correct. It's just a detail

Thank you for your work !!!!!!

I imagine this is complicated, but can you think of a way to create a gap between category groups, such as is the default with Highcharts' default grouped bar/column graphs?

Perhaps one way to do it would be to programmatically insert an empty bar in between columns, ensuring that the bar is unlabeled, un-mouseTracked, and excluded from the legend.

Hi
I am using HighChartjs for reports, I have used Group_ Categories to create Stacked Reports, Please check for demo:
http://fiddle.jshell.net/gWccY/1/
http://fiddle.jshell.net/mbC4z/2/

I am facing one issue when trying to export the report to PDF using export
functionality of HighChartJS . when I tried to export it to PDF , in
PDF grouping labels are missing. Please suggest me . I tried to attach the PDF but not able to attach.you guys can use the export functionality from the demo URL.Kindly revert us soon.

In Highcharts/Highstocks with charts having multilevel grouping and scroll bar , the grouped separations ( line ) seems to be moving along with scroll bar and shows incorrect grouping.

Could any one please help me out in fixing this issue ?

Also is there any way to give thicker/bolder line separations for higher level groupings ?

Please refer: http://jsfiddle.net/TFhd7/249/

Hi,

I am using the latest version of Higcharts which is Highcharts 3.0.9 and I want to do the drilldown for grouped categories. The example provided only for 1 category.
This is the fiddle: http://jsfiddle.net/dP35L/

In case when we use single tick, right border is not displayed.

Example: http://jsfiddle.net/329mE/3/

How would one go about hooking into the xAxis.setCategories() function to allow grouped_categories to render correctly?

Currently I'm setting up components to change a chart dynamically through ajax, and I need the ability to render the grouped_categories through the setCategories() function call.

Hi,
i went to auto wrap root category text

exam: http://jsfiddle.net/vijay6512/5j9LLyxk/embedded/result/

Example: http://jsfiddle.net/fbCE2/18/

Grids over the categories are missing.