datavisyn / chartjs-scale-hierarchical Goto Github PK

Hello mister Gratzl we find a new issues thank for your time, I hope you have a good day

In the following pdf, there is a replica of the issues
issues.pdf

in the following Url he is the pen
https://codepen.io/wildrakbil/pen/MZedyL

In the following pdf, there is a replica of the issues
issues.pdf

in the following Url he is the pen
https://codepen.io/wildrakbil/pen/MZedyL

Add parent node name as label to expand button in all expanded levels

I cant really tell why this is happening. My guess is that if the bars are collapsed to a vertical line, which should not be possible i think, then the bars start overlapping too.

tested in chrome 67 on linux
samples/default.html

Hello,
This is really great.
I came here from the chartjs/Chart.js#4946.
So the remaining issue, how to use it for a stacked bar chart ?

Thank you very much.

In this page https://github.com/datavisyn/chartjs-scale-hierarchical, it shows that hierarchy scale axis has style option. How could I change the one option like padding from 25 to 50?

The reason is that my chart label is long, I have to wrap them but still need change the padding to make space for the x-axis labels.

Thank you very much!

George

see

chartjs/awesome#2 (review)

Provide focus/zoom feature: display only expanded boxes

Hello mister Gratzl we find a new issues thank for your time, I hope you have a good day

In the following pdf, there is a replica of the issues
issues.pdf

in the following Url he is the pen
https://codepen.io/wildrakbil/pen/MZedyL

The code owner of this repository has changed, therefore it is necessary to update the repo.

Dear developer.
This plugin is really awesome.
Just reporting, there is a problem with data like attached below.
If the "A" node is expanded, the chart will disappear.

const data = {  
   "labels":[{  
         "label":"A",
         "expand":false,
         "children":["2013"]
      },{  
         "label":"E",
         "expand":false,
         "children":["2013","2014","2015"]
      }],
   "datasets":[{  
         "label":"Exemplary",
         "backgroundColor":"blue",
         "tree":[{  
               "value":39.57,
               "children":[39.57]
            },
            {  
               "value":73.84,
               "children":[58.93,75.93,86.67]
            }]
      },{  
         "label":"Satisfactory",
         "backgroundColor":"green",
         "tree":[{
               "value":38.4,
               "children":[38.4]  
            },
            {  
               "value":19.23,
               "children":[32.14,16.67,8.89]
            }]
      },{  
         "label":"Developing",
         "backgroundColor":"orange",
         "tree":[{  
               "value":18.11,
               "children":[18.11]  
            },{  
               "value":6.33,
               "children":[7.14,7.41,4.44]
            }
         ]
      },{  
         "label":"Unsatisfactory",
         "backgroundColor":"red",
         "tree":[{  
               "value":3.92,
               "children":[3.92]  
            },{  
               "value":0.6,
               "children":[1.79,0,0]
            }]
      }]
};

sort by label, by scale...

If you use a pie chart and the hierarchical scale plugin on the same page the pie chart will not draw.

This is caused by the _enabled function which checks if the type is set to hierarchical for the x or y scale. However if there is no scale configured the property will not be found and the script will fail.

The solution is to modify the _enabled method to:

_enabled: function _enabled(chart) {
  if (!chart.config.options.hasOwnProperty('scales')) {
    return null;
  }

  if (this._isValidScaleType(chart, 'xAxes') && chart.config.options.scales.xAxes[0].type === 'hierarchical') {
    return 'x';
  }

  if (this._isValidScaleType(chart, 'yAxes') && chart.config.options.scales.yAxes[0].type === 'hierarchical') {
    return 'y';
  }

  return null;
},

The first line checks if there is a scale property, the _isValidScale_type method will do a full check:

_isValidScaleType: function _isValidScaleType(chart, scale) {
  if (!chart.config.options.scales.hasOwnProperty(scale)) {
    return false;
  }

  if (!Array.isArray(chart.config.options.scales[scale])) {
    return false;
  }

  return chart.config.options.scales[scale][0].hasOwnProperty('type');
},

This solves the issue and allows the different chart types on one page.

See working example with only one color for two datasets (testdata is also in git):
https://gitlab.bayer.com/Target360/plugins/gtex/blob/develop/src/Mouse2ManBarChart.ts

If you change the 6 arrays in the following code block to [this.blues((this.node2values.get(node)).qval),'green'] it does not work
https://gitlab.bayer.com/Target360/plugins/gtex/blob/5a5bb325ac582a5e095945fcefdbc11a3ff8235b/src/Mouse2ManBarChart.ts#L253-272

See also codepen (it doesn't work in generel - for whatever reason)
https://codepen.io/stephandecker/pen/XLbvNw?editors=0010

version: 1.0.4

see https://codepen.io/sgratzl/pen/WgvLez?editors=0010

https://codepen.io/mmn6d6d6e/pen/jjjRbZ?editors=0010

On the example i provided, A1 & B1 is aligned left.
Is there a way to center them?