Related
The chartjs documentation provides an example in which it is unclear where to define a name for the X-axis. For the Y-axes, everything is clear, and where to determine the name for the X-axis name from such a data set in the same way?
const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
const cfg = {
type: 'bar',
data: {
labels: ['Jan', 'Feb'],
datasets: [{
label: 'Net sales',
data: data,
parsing: {
yAxisKey: 'net'
}
}, {
label: 'Cost of goods sold',
data: data,
parsing: {
yAxisKey: 'cogs'
}
}, {
label: 'Gross margin',
data: data,
parsing: {
yAxisKey: 'gm'
}
}]
},
};
Can someone check my chart options and suggest a way to make the time xaxis behave correctly? I've tried with timestamps, dates, timestamps / 1000 and nothing looks right
let sales = [
0,84,5,3,2,1,0,0,3,6
]
let listings = [
1,297,23,5,8,6,9,3,6,19
]
let ps = [
1663084060653,
1663089644329,
1663095228005,
1663100811680,
1663106395356,
1663111979032,
1663117562708,
1663123146384,
1663128730059,
1663134313735
]
let color = "red"
option = {
textStyle: {
color
},
legend: {
textStyle: {
color
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'time',
data: ps,
// axisLabel: {
// formatter: ts => new Date(ts).toTimeString().replace(/ .*/, '')
// }
}
],
yAxis: [
{
// type: 'value'
}
],
series: [
{
name: 'Sales',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: sales
},
{
name: "Listings",
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: listings
}
]
}
Your series (listings & sales here) have to have a [date, value] format. Also, you'll have to remove data from xAxis as it will automatically follow the dates that are given in the series.
So, in your example :
//convert listings & sales to a list of [date, value]
listings = listings.map((value, index) => {
return [ps[index], value]
})
sales = sales.map((value, index) => {
return [ps[index], value]
})
xAxis: [
{
type: 'time',
//data: ps, <--- remove this line
}
],
I wish to use ECharts to implement a page. In this page, the user can use some buttons to add a node(or edge) or edit the name of a node(or edge). So I want to manipulate the nodes of a relation graph such as the force layout which is shown here:
https://echarts.apache.org/examples/en/editor.html?c=graph-force
Now my question is, since the data of the graph in the example is provided by a gexf file, is there any way to control them from javascript? Like adding a node, deleting a node, or editing a node(or edge).
The data used in the example is in XML format which is later converted to an array of objects, you can look at that format and generate your own using javascript. For instance,
var nodes = [
{
id: "0",
name: "",
itemStyle: null,
symbolSize: 50,
attributes: {
modularity_class: 0
},
value: 28.685715,
label: {
show: false
},
category: 0
},
{
id: "1",
name: "",
itemStyle: null,
symbolSize: 10,
attributes: {
modularity_class: 0
},
value: 4,
label: {
show: false
},
category: 0
},
{
id: "2",
name: "",
itemStyle: null,
symbolSize: 10,
attributes: {
modularity_class: 0
},
value: 9.485714,
label: {
show: false
},
category: 0
}];
var links = [
{
id: "0",
name: null,
source: "0",
target: "1",
lineStyle: {
normal: {}
}
},
{
id: "1",
name: null,
source: "0",
target: "2",
lineStyle: {
normal: {}
}];
I´m trying create a chart with a normal decimal scale on the left and a logarithmic scale on the right side.
the sample shows approximately my result, the only thing missing is that on the scale on the right side I need to present the value of 1000Hz at the exact middle point. (360 line)
function createTympaniHzChart() {
$("#chart5").kendoChart({
title: {
text: "..."
},
series: [{
colorField: "valueColor",
overlay: { gradient: "none" },
border: {
width: 0,
color: ""
},
data: [
{ value: 720, valueColor: "#C60C30" },
{ value: 355, valueColor: "#FFBE25" },
{ value: 340, valueColor: "#2EA1FF" }
]
}],
tooltip: {
visible: true,
format: "{0:0}",
template: "#= value #°"
},
categoryAxis: {
title: {
text: "Lorem Ipsum",
color: "#4D4D4D"
},
majorGridLines: {
visible: false
},
categories: ["A...", "B...", "C..."],
line: {
visible: false
},
axisCrossingValues: [0, 10]
},
valueAxis: [{
title: {
text: "° Insertion Depth",
color: "#4D4D4D"
},
max: 720,
majorUnit: 180,
line: {
visible: false
},
labels: {
format: "{0}°",
position: "start"
}
},
{
title: {
text: "° Pitch (Hz)",
color: "#4D4D4D"
},
max: 10000,
min: 100,
majorUnit:9900,
reverse: true,
line: {
visible: false
},
labels: {
format: "{0}Hz",
position: "end"
}
}
]
});
}
Is there any other way to add this value?
I manage t solve the issue with a custom function for the data and adding type: "log" property to the valueAxis.
Add this to the valueAxis:
data: fibonacciSequence()
The function:
function fibonacciSequence() {
for (i = 100; i <= 10000; i = i * 10) {
var fibAxisValues = [];
fibAxisValues.push(i);
}
return fibAxisValues;
}
I have a Dojo-DataGrid which is programatically populated as below :
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "json/gaskets.json" });
var layout= [
{ field: "description", width: "auto", name: "Tier/Description", editable:true },
{ field: "billingMethod", width: "auto", name: "Billing Method", editable: true,
type: dojox.grid.cells.Select, options: [ '0', '1' ] },
{ field: "offeringComponents", width: "auto", name: "Offering Component", editable: true,
type: dojox.grid.cells.Select, options: [ '0', '1' ] },
{ field: "serviceActivity", width: "auto", name: "Service Activity", editable: true,
type: dojox.grid.cells.Select, options: [ '0', '1' ] },
{ field: "hours", width: "auto", name: "Hours" },
{ field: "rate", width: "auto", name: "Rate <br/> (EUR)" },
{ field: "cost", width: "auto", name: "Cost <br/> (EUR)" },
{ field: "price", width: "auto", name: "Price <br/> (EUR)" },
{ field: "gvn", width: "auto", name: "Gvn" }
];
grid = new dojox.grid.DataGrid({
query: { description: '*' },
store: jsonStore,
structure: layout,
rowsPerPage: 20
}, 'gridNode');
The options for the field billingMethod (Currently defined as dojox.grid.cells.Select) are hard coded right now, but I would like to get those values dynamically from the backend as JSON. But dojox.grid.cells.Select currently(I am using Dojo 1.5) does not have a option to define a "store".
I am trying to use dijit.form.FilteringSelect, but this needs a id(of a Div) for its constructor and I cannot specify one as this select box has to go with in the grid, rather than a separate DIV.
Thanks
Sandeep
Your answer works fine, the issue is that in the combo the user can select A, but once the combo lose the focus, the value 1 will be shown. Some months ago I had the same problem, and I got a solution from KGF on #dojo. The idea is to have a formatter on the cell that just creates a SPAN element, and then it invokes a query over the store to get the label of the selected element and put it on the SPAN. I modified your example to get that working.
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");
dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');
var grid;
var jsonStore;
dojo.addOnLoad(function() {
jsonStore = new dojo.data.ItemFileWriteStore({
data: {
"identifier": "identify",
"label": "description",
"items": [
{
"identify": 123,
"description": "Project Manager"},
{
"identify": 234,
"description": "Developer"},
{
"identify": 536,
"description": "Developer",
"billingMethod":2}
]
}
});
var myStore = new dojo.data.ItemFileReadStore({
data: {
identifier: 'value',
label: 'name',
items: [{
value: 1,
name: 'A',
label: 'A'},
{
value: 2,
name: 'B',
label: 'B'},
{
value: 3,
name: 'C',
label: 'C'}]
}
});
//[kgf] callback referenced by formatter for FilteringSelect cell
function displayValue(nodeId, store, attr, item) {
if (item != null) { //if it's null, it wasn't found!
dojo.byId(nodeId).innerHTML = store.getValue(item, attr);
}
}
var layout = [
{
field: "identify",
width: "auto",
name: "Id 2 Hide",
hidden: true},
{
field: "description",
width: "auto",
name: "Tier/Description",
editable: true},
{
field: 'billingMethod',
name: 'Billing Method',
editable: true,
required: true,
width: '150px',
type: dojox.grid.cells._Widget,
widgetClass: dijit.form.FilteringSelect,
widgetProps: {
store: myStore
},
formatter: function(data, rowIndex) { //[kgf]
//alert("data "+data)
var genId = 'title' + rowIndex;
var store = this.widgetProps.store;
var attr = "label";
setTimeout(function() {
store.fetchItemByIdentity({
identity: data,
onItem: dojo.partial(displayValue, genId, store, attr)
});
}, 50);
//for now return a span with a predetermined id for us to populate.
return '<span id="' + genId + '"></span>';
}
}
];
grid = new dojox.grid.DataGrid({
query: {
description: '*'
},
store: jsonStore,
singleClickEdit: true,
structure: layout,
rowsPerPage: 20
}, 'gridNode');
grid.startup();
});
I was finally able to figure this out..Incase someone wants to implement same kind of stuff using DOJO Datagrid+FilteringSelect.
Sample Code
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");
dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');
var grid;
var jsonStore;
dojo.addOnLoad(function() {
jsonStore = new dojo.data.ItemFileWriteStore({
data: {
"identifier": "identify",
"label": "description",
"items": [
{
"identify": 123,
"description": "Project Manager"},
{
"identify": 234,
"description": "Developer"},
{
"identify": 536,
"description": "Developer"}
]
}
});
var myStore = new dojo.data.ItemFileReadStore({
data: {
identifier: 'value',
label: 'name',
items: [{
value: 1,
name: 'A',
label: 'A'},
{
value: 2,
name: 'B',
label: 'Y'},
{
value: 3,
name: 'C',
label: 'C'}]
}
});
var layout = [
{
field: "identify",
width: "auto",
name: "Id 2 Hide",
hidden: true},
{
field: "description",
width: "auto",
name: "Tier/Description",
editable: true},
{
field: 'billingMethod',
name: 'Billing Method',
editable: true,
required: true,
width: '150px',
type: dojox.grid.cells._Widget,
widgetClass: dijit.form.FilteringSelect,
widgetProps: {
store: myStore
}}
];
grid = new dojox.grid.DataGrid({
query: {
description: '*'
},
store: jsonStore,
singleClickEdit: true,
structure: layout,
rowsPerPage: 20
}, 'gridNode');
grid.startup();
});