For some tools, we use tree chart from echartjs .
Everything works fine but I have one problem and it is the size of padding in tree chart.
As you can see in this image everything is fine, but I can't enable more padding to this chart :
i want this chart for my friend website (امروز چندمه)
And this is my code :
myChart.showLoading();
$.get('data/asset/data/flare.json', function (data) {
myChart.hideLoading();
echarts.util.each(data.children, function (datum, index) {
index % 2 === 0 && (datum.collapsed = true);
});
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series:[
{
type: 'tree',
data: [data],
top: '1%',
left: '15%',
bottom: '1%',
right: '7%',
symbolSize: 7,
orient: 'RL',
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
},
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
});
Thanks :)
You need to change the values of the top and bottom properties to negative values, and the left and right properties to larger positive values.
For example, set top : -10% and bottom: -15%. Then Right: 20% and left:15%. You will have to try different values until you find a combination that suits your situation.The higher the right and left values, and the lower the top and bottom values, the more pronounced the effect. That is, making your chart taller and narrower, thus spacing or padding out the values.
You could also reduce the value of the symbolSize property e.g to 1.
Here is the link to the JsFiddle
Echart version 4 removed the padding option from the nodes. I also tried to fix this but there is an issue on echart github. You can use other features like mouseOver.
Seems like in Echart version 4 there is no way to define padding for nodes
But there is a way to avoid collapsing of nodes.
This tree is gonna take as much space (width and height) as you allow it to take.
So you can just specify bigger height value for outer div. And then overflow: auto; for next div.
<div style="overflow:auto">
<div style="min-height:2000px">
<EchartsSVG/>
</div>
</div>
You can create a formula to count your nodes and calculate min-height
Related
What I have
I've created 2 graphs like shown in the first image below. I need these 2 graphs to be perfectly aligned on the 0 axis (which is shown in the section below).
Wanted result
In the image below, the graphs are perfectly aligned and should therefore contain 2 different datasets. One should be placed on the left grid and the other one on the right grid.
The options I thought of
I have not seen a way to implement this in ChartJS. Therefore, I thought of some possible solutions that could solve this issue in a different way.
Because both datasets don't have negative values, I could convert the left dataset to negative values (on the x-axis). The downside is that the range would be incorrect. Also, this would give issues with the popup message if you hover your mouse on a value.
Maybe, two canvas objects can be combined that could result in the wanted result
Question
Is there a way to achieve the wanted result within ChartJS? Or can I perform some wizardry to combine two charts nicely into one? Or should I move to the D3.js library for this particular graph?
I did not find a way to "nicely" implement this. I've changed the source code of the ChartJS library to implement this.
This method uses 2 different graphs that render in 2 different canvas objects. These canvas objects are placed side-by-side to let it look like one graph.
This is my result (The code in here is not exactly like the graph in the picture because I changed it to my specific needs).
I've added a custom variable in the options.layout category named sidePadding.
The code of creating the graph:
new Chart(document.getElementById(this.element), {
type: 'scatter',
data: {
datasets: [{
borderColor: this.lineColor,
borderWidth: 1,
pointBackgroundColor: '#000',
pointBorderColor: '#000',
pointRadius: 0,
fill: false,
tension: 0,
showLine: true,
data: [],
}],
},
options: {
aspectRatio: 0.3,
maintainAspectRatio: false,
responsive: true,
layout: {
sidePadding: {
left: 3,
right: -3,
}
}
}
});
The padding on the sides is by default 3 so it does not touch the border of the canvas. I wanted it to touch the border of the canvas, and therefore set it to -3.
Two different graphs need to be created, one for the left side and one for the right side.
The left graph should have the sidePadding.right set to -3. The right graph should have the sidePadding.left set to -3.
Changes in the ChartJS library
I've worked with ChartJS version v2.9.3. This method will possibly not work anymore in a new version.
I've changed the following in the Chart.js file:
Replace (line number around 11800):
// Adjust padding taking into account changes in offsets
// and add 3 px to move away from canvas edges
me.paddingLeft = Math.max((paddingLeft - offsetLeft) * me.width / (me.width - offsetLeft), 0) + 3;
me.paddingRight = Math.max((paddingRight - offsetRight) * me.width / (me.width - offsetRight), 0) + 3;
to:
// Adjust padding taking into account changes in offsets
// and add 3 px to move away from canvas edges
var layoutOptions = chart.options.layout || {};
var sidePadding = helpers$1.options.toPadding(layoutOptions.sidePadding);
me.paddingLeft = Math.max((paddingLeft - offsetLeft) * me.width / (me.width - offsetLeft), 0) + sidePadding.left;
me.paddingRight = Math.max((paddingRight - offsetRight) * me.width / (me.width - offsetRight), 0) + sidePadding.right;
Also you must add the sidePadding.left and sidePadding.right parameter to ChartJS.
This can be done by changing (line number around 7180):
core_defaults._set('global', {
layout: {
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
// Custom added parameter
sidePadding: {
left: 3,
right: 3,
}
}
});
to:
core_defaults._set('global', {
layout: {
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
// Custom added parameter
sidePadding: {
left: 3,
right: 3,
}
}
});
Note
This is probably not the best way to achieve this. Changing the ChartJS library is bad-practice and updating the library could revert these changes.
If someone has a better way to achieve this, please post your methods or comment below.
I am working on highcharts. In my code, sometimes Y-axis title text is more than chart's height.
Ex. I am create one chart. In this chart, height is 400px but my Y-axis title text is long so some part of the text is not display. so what can i do?
see in jsfiddle
You can set width on title and adapt margin.
yAxis: {
title: {
enabled: true,
text: 'Custom with <b>simple</b> <i>markup</i>Custom with <b>simple</b> <i>markup</i>Custom with <b>simple</b> <i>markup</i>Custom with <b>simple</b> <i>markup</i>',
margin: 40,
style: {
width: 200,
fontWeight: 'normal'
}
}
},
Example: http://jsfiddle.net/EUSVQ/12/
I have a column chart with Highcharts library, something like this:
If you see the red lines maybe you notice what I want achieve. I need to reduce the space between columns and move them to the right, so the chart will have more space between the y-labels and the first column.
Notice that I need a fixed width of 48px for every column. I tried with with groupPadding : 0 and pointPadding : 0 with no luck.
plotOptions : {
series : {
colorByPoint : true,
pointWidth : 48,
borderWidth : 0,
}
},
All the sample code is on jsFiddle.
How can I move all the columns to the right and reduce the space between columns?
UPDATE: As an answer says, a solution is to change the container width to a smaller one. But I need that the grid lines (the grey ones) fill all the page (actually, fill the parent div that would have more width than the chart container). Is it possible to draw the grey lines (the grid lines) outside the chart?
Finally I've done what #HristoIvanov told me in a comment. They suggest that I should put NULL columns at the begining.
Setting the first categorie as NULL and not showing it, is what I need because highcharts left the space for the first column.
That's the code that I needed:
xAxis : {
showFirstLabel: false,
categories : [ null, 'A', 'B', 'C', 'D', 'E', 'F', 'G' ],
[ ... ]
And don't forget the data:
series : [
{ data : [null, 11, 22, 53, 74, 65, 46, 37] }
You can view the result in jsFiddle.
Your code was with a ","
Try this:
plotOptions : {
series : {
colorByPoint : true,
pointPadding : 0,
groupPadding : 0
}
},
Here is your demo: http://jsfiddle.net/zgypy32h/5/
http://jsfiddle.net/zgypy32h/4/
This looks more like what you were going for: JSFiddle
There were a couple things that were giving you trouble. The chart by default wants to fill out the div it's in as much as possible because of Highcharts default settings (check out the reflow option). So to keep the columns close together you have set a max-width or width on the container that you feel satisfies the spacing between columns.
<div id="container" style="max-width: 650px; height: 520px; margin: 0 auto"></div>
And give yourself a little more margin on the left of the chart to compensate.
chart : {
renderTo : 'container',
type : 'column',
showAxes : true,
marginRight : 0,
marginLeft : 50,
spacingLeft : 20,
spacingRight : 0
},
The second is the offset of the y-axis labels to give some spacing between them and the first column. Highcharts doesn't seem to have an initial offset for the first x point, but offset should suffice.
yAxis: {
offset: 60
}
I have a highchart with a legend.
I made the legend have a fixed width of 380px, and I would like to have the legend items always aligned to the right inside this legend box. They align to the left by default instead.
Those are the properties of the legend:
... legend: {
align: 'right', //this align the legend box , not the items
verticalAlign: 'top',
borderWidth: 1,
width: 380,
floating: true,
x: -35,
symbolRadius: 0,
symbolWidth: 10,
symbolHeight: 10,
enabled: true,
itemStyle: { //I even tried this but with no lick
textAlign: 'right',
}
}, ...
And this the legend box is how it looks like:
I would like those 2 items to be on the right of the box.
Here is a jsfiddle of the graph not doing what I want:
http://jsfiddle.net/MaurizioPiccini/d746v/9/
What I have tried:
1- Putting this in my CSS only changes the alignment of the text inside the item, but it does not align the items to the right of the box.
.highcharts-legend-item span {
text-align:right!important;
}
2- adding this as a property on the legend align the legend box , not the items
align: 'right',
3- adding this as a property on the legend just does not work either:
itemStyle: { //I even tried this but with no lick
textAlign: 'right',
}
In general it's not supported. However, you can try to achieve that by manually translating legend group to the right side. You will need to update that position on each chart resize, or whenever legend is redrawn.
Here is sample for it: http://jsfiddle.net/d746v/10/
this.legend.allItems[0].legendGroup.attr({ // 0 - first series, 1 - second series etc.
translateX: 320
});
So for each item you will need to calculate proper position.
You could try: text-align: right; instead of "align";
Or you could try to specify the element in CSS further like:
div .example p {
}
I hope this solves your problem. Good luck!
http://www.w3schools.com/cssref/pr_text_text-align.asp
I'm trying out a relatively new JavaScript/jQuery UI library, w2ui. I've got a layout working in my LAMP application, but I am wondering how to make the layout div take the full height of the screen. Here's a demo of a resizable layout from the official site.
Here is the HTML div which will become my layout container:
<div
id="layout"
style="width: 100%; height: 600px; margin-bottom: 10px;"
></div>
That works with '600px' as a height, but not '100%', which makes it invisible.
And the JavaScript (a few bits removed just for brevity):
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{
type: 'left', size: 800, resizable: true, style: pstyle, content: 'tab1'
},
{ type: 'main', style: pstyle, content: 'main' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
]
});
The layout docs don't mention setting a % height, though it's early days! Perhaps this question will act as a prompt.
One solution would be to read the Y dimension of the top of the layout, and then subtract this from the screen height, and then create the layout of that height. That would probably work, but if the screen resized I'd have to recalculate and reset the height, which is a bit hacky.
Here's the hacky solution, which I'll use for now; however, a better one would be worth working towards. To be fair, this works excellently in Firefox/OSX, and so is fine whilst I am in a development phase.
New HTML:
<!-- Here's the panel system -->
<div id="layout-container" style="height:700px;">
<div id="layout" style="width: 100%; height: 100%;"></div>
</div>
Additional JavaScript, executed prior to the code in the question (props to this answer for the resize stuff):
function setLayoutContainerHeight()
{
// Get top position of layout container, subtract from screen height, subtract a bit for padding
var y = $('#layout-container').position().top;
var layoutHeight = $(window).height() - y - 10;
$('#layout-container').css('height', layoutHeight + 'px');
}
// Whenever the window changes size, recalculate the layout container height
setLayoutContainerHeight();
$(window).resize(setLayoutContainerHeight);
Update: the author this library has very kindly offered several ways to achieve a full-height layout, all of which are better than my hack!