datavisyn / chartjs-scale-hierarchical Goto Github PK
View Code? Open in Web Editor NEWChart.js scale for hierarchical categories
License: BSD 3-Clause "New" or "Revised" License
Chart.js scale for hierarchical categories
License: BSD 3-Clause "New" or "Revised" License
sort by label, by scale...
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
Provide focus/zoom feature: display only expanded boxes
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]
}]
}]
};
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.
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
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
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
Add parent node name as label to expand button in all expanded levels
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?
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.