I'm using the Sencha Touch 2.1 with Charts 1.1 to display some data.
I have a pie chart depicted below:
I want the labels to stay where they are now , but I want them to be horizontal (not rotated).
extend: 'Ext.chart.PolarChart',
requires: [
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.series.Pie',
'Charting.store.charts.perStore',
'Ext.chart.interactions.Rotate'
],
config: {
colors: ["#6295C7", "#CCCCC", "#FFFFF"],
store: 'chrtProduct',
// centered:true,
// innerPadding:20,
series: [{
type: 'pie',
labelField: 'verdeling',
label:{
/*display:'middle',
orientation:'horizontal',*/
field:'patVerdeling',
font: '1em Trade Gothic LT Std Bold',
contrast:true,
disableCallout:true
},
xField: 'patVerdeling'
//,rotation:90
}]
//,interactions: ['rotate']
The following code doesn't seem to do anything when uncommented.
display:'middle',
orientation:'horizontal',
Ok, I'm not sure whether this is the best way or not but it works for me, so after spending some time digging into the sencha chart library, the solution is easier then what I expected.
Just comment this line in PieSlice.js located at touch/src/chart/series/sprite/PieSlice.js of your app project:
labelCfg.rotationRads = midAngle + Math.atan2(surfaceMatrix.y(1, 0) - surfaceMatrix.y(0, 0), surfaceMatrix.x(1, 0) - surfaceMatrix.x(0, 0));
This line perform as the key role to rotate the label of your pie chart.
Related
How can I create a simple histogram with apache echarts? I checked their documentation and it does not appear there. Does echarts not have histogram?
Using Echarts tools with datasets
Echarts data transformation can be used to shape a dataset into a histogram dataset, using 'ecStat:histogram'. Here is a very good example showing how to use this tool. You can also find a clear documentation on github.
This solution is a bit more complex to handle (understanding datasets and data transform) but it's the clean way to make a histogram.
Simple hand made solution
You can create a chart that looks like a histogram using Bar charts. Your data will need some formatting so that it looks like a list of [x,y] :
x : (rangeMax - rangeMin)/2
y : number of points in that range
You are also going to need to set barWidth to 100% and xAxis.type to 'value' for it to look like a histogram.
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: [
{
type: 'value',
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '100%',
data: [[5,20], [15,52], [25,200], [35,334], [45,390], [55,330], [65,220]]
}
]
};
myChart .setOption(option)
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<div id="main" style="width: 600px; height:400px;"></div>
</body>
</html>
enter image description here
Trying to use Quill in my project. I'm using Bootstrap class 'row' with two columns. Right hand side column has Quill, everything works fine except this equation box (see in the image). Can anybody help?
I solved this using bounds. Here is the code snippet:
let quill = new Quill('#editor-container', {
modules: {
formula: true,
syntax: true,
toolbar: '#toolbarOptions'
},
placeholder: 'Compose your question here...',
theme: 'snow',
bounds: '#editor-container'
});
We have been using tips configuration of series in order to set interactive tips for ExtJS 4 & 5. But with ExtJS 6, it does not work anymore. So what is the proper way of showing tips using ExtJS 6 chart package?
series: [{
type: 'pie',
field: 'count',
showInLegend: true,
donut: false,
tips: {
trackMouse: true,
width: 140,
height: 40,
renderer: function(storeItem, item) {
this.update(storeItem.get('name') + ':' + storeItem.get('count'));
}
}
}]
It looks like the tooltip renderer method arguments have been swapped around between versions, otherwise your fiddle is almost there. The this keyword appears to be the series rather than the tooltip - it's best not to rely on the JS context in ExtJS anyway and Sencha appear to be making efforts while refactoring the API, to ensure that you can consistently expect a reference to the relevant component as the first argument of any callback.
If you look at the series-tooltip in the API it will confirm that the first argument is a reference to the tooltip and the second argument is the selected record - so you can update a tooltip as follows:
{
xtype: 'pie'
// ...
tooltip: {
// ...
renderer: function(tip, item){
tip.update(item.get('name') + ': ' + item.get('count'));
}
}
}
ยป updated fiddle
Seems you switched from ext-charts to sencha-charts.
It is no more tips property for Series :
ExtJS 4 - http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.chart.series.Series-cfg-tips
ExtJS 6 - http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.chart.series.Series
Try tooltip property it should be the same as tips before
tooltip: {
trackMouse: true,
renderer: function(toolT, storeItem) {
toolT.setHtml('dummy tooltip');
}
}
Try this.
Labels on the pie chart are fine to me.
Labels outside of the pie chart are not, I would like to make these disappear since on Iphone or a screen that size, labels pop out of the pie chart and are out of the screen most of the time.
I did not find anything in Sencha Architect that allowed me to overide this mechanism for labels. Would someone have an idea?
You have to extend Ext.chart.series.sprite.PieSlice and override the method sliceContainsLabel:
Ext.define('yourNamespase.CustomPieSlice', {
alias: 'sprite.custompieslice',
extend: 'Ext.chart.series.sprite.PieSlice',
inheritableStatics: {
def: {
defaults: {
doCallout: false,
rotateLabels: false,
label: '',
labelOverflowPadding: 10,
renderer: null
}
}
},
sliceContainsLabel: function () {
return 1;
}
});
And so the labels will be always inside the pie chart.
I'm trying my hands on extjs 4 by trying to recreate some component I have in an old extjs 2 project.
One of the component was creating a floating toolbox (like you get with photoshop) with a thin border and no title or min/max/close buttons. Like so..
In ext4 , I can't seem to be able to reproduce that same result. Here's what the same code looks like in ext 4:
This is the code I had:
app.Toolbox = Ext.extend(Ext.Window, {
,initComponent : function()
{
Ext.apply(this,{
closable:false,
border:false,
width:345,
height:60,
onEsc:Ext.emptyFn,
resizable:false,
x:20,
y:20,
items:[
/* icons (a html items) */
]
});
app.Toolbox.superclass.initComponent.call(this, arguments);
}
/* handlers, methods, etc */
});
Is there any way to get a similar result in ext 4?
I tried using some css to hide some elements like the title bar, but ext 4 always calculates the height of the window as if the element was visible, which looks even weirder.
Any idea?
Ext.panel.Header is just an extended Ext.container.Container so you can do as you wish to it.
I think the closest you're going to get is by applying frame: true which kind of forces the content to fill the window frame.
However, it doesn't seem to work if you have a Close button in the top right.
Ext.create('Ext.window.Window', {
height: 60,
width: 345,
closable: false,
layout: 'fit',
frame: true,
items: {
html: '<p>hello</p>'
}
}).show();
You're still going to have to style it a little, but its far closer to what you need.