I have a container with three items:
ombrelloneButton = Ext.create('Ext.Button', {
id: 'btnOmbr',
iconMask: true,
iconCls: 'action',
text: 'Ombrellone'
});
lettinoButton = Ext.create('Ext.Button', {
id: 'btnLett',
iconMask: true,
iconCls: 'action',
text: 'Lettino'
});
toolbarPostazione = Ext.create('Ext.Toolbar',{
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items: [ombrelloneButton,
lettinoButton]
});
Ext.define('appTrial.view.Postazione.Postazione',{
extend: 'Ext.form.Panel',
xtype: 'Postazione',
alias: 'widget.Postazione',
controllers:['AssociaAttivitaController'],
models : ['appTrial.model.AttivitaModel'],
config : {
id : 'PostazioneId',
title : 'Welcome',
resizable : false,
collapsible : true,
bodyPadding : '5',
buttonAlign : 'center',
border : false,
trackResetOnLoad : true,
items : [{
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to My New App!!!'
},
{
xtype: 'container',
name: 'mainContainer',
id: 'postazioneContainer',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
//width : '100%',
items : [{
layout: {
pack: 'center'
},
html :'<p style="color: red; text-align: center; font-size: 20px" >Complimenti!</p><br><p style="text-align: center; font-size: 16px">Sei stato associato alla attivita '+dummyAttivita.get('nomeAttivita')+'!</p>' +
'<br><p style="text-align: center; font-size: 16px">Ora associa la tua postazione:</p>',
margin: '80 0 50 0'
},
toolbarPostazione,
{
xtype: 'PostazioniList',
title:'PostazioniAssociate',
id: 'PostazioniAssociate'
}
]
}]
}
});
The first two of them are showed (html text and toolbar), while the PostazioniList is not showed.
It is done like this (List.js):
Ext.define('appTrial.view.Postazione.List', {
extend: 'Ext.List',
xtype: 'PostazioniList',
alias: 'widget.PostazioniList',
itemTpl: '<div>{tipoPostazione} num.{numPostazione}</div>',
data: [{
tipoPostazione: 'Ombrellone',
numPostazione: '5'
},
{
tipoPostazione: 'Ombrellone',
numPostazione: '37'
},
{
tipoPostazione: 'Lettino',
numPostazione: '46d'
}]
});
Could it be a html problem?
I don't understand also why I don't get any error, just it is hidden...
Thanks in advance
Related
I'm trying to create a bar chart that is grouped by the dataset rather than the label in chartjs3 and I'm having no luck. Before I switch over to building in D3, I wanted to check if this achievable within the confines of ChartJS.
Here is a link to a fiddle where I've been playing around with using different dataset structures and options from the Bar chart docs. I suspect that this is outside of the scope of the charting library, or is within the scope, but requires some custom components to be made – I would appreciate if anyone could direct me on what in particular I would need to extend (e.g. is it a case of a custom axes? or more?).
https://jsfiddle.net/f34ucs76/2/
const data = {
labels: [
'2000','2010','2020',
// 'Frogs','Monkeys','Squirrels','Bats'
],
datasets: [
{
label: 'Frogs',
data: [30.2,20.8,36.2],
backgroundColor: 'red',
//stack: 'Frogs',
},
{
label: 'Monkeys',
data: [16.3,13.0,22.3],
backgroundColor: 'blue',
//stack: 'Monkeys',
},
{
label: 'Squirrels',
data: [5.8,3.1,14.9],
backgroundColor: 'cyan',
//stack:'Squirrels',
},
{
label: 'Bats',
data: [0.1,3.6,2.6],
backgroundColor: 'aquamarine',
//stack:'Bats',
},
],
}
const options = {
maintainAspectRatio: false,
responsive: true,
interaction: {
intersect: false,
mode: 'index',
},
plugins: {
title: {
display: false,
},
subtitle: {
display: true,
align: 'start',
text: ['Source: Animals Index, June 2022'],
font: {
size: 12,
style: 'italic',
},
position: 'bottom',
padding: {
top: 20,
},
},
legend: {
display: true,
position: 'bottom',
},
tooltip: {
enabled: true,
},
},
scales: {
x: {
grid: {
display: false,
},
},
y: {
title: {
display: true,
text: 'Horsepower',
},
},
},
}
const mychart = new Chart(
document.getElementById('mychart'),
{
type: 'bar',
data: data,
options: options,
}
);
Your problem can be solved with Chart.js but the labels and the single dataset need to be generated.
Further you need to define your own legend by defining a plugins.legend.labels.generateLabels together with with a plugins.legend.labels.onClick function.
For further information, consult the Legend page from the Chart.js. documentation.
Please take a look at your amended and runnable code below and see how it works.
const baseData = {
labels: ['2000','2010','2020'],
datasets: [
{ label: 'Frogs', data: [30.2, 20.8, 36.2], bgColor: 'red', hidden: false },
{ label: 'Monkeys', data: [16.3, 13.0, 22.3], bgColor: 'blue', hidden: false },
{ label: 'Squirrels', data: [5.8,3.1, 14.9], bgColor: 'cyan', hidden: false },
{ label: 'Bats', data: [0.1, 3.6, 2.6], bgColor: 'aquamarine', hidden: false }
]
};
const iLastDs = baseData.datasets.length - 1;
const data = {
labels: baseData.datasets
.map(() => baseData.labels)
.map((labels, i) => i < iLastDs ? [...labels, null] : labels)
.flatMap(v => v),
datasets: [{
data: baseData.datasets
.map(ds => ds.data)
.map((data, i) => i < iLastDs ? [...data, null] : data)
.flatMap(v => v),
backgroundColor: baseData.datasets
.map(ds => ds.data.map(v => ds.bgColor))
.map((bgColors, i) => i < iLastDs ? [...bgColors, null] : bgColors)
.flatMap(v => v),
categoryPercentage: 1,
barPercentage: 0.9
}]
};
const options = {
maintainAspectRatio: true,
responsive: true,
interaction: {
intersect: true,
mode: 'index',
},
plugins: {
legend: {
position: 'bottom',
labels: {
generateLabels: chart => baseData.datasets.map((ds, i) => ({
datasetIndex: i,
text: ds.label,
fillStyle: ds.bgColor,
strokeStyle: 'lightgray',
hidden: baseData.datasets[i].hidden
}))
},
onClick: (event, legendItem, legend) => {
baseData.datasets[legendItem.datasetIndex].hidden = !baseData.datasets[legendItem.datasetIndex].hidden;
const iFirstValue = legendItem.datasetIndex + legendItem.datasetIndex * baseData.labels.length;
for (let i = iFirstValue; i < iFirstValue + baseData.labels.length; i++) {
legend.chart.toggleDataVisibility(i);
}
legend.chart.update();
}
},
tooltip: {
callbacks: {
title: ctx => {
const dsIndex = Math.floor(ctx[0].dataIndex / baseData.datasets.length);
return baseData.datasets[dsIndex].label + ' / ' + ctx[0].label;
}
}
}
},
scales: {
x: {
grid: {
display: false
}
},
y: {
title: {
display: true,
text: 'Horsepower',
}
}
}
};
new Chart('mychart', {
type: 'bar',
data,
options
});
span {
font-style: italic;
font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="mychart" height="100"></canvas>
<span>Source: Animals Index, June 2022</span>
I am trying to use data from the table to create a bar graph using high-charts in rails.I have a table named school and it contains two columns i.e,name and attendance.I want to show student name on x-axis and attendance on y-axis.My JavaScript code is:
$(function () {
// Create the chart
$('#student')high-charts({
chart: {
type: 'column'
},
title: {
text: 'student details'
},
x Axis: {
type: 'category'
},
y Axis: {
title: {
text: 'Total attendance'
}
},
legend: {
enabled: false
},
plot-options: {
series: {
border-width: 0,
data-labels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tool-tip: {
header-format: '<span style="font-size:11px">{series.name}</span> <Br>',
point-format: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<BR/>'
},
series: [ {
name: 'Stu',
id: 'Stu',
data: [
[<%= #students.each do |s|%>
'<%= s.name %>',
<%= s.attendance%>
<%end%>
]
]
}
in my HTML i have :
<div class="col-md-8">
<div class="x_panel">
<div id="student" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</div>
</div>
I was unable to load the bar graph.Please help
try this
$(function () {
// Create the chart
new Highcharts.Chart({
chart: { renderTo: 'student' },
title: {
text: 'student details'
},
x Axis: {
type: 'category'
},
y Axis: {
title: {
text: 'Total attendance'
}
},
legend: {
enabled: false
},
plot-options: {
series: {
border-width: 0,
data-labels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tool-tip: {
header-format: '<span style="font-size:11px">{series.name}</span> <
Br>',
point-format: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<BR/>'
},
series: [ {
name: 'Stu',
id: 'Stu',
data: [
[<%= #students.each do |s|%>
'<%= s.name %>',
<%= s.attendance%>
<%end%>
]
]
}
Create a new highchart and render div in chart
I am trying to get my Ext.Menu with a list to respond to my event in my Controller.
I am not sure why I can not get a response from the list in the Ext.Menu.
Could someone please tell me what I am missing.
Thanks
Ext.define('Pear.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.Menu'
],
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Sliding Menu',
items: [
{
xtype: 'button',
id: 'listButton',
iconCls: 'list',
ui: 'plain',
handler: function(){
if(Ext.Viewport.getMenus().left.isHidden()){
Ext.Viewport.showMenu('left');
}
else
{
Ext.Viewport.hideMenu('left');
}
}
}
]
}
]
},
initialize: function(){
Ext.Viewport.setMenu(this.createMenu(),{
side: 'left',
reveal: true
});
},
createMenu: function(){
var menu = Ext.create('Ext.Menu', {
layout: 'fit',
width: 220,
xtype:'menuList',
items: [{
xtype: 'titlebar',
title: 'Side menu'
}, {
xtype: 'list',
itemTpl: '{title}',
//store: 'Beginning',
data: [{
title: 'Menu item 1'
}, {
title: 'Menu item 2'
},
{
title: 'Menu item 3'
}, {
title: 'Menu item 4'
}]
}]
});
return menu;
}
});
My Controller
Ext.define( 'Pear.controller.Main', {
extend:'Ext.app.Controller',
config:{
refs: {
Main: 'main',
},
control: {
'main list ':{
itemtap:function(list,index,target,record){
console.log("Option 2 Tapped");
}
},
},
}
});
Your list reference is wrong. Best way to get the reference of an item is to set a config name property to that item like this:-
{
xtype: 'list',
itemTpl: '{title}',
name: 'menu_list', // add this property to get the reference
data: [{
title: 'Menu item 1'
}, {
title: 'Menu item 2'
},
{
title: 'Menu item 3'
}, {
title: 'Menu item 4'
}]
}
Add the control in the controller:-
Ext.define( 'Pear.controller.Main', {
extend:'Ext.app.Controller',
config:{
refs: {
menuList : "list[name='menu_list']"
},
control: {
menuList : {
itemtap: function(list,index,target,record){
console.log("Option 2 Tapped");
}
}
}
}
});
I have added two buttons to my container and now tap on list items not working.Please help.
Code
Ext.define('X.SelectCategories', {
extend: 'Ext.Container',
xtype: 'selectcategorypanel',
id: 'SelectCategories',
requires:[
],
initialize:function(){
this.callParent();
jsonObject = Ext.create('Tablet').make_webservice_call('get_categories');
Ext.getCmp('select_category_list').setData(jsonObject.info);
console.log(jsonObject.info);
//this.getNavigationBar.hide();
},
config: {
//title : 'Select Categories',
//iconCls: 'team',
//styleHtmlContent: true,
// scrollable: true,
layout: {
type: 'fit'
},
items: [
{
//fullscreen: true,
mode: 'MULTI',
/*
layout: {
type: 'fit'
},
*/
//title:'Select Categories',
xtype: 'list',
itemTpl: '{name}',
autoLoad: true,
id:'select_category_list',
store: {
fields: ['name','title']
}
},
{
xtype: 'container',
//fullscreen: true,
layout: {
type: 'vbox'
},
flex : 1,
layout: {
type : 'hbox',
align: 'bottom'
},
defaults: {
xtype : 'button',
flex : 1,
margin: 10
},
items: [
{ui: 'round',ui:"confirm" ,text: 'Save',id: 'categorysaveButton'},
{ui: 'round', ui:"decline" ,text: 'Reset',id: 'categoryresetButton'}
]
}
]
}
})
Try extend Navigationview extend: 'Ext.navigation.View',
I'm trying to write simple view with list on container but i have some problems.
First of all, the List is not visible when I'm trying to do it like this:
Ext.define('App.view.News', {
extend: 'Ext.Container',
but when it's written like this:
Ext.define('App.view.News', {
extend: 'Ext.navigation.View',
it works.
The problem is that when I write it with extend of navigation.View, im getting two toolbars on top and I can't find solution to disable the second one (added by the list).
Full code:
Ext.define('App.view.News', {
extend: 'Ext.Container', //Ext.navigation.View
xtype: 'news',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
style: ' background-color:white;',
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'News',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton',
text: 'Back',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'list',
itemTpl: '{title},{author}',
store: {
autoLoad: true,
fields : ['title', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
]
}
});
Help please!
You need to give your container a layout and your list a flex property. The flex is important on lists as they don't have a viewable height since they scroll. I added a couple properties to your code below. Hope this helps.
Ext.define('App.view.News', {
extend: 'Ext.Container', //Ext.navigation.View
xtype: 'news',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
style: ' background-color:white;',
layout: 'vbox', // add a layout
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'News',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton',
text: 'Back',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'list',
itemTpl: '{title},{author}',
flex: 1, // add a flex property
store: {
autoLoad: true,
fields : ['title', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
]
}
});