I am just learning ExtJs-4.
I am stuck to create chart bar on the panel.
It's just same code from official Ext website.
This is my panel that has the code to create the chart, model, and store.
Ext.define("park.view.mainPanel",{
extend:'Ext.panel.Panel',
alias: 'widget.mainPanel',
title: 'edit User',
initComponent: function(){
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: ['temperature', 'date']
});
var store = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
{ temperature: 58, date: new Date(2011, 1, 1, 8) },
{ temperature: 63, date: new Date(2011, 1, 1, 9) },
{ temperature: 73, date: new Date(2011, 1, 1, 10) },
{ temperature: 78, date: new Date(2011, 1, 1, 11) },
{ temperature: 81, date: new Date(2011, 1, 1, 12) }
]
});
var chart = Ext.create('Ext.chart.Chart', {
store: store,
theme: 'Category1',
});
this.callParent(arguments);
}
});
It should be really easy if someone knows it.
But hard to fix it to noobie like me.
You should add chart as your panel child. Try adding this.items = [chart]; before this.callParent(arguments);
You are missing chart axes and series in your chart definition.
Related
I am looking for a way to make a break in the display name and it seems impossible to me.
I'm right? I mean the data attribute: [{ }]
for example I need a space in name: link nameA/B and I dont want to use link_nameA
Morris.Area({
element: 'myfirstchart',
data: [{
date: '2021-10-19',
link nameA: 2,
link nameB: 3,
extra: 0
},
{
date: '2021-10-20',
link nameA: 5,
link nameB: 4,
extra: 0
}
],
xkey: 'date',
ykeys: ['link nameA', 'link nameB', 'extra'],
xLabels: 'day',
labels: ['link nameA', 'link nameB', 'extra'],
pointSize: 3,
fillOpacity: 0,
pointStrokeColors: ['#00bfc7', '#00bfc7', '#9675ce'],
behaveLikeLine: true,
gridLineColor: '#e0e0e0',
lineWidth: 3,
hideHover: 'auto',
lineColors: ['#0bc36e', '#00bfc7', '#9675ce'],
dateFormat: function(date) {
d = new Date(date);
return d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear();
},
resize: true
});
is there any way to fulfill my need? because with space script will not working.
thanks.
With JavaScript, object keys can contain spaces if the key is wrapped in quotes.
const data = {
"link nameA": "foobar",
}
console.log(data['link nameA'])
I am stuck on a page where i am not able to display the charts on the page.
To make it simplify what I have done is, here is the code sandbox:
I see there an error in console about the data, I am not sure about it.
https://codesandbox.io/s/compassionate-snyder-bckoq
I want to display the chart like this (as an example), but I am not able to display on the code sandbox
Please help.
The format of series is not aligned with ApexCharts.
You need to transform the data to match with ApexChart format.
Please see the changes in the codesandbox.
https://codesandbox.io/s/small-dew-eztod?file=/src/components/HelloWorld.vue
options: {
// X axis labels
xaxis: {
type: 'date',
categories: ["2021-05-04", "2021-05-05", "2021-05-07"]
},
},
series: [
{
name: "total",
data: [2, 2, 1],
},
{
name: "pending",
data: [0, 1, 0],
},
{
name: "approved",
data: [2, 1, 1],
},
{
name: "rejected",
data: [0, 0, 0],
},
],
Transform data to fit ApexChart
const data = {
"2021-05-04": {
total: 2,
pending: 0,
approved: 2,
rejected: 0,
},
"2021-05-05": {
total: 2,
pending: 1,
approved: 1,
rejected: 0,
},
"2021-05-07": {
total: 1,
pending: 0,
approved: 1,
rejected: 0,
},
};
const xaxis = {
type: "date",
categories: Object.keys(data).map((key) => key), // ['2021-05-04', '2021-05-05', '2021-05-07']
};
let statusObj = [];
for (const dataValue of Object.values(data)) { // get the values from keys '2021-05-04', '2021-05-05' ...
// loop the values, e.g. 1st loop: { total: 2, pending: 0, approved: 2, rejected: 0, }
for (const [key, value] of Object.entries(dataValue)) {
// take 'total' as example, find if statusObj already has { name: 'total', data: [x] }, e.g. statusObj = { name: 'total', data: [1] }
const existingStatusIndex = Object.keys(statusObj).find(
(sKey) => statusObj[sKey].name === key
);
// if yes, return the index of it
if (existingStatusIndex) {
// add new data value to existing data object. e.g. { name: 'total', data: [1, 2] }
statusObj[existingStatusIndex].data.push(value);
continue;
}
// if no, create a new object and add it to statusObj
statusObj.push({
name: key,
data: [value],
});
}
}
Output:
xaxis {
type: 'date',
categories: [ '2021-05-04', '2021-05-05', '2021-05-07' ]
}
statusObj [
{ name: 'total', data: [ 2, 2, 1 ] },
{ name: 'pending', data: [ 0, 1, 0 ] },
{ name: 'approved', data: [ 2, 1, 1 ] },
{ name: 'rejected', data: [ 0, 0, 0 ] }
]
I am trying to make my map zoom in to a cluster when the user clicks the cluster. The map is built with mapbox gl and Vue-Mapbox. I understand I can use the getClusterExpansionZoom() method to do so, but the first step is detecting which cluster the user clicked on. My #click handler does not detect clicks. Why not? What must I change? Cheers
<template>
<div>
<MglMap>
<MglGeojsonLayer
class="mgl-clusters-layer"
layerId="clustersLayerId"
:layer="clustersLayer"
:source="clustersSource"
sourceId="clustersSourceId"
#click="clickedCluster()"
/>
</div>
</template>
These variations also do not work...
#click="clickedCluster"
#map-click="clickedCluster()"
#click.prevent="clickedCluster"
Here is my event handler...
methods: {
clickedCluster() {
console.log("clicked cluster");
}
}
Here is the definition of the clustersSource object
clustersSource: {
type: "geojson",
cluster: true,
clusterRadius: 25,
clusterProperties: { sum: ["+", ["get", "docCount"]] },
data: {
type: "FeatureCollection",
features: []
}
},
data.features array of simple geojson points
Here is the definition of clustersLayer...
clustersLayer: {
id: util.getRandomValue(),
type: "circle",
filter: ["has", "point_count"],
paint: {
"circle-color": "#6a0dad",
"circle-opacity": 0.4,
"circle-stroke-color": "#6a0dad",
"circle-stroke-width": 1,
"circle-radius": [
"step",
["get", "sum"],
8,
100,
10,
1000,
12,
10000,
14,
100000,
16,
1000000,
18
]
}
},
This works...
//Make map zoom to a districts cluster when user clicks the cluster
this.map.on("click", "clustersLayerId", function(e) {
var features = $this.map.queryRenderedFeatures(e.point, {
layers: ["clustersLayerId"]
});
$this.map.easeTo({
center: features[0].geometry.coordinates,
zoom: $this.map.getZoom() + 1
});
});
You also have to specify the id in the clustersLayer object...
clustersLayer: {
id: "clustersLayerId",
type: "circle",
filter: ["has", "point_count"],
paint: {
"circle-color": "#6a0dad",
"circle-opacity": 0.4,
"circle-stroke-color": "#6a0dad",
"circle-stroke-width": 1,
"circle-radius": [
"step",
["get", "sum"],
8,
100,
10,
1000,
12,
10000,
14,
100000,
16,
1000000,
18
]
}
},
I am struggling to use callout line with client-side graphics.
I followed the "Point styles for cities" example which uses a feature layer from the "LyonPointsOfInterest (FeatureServer)".
But it doesn't work with a feature layer which creates client-side graphics based on data returned from a web service.
Is there a limitation on 3d callout line?
Here's my code snippet:
Create a feature layer based on layer definition:
featureLayer = new FeatureLayer({
fields: this.layerDefinition.fields,
objectIdField: this.layerDefinition.objectIdField,
geometryType: this.layerDefinition.geometryType,
id: this.layerId
});
Set elevation and feature reduction and renderer:
featureLayer.elevationInfo = {
// elevation mode that will place points on top of the buildings or other SceneLayer 3D objects
mode: "relative-to-scene"
};
// feature reduction is set to selection because our scene contains too many points and they overlap
featureLayer.featureReduction = {
type: "selection"
};
featureLayer.renderer = this._getUniqueValueRenderer() as any as Renderer// callout render
Here the renderer code:
_getUniqueValueRenderer() {
let verticalOffset = { // verticalOffset shifts the symbol vertically
screenLength: 150, // callout line length
maxWorldLength: 200,
minWorldLength: 35
},
uniqueValueRenderer = {
type: "unique-value", // autocasts as new UniqueValueRenderer()
field: "AQHI",
uniqueValueInfos: [{
value: 1,
symbol: this._get3DCallOutSymbol(verticalOffset, "Museum.png", "#D13470")
}, {
value: 2,
symbol: this._get3DCallOutSymbol(verticalOffset, "Restaurant.png", "#F97C5A")
}, {
value: 3,
symbol: this._get3DCallOutSymbol(verticalOffset, "Church.png", "#884614")
}, {
value: 4,
symbol: this._get3DCallOutSymbol(verticalOffset, "Hotel.png", "#56B2D6")
}, {
value: 5,
symbol: this._get3DCallOutSymbol(verticalOffset, "Park.png", "#40C2B4")
}, {
value: 6,
symbol: this._get3DCallOutSymbol(verticalOffset, "Museum.png", "#D13470")
}, {
value: 7,
symbol: this._get3DCallOutSymbol(verticalOffset, "beer.png", "#F97C5A")
}, {
value: 8,
symbol: this._get3DCallOutSymbol(verticalOffset, "senate.png", "#884614")
}, {
value: 9,
symbol: this._get3DCallOutSymbol(verticalOffset, "Hotel.png", "#56B2D6")
}, {
value: 10,
symbol: this._get3DCallOutSymbol(verticalOffset, "Park.png", "#40C2B4")
}
]};
return uniqueValueRenderer;
}
_get3DCallOutSymbol(verticalOffset: any, iconName: string, color: string) {
return {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "icon", // autocasts as new IconSymbol3DLayer()
resource: {
href: this.iconPath + iconName
},
size: 20,
outline: {
color: "white",
size: 2
}
}],
verticalOffset: verticalOffset,
callout: {
type: "line", // autocasts as new LineCallout3D()
color: "white",
size: 2,
border: {
color: color
}
}
};
}
Set source to an array of graphics, generated based web service data
featureLayer.source = graphics;
You should not use this.layerDefinition in the instanciation a your new FeatureLayer, but put it in a new var. Idem for this.layerId :
var layerDef = this.layerDefinition;
var lyrId = this.layerId;
featureLayer = new FeatureLayer({
fields: layerDef.fields,
objectIdField: layerDef.objectIdField,
geometryType: layerDef.geometryType,
id: lyrId
});
because this. at this place, is in the scope of new Feature()
I new to learn dojo and trying to learn by it using samples code.
Using dojo 1.6
With help of sample codes , I created a tree
now i want to apply sorting on root and also on child.
With the help of this sample code , i changed the code
Output is not sorted n but the root folder has changed their position and child is deleted.
Plz help me to resolve this.
My code :
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.Tree");
var data = [ { id: 1, name: "answerTypeLabel", type:'scenario', children:[{_reference: 2}]},
{ id: 2, name: "acceptRequestLabel", type:'paragraph', data: "acceptRequestLabel"},
{ id: 3, name: "rejectRequestLabel", type:'scenario', children:[{_reference: 5},{_reference: 6}]},
{ id: 4, name: "MoreInformationLabel", type:'scenario', children:[{_reference: 7},{_reference: 8}]},
{ id: 5, name: "rejectRequestStatusLabel", type:'paragraph', data: "rejectRequestStatusLabel"},
{ id: 6, name: "rejectRequestNotCoveredLabel", type:'paragraph', data: "rejectRequestNotCoveredLabel" },
{ id: 7, name: "MoreInformationDocumentLabel", type:'paragraph', data: "MoreInformationDocumentLabel"},
{ id: 8, name: "MoreInformationDataLabel", type:'paragraph', data: "MoreInformationDataLabel"}
];
dojo.addOnLoad(function() {
var sortableStore = new dojo.data.ItemFileReadStore({
data: {
identifier: 'id',
label: 'name',
items: data
}
});
var model = new dijit.tree.ForestStoreModel({
rootLabel: 'Names',
store: new dojo.data.ItemFileWriteStore({
data: {
identifier: 'id',
items: [],
label: 'name'
}
}) // blank itemsstore
})
var tree = new dijit.Tree({
model: model,
updateItems: function(items) {
var self = this;
console.log('pre', this.model.root.children);
dojo.forEach(items, function(newItem) {
console.log('add', newItem);
try {
self.model.store.newItem({
id: sortableStore.getValue(newItem, 'id'),
name: sortableStore.getValue(newItem, 'name'),
type: sortableStore.getValue(newItem, 'type'),
data: sortableStore.getValue(newItem, 'data'),
});
} catch (e) {
console.log(e);
}
});
console.log('post', this.model.root.children);
console.log("children: ", this.rootNode.getChildren());
},
});
tree.placeAt(dojo.body());
sortableStore.fetch({
query: {
type:'scenario'
},
sort: [{
attribute: "name"}],
onComplete: function(items) {
console.log(items, 'sorted');
tree.updateItems(items);
}
})
});
Output :
The 'Names' origins from you setting 'rootLabel'.
Btw, fiddles have revisions and is simply a paste-bin like feature :)
You need to use the tree model pasteItem to insert referenced items (the 'children' property of each 'newItem').
Otherwise, there's another approach, if you get rid of the '_reference' structure of your data. See: http://jsfiddle.net/GHFdA/1/