Related
My data lives inside a variable named gaugeData. And it has two properties value and date.
And in Apache eCharts I am trying to use detail.formatter to create two headings with different text styles, like this:
formatter: ['{header|{value}}', '{subHeader|{date}}'].join('\n')
The first header displays the value, and the second subHeader displays the date.
Currently, the value is displaying correctly but the date is not.
Here is a screenshot of how it looks:
How do I make the date also work as a variable?
I don't care if date lives outside the gaugeData, I just need it to be a variable of some kind.
Here is my full code:
const gaugeData = [
{
value: 80,
date: '15-30-2022',
},
];
const gaugeOption = {
series: [
{
data: gaugeData,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 3,
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: borderColor,
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 1,
shadowOffsetY: 1,
},
},
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 9,
color: [
[0.5, '#e76262'],
[0.54],
[0.66, '#f9cf4a'],
[0.7],
[0.83, '#eca336'],
[0.87],
[1, '#3ece80'],
],
},
},
axisTick: {
length: 2,
lineStyle: {
color: '#8a94a6',
width: 2,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
rich: {
header: {
fontSize: 36,
fontWeight: 700,
fontFamily: 'Open Sans',
color: '#0a1f44',
},
subHeader: {
fontSize: 16,
fontWeight: 400,
fontFamily: 'Open Sans',
color: '#8a94a6',
},
},
formatter: ['{header|{value}}', '{subHeader|{date}}'].join('\n'),
offsetCenter: [0, '-20%'],
valueAnimation: true,
},
},
],
};
Figured it out.
The formatter can take a callback function where you can reference any other variable you like.
So when using Vue my data variables can look like this:
const scoreDate = ref('15-30-2022');
const scoreValue = ref(80);
const gaugeData = [
{
value: scoreValue.value,
},
];
And the formatter property of the options object looks like this:
formatter: function (data: number) {
return `{header|${data}} \n {subHeader|${scoreDate.value}}`;
},
I am trying to create a scrollbar like the one below using echarts
So far I have managed to get the scroll using dataZoom feature but I haven't been able to style it like a normal scroll bar.
const dataY = [
'a',
'b',
'v',
'd',
'e',
'f',
'x',
'g',
'h',
'i',
'j',
'k',
'l',
'm',
'n'
]; // 名称
const dataX = [
20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15, 35, 50, 30, 40, 50, 60
]; // 数据
option = {
backgroundColor: '#1C1C1C',
grid: {
top: '10%',
right: '10%',
left: '10%',
bottom: '10%'
},
yAxis: [
{
type: 'category',
data: dataY,
axisLine: {
lineStyle: {
color: '#333333'
}
},
axisLabel: {
interval: 0,
margin: 10,
color: '#999999',
textStyle: {
fontSize: 11
},
rotate: '0'
},
axisTick: {
show: false
}
}
],
xAxis: [
{
axisLabel: {
padding: [3, 0, 0, 0],
formatter: '{value}',
color: '#999999',
textStyle: {
fontSize: 11
}
},
axisTick: {
show: true
},
axisLine: {
lineStyle: {
color: '#333333'
}
},
splitLine: {
lineStyle: {
color: '#333333'
}
}
}
],
dataZoom: [
{
type: 'slider',
yAxisIndex: 0,
zoomLock: true,
width: 5,
right: 10,
top: '10%',
bottom: '10%',
start: 70,
end: 20,
brushSelect: false,
handleSize: '60%',
showDetail: false,
backgroundColor: '#000',
borderColor: '#000',
opacity: 1,
brushStyle: false,
handleStyle: {
color: '#FF6700',
borderColor: '#FF6700'
}
},
{
type: 'inside',
id: 'insideY',
yAxisIndex: 0,
start: 15,
end: 20,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true,
backgroundColor: 'transparent'
}
],
series: [
{
type: 'bar',
data: dataX,
barWidth: '5',
itemStyle: {
normal: {
color: '#FF6700',
shadowBlur: 4,
borderRadius: 100
}
},
label: {
normal: {
show: false,
lineHeight: 4,
formatter: '{c}',
position: 'top',
textStyle: {
color: '#fff',
fontSize: 10
}
}
}
}
]
};
I am left with a weird scrollbar that works as it should be unfortunately looks really weird.
I had the exact same issue as you, and i found a turnaround.
Instead of using the datazoom from ECharts as a scrollbar, you can just use the overflow of the div of the chart, and you can costumize it as you want with css. First you need to comment or delete the part of the datazoom in you code and change the html and css as this:
<div class="grid" [style.width.%]="100" [style.height.%]="100" #wrapper>
<div class="ChartDiv" echarts [options]="options" [style.width.px]="ganttWidth" [style.height.px]="ganttHeight"></div>
</div>
Then you just have to define the css like this:
.grid {
overflow-y: scroll !important;
//hidden if you dont want the x-Axis to have a scroll
overflow-x: hidden !important;
}
//Change the css as you want
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background-color: #e4e4e4;
border-radius: 100px;
}
With this code, your graph will have this aspect:
Now you just need to change your css as you want the style of this xD.
I'm new to using ext4js and web app dev in general.
I have a form, and in that form, I want a checkbox and right next to it is a textfield. I changed the layout type of the form from vbox to column and I set the width of the checkbox and textfield so that they'll both be in one line. So far, that worked great for me.
However, when I duplicated the checkbox and textfield, the result changed. The duplicated checkbox and textfield were on different lines and they were centered.
Here is my code:
{
xtype: 'form',
itemId: 'spousework',
maxWidth: 500,
width: 75,
layout: 'column',
bodyBorder: true,
bodyPadding: 10,
bodyStyle: 'border-right-style: solid;',
frameHeader: false,
header: false,
title: 'My Form',
items: [
{
xtype: 'displayfield',
itemId: 'userNameField2',
margin: '10 0 10 0',
maxWidth: 700,
minWidth: 700,
width: 700,
defaultAlign: 'center',
fieldLabel: 'Spouse\'s Work',
hideLabel: true,
labelWidth: 0,
value: 'SPOUSE\'S WORK',
fieldStyle: 'color: #007AA3; text-align: left; font-weight: bold;'
},
{
xtype: 'checkboxfield',
maxHeight: 20,
fieldLabel: 'Spouse\'s Employer',
labelWidth: 120,
boxLabel: ''
},
{
xtype: 'textfield',
margin: '0 0 0 10',
maxHeight: 20,
width: 300,
fieldLabel: '',
labelWidth: 120
},
{
xtype: 'checkboxfield',
maxHeight: 20,
fieldLabel: 'Spouse\'s Employer',
labelWidth: 120,
boxLabel: ''
},
{
xtype: 'textfield',
margin: '0 0 0 10',
maxHeight: 20,
width: 300,
fieldLabel: '',
labelWidth: 120
}
]
}
Can anyone help? How do you properly line up items in succeeding rows using a column layout for the form?
you can use filedcontainer in your form like below with column layout
{
xtype: 'fieldcontainer',
layout: 'column',
fieldLabel: 'Spouse\'s Employer',
items: [
{
xtype: 'checkboxfield',
maxHeight: 20,
boxLabel: '',
margin: '0 5 0 0'
},
{
xtype: 'textfield',
}
]}
Good Morning,
I have some problem when I attempted to fill my Grid panel from my web service, the result was an empty grid, thank you for advance.
// Create store
var myStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'Service.asmx/GetPeople',
headers: {
'Content-type': 'application/json'
}
}),
root: 'd',
id: 'Id',
fields: ['Id', 'FistName', 'LastName', 'BirthDate'],
autoLoad: true
});
//Create grid to display data from store
var gridTest = new Ext.grid.Panel({
store: myStore, // Our store
renderTo: Ext.getBody(),
forceFit: true,
columns: [ // Grid columns
{ xtype: 'gridcolumn', width: 100, text: 'Id', dataIndex: 'Id', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Nom', dataIndex: 'FirstName', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Mail', dataIndex: 'LastName', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Phone', dataIndex: 'BirthDate', flex: 1 }
]
});
and this is my viewport:
Ext.create('Ext.container.Viewport', {
layout: "border",
items: [{
region: "north",
height: 50,
title: "Nord"
}, {
region: "south",
height: 200,
title: "sud",
bodyStyle: 'background: #fffff;',
border: false
}, {
region: "center",
title: "centre",
bodyStyle: 'background: #00000;',
border: false,
items: gridTest
}, {
region: "west",
width: 100,
title: "ouest"
}, {
region: "east",
width: 100,
title: "est"
}]
});
and this is RESPONSE FROM FIREBUG MOZILLA FIREFOX:
{"d": [{
"__type":"WebService4ExtJS.Model.Person",
"Id":0,
"FirstName":"sami",
"LastName":"samibizani#gmail.com",
"BirthDate":"23188219"
}, {
"__type":"WebService4ExtJS.Model.Person",
"Id":1,"FirstName":"admin",
"LastName":"admin#gmail.com",
"BirthDate":"1111111"
}, {
"__type":"WebService4ExtJS.Model.Person",
"Id":2,
"FirstName":"user",
"LastName":"user#gmail.com",
"BirthDate":"2222222"
}]
}
Your Store reader is not defined:
reader: {
type: 'json',
root: 'd',
idProperty: 'Id'
}
You can find the working code here.
And one little mistake: in the fields array, you wrote FistName instead of FirstName.
I am using EXTJS 4.0 and I want to display tips when user move to on my line Charts i already created Group Line Chart and as well as create Rich Tips also but now my problem is when I create tips for every series and run in browser I got blank tips for three line Chart out of four but fourth line chart display the correct Rich tips. My sample code is:
Code For Panel and Line charts:
var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
width: 800,
height: 600,
hidden: false,
id:'ChequesDetailsChartsMonthWiseWinId',
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: ChequesDetailsLineChartsMonthwiseStore,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
title: 'Amounts (In Rs)',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Honorarium',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');
this.setTitle("Information for " + 'Honorarium - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Program Expenses',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');
this.setTitle("Information for " + 'Program Expenses - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Assets Amount',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');
this.setTitle("Information for " + 'Assets Amount - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Human Resource',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');
this.setTitle("Information for " + 'Human Resource - Month :' +storeItem.get('month') );
}
} // tips ends here
}]
}
});
And Sample Preview is :
Line Chart :
Line Chart :
Please provide me solution of how to display tips in all charts or where I am doing wrong.