Develop Reference

apache echart not working with pie drill down

the drill down for pie isnt working that well, can you please let me know what im missing?
i want to have a drill down bar chart however, i changed it to pie as its what i need but running into some issues - wondering if someone has done this before, and/ can help find issues with my code.
this is what it looks like right now, cant add legend or get rid of those x axis.
functionality is there but just want to make it work.
json.
{
"highLevelNumbers": [
1269,15,54624,827,42,20895,4856
],
"highLevel":
["Electrical Equipment",
"Enclosures",
"Instrument Equipment",
"Mechanical Equipment",
"Miscellaneous Equipment",
"Piping and Pipeline Equipment",
"Valve"],
"ElectricalEquipment":
[["earthing resistor",52],
["electric battery", 66],
["electric generator", 1],
["electrical control panel", 305],
["electrical isolator", 38],
["electrical switch", 43],
["electronic flow controller", 341],
["electronic level controller", 225],
["electronic pressure controller", 232],
["electronic temperature controller", 121]],
"Enclosures":
[["electrical control panel", 305],
["electrical isolator", 38],
["electrical switch", 43]],
"InstrumentEquipment":
[["electrical isolator", 38],
["electrical switch", 43],
["electronic flow controller", 341]],
"MechanicalEquipment":
[["earthing resistor",52],
["electrical control panel", 305]],
"MiscellaneousEquipment":
[["earthing resistor",52],
["electronic flow controller", 341]],
"PipingandPipelineEquipment":
[["earthing resistor",52],
["electronic flow controller", 341]],
"Valve":
[["earthing resistor",52],
["electrical switch", 43],
["electronic flow controller", 341]]
}
javascript:
function drilldownbar_Graph() {
//values from data_import
//fetch function
fetch("drilldown.json")
.then(function (u) {
return u.json();
})
.then(function (json) {
sketchingDrillDownGraph(json);
//calling and passing json to another function data_function
});
//start of function
function sketchingDrillDownGraph(data) {
//graph
var chartDom = document.getElementById("main6");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "Drill Down Category",
left: "center",
borderColor: "#796b94",
borderWidth: 0.1,
},
legend: {
show: true,
},
label: {
show: true,
},
toolbox: {
show: true,
feature: {
mark: { show: true },
restore: { show: true },
saveAsImage: { show: true },
},
},
xAxis: {
data: data.highLevel,
splitLine: {
show: false,
},
},
yAxis: {
splitLine: {
show: false,
},
},
dataGroupId: "",
animationDurationUpdate: 500,
series: {
type: "pie",
radius: ["35%", "65%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 9,
borderColor: "black",
borderWidth: 0.5,
},
id: "jafurah",
data: [
{
value: 5,
groupId: "electricalEquipment",
},
{
value: 2,
groupId: "Enclosures",
},
{
value: 4,
groupId: "InstrumentEquipment",
},
{
value: 4,
groupId: "MechanicalEquipment",
},
{
value: 4,
groupId: "MiscellaneousEquipment",
},
{
value: 4,
groupId: "PipingandPipelineEquipment",
},
{
value: 5,
groupId: "Valve",
},
],
universalTransition: {
enabled: true,
divideShape: "clone",
},
},
};
const drilldownData = [
{
dataGroupId: "electricalEquipment",
data: data.electricalEquipment,
},
{
dataGroupId: "Enclosures",
data: data.Enclosures,
},
{
dataGroupId: "InstrumentEquipment",
data: data.InstrumentEquipment,
},
{
dataGroupId: "MechanicalEquipment",
data: data.MechanicalEquipment,
},
{
dataGroupId: "MiscellaneousEquipment",
data: data.MiscellaneousEquipment,
},
{
dataGroupId: "PipingandPipelineEquipment",
data: data.PipingandPipelineEquipment,
},
{
dataGroupId: "Valve",
data: data.Valve,
},
];
myChart.on("click", function (event) {
if (event.data) {
var subData = drilldownData.find(function (data) {
return data.dataGroupId === event.data.groupId;
});
if (!subData) {
return;
}
myChart.setOption({
xAxis: {
data: subData.data.map(function (item) {
return item[0];
}),
},
series: {
type: "pie",
id: "jafurah",
dataGroupId: subData.dataGroupId,
data: subData.data.map(function (item) {
return item[1];
}),
universalTransition: {
enabled: true,
divideShape: "clone",
},
},
graphic: [
{
type: "text",
left: 50,
top: 20,
style: {
text: "Back",
fontSize: 18,
},
onclick: function () {
myChart.setOption(option);
},
},
],
});
}
});
option && myChart.setOption(option);
// getting the data [docs total by day]
}
}

To get rid of xAxis : just remove it in the chart options. (Both xAxis and yAxis actually, no need of that in a pie chart)
To display the legend, you have to set a name to each series.
series : {
data: [
{
value: 5,
groupId: "electricalEquipment",
name: "electricalEquipment", // add this line to each series data
},
...
]
}
Here is the full working code (note that I hardcoded the values instead of using your json file to make it easier for me).
I added a param (notMerge=true) in this method : myChart.setOption(option, true); (in the click event function) so that the "Back" button disappears when it cannot be used.

SAPUI5 export chart as an xlsx file

I have a simple chart and a button. In order to create the desired chart, I used the sap.viz.ui5.controls.VizFrame component.
The idea with the button is, when the user clicks on it, the chart has to be exported as an xlsx file.
I saw that there is the possibility to export sapui5 charts as images, but it is a requirement from my client to be exported as an xlsx file.
So, I'm looking for an external library or any other ideas or solutions, on the client-side, which can be used to export this chart as an xlsx file.
View :
sap.ui.jsview("app.views.chart", {
getControllerName: function() {
return "app.controllers.chart";
},
createContent: function(oController) {
var oModel = new sap.ui.model.json.JSONModel("app/model/chart.data.json");
oController.getView().setModel(oModel);
return new sap.m.App({
pages: [
new sap.m.Page({
title: "My fourth page",
content: [
new sap.m.Switch({
name: "Switch label",
state: true,
change: oController.onChange
}),
new sap.viz.ui5.controls.VizFrame("cars-chart-id", {
width: "100%",
height: "100%",
uiConfig: {
applicationSet: "fiori"
},
vizType: "bar",
vizProperties: {
plotArea: {
colorPalette: d3.scale.category20().range(),
dataLabel: {
visible: true
}
}
},
dataset: new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: "Model",
value: "{Model}"
}],
measures: [{
name: "Nr Cars",
value: "{Value}"
}]
}).bindData("/", null, null, []),
feeds: [
new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Model"]
}),
new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Nr Cars"]
})
]
})
]
})
]
});
}
});

Remove the option to enable hidden graph(X button ) in Amchart

I'm trying to enable and disable a graph from my code. I don't want the user to enable the hidden graphs from the UI using the cross button displayed against the hidden graphs in Amchart. How to remove the cross button when the graph is hidden from code ?
For the sake of demo I have hidden the graph on render to display the cross button.
Here is a DEMO.
Here is the code:
var chartData1 = [];
var chartData2 = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
var a2 = -1 * Math.round(Math.random() * (100 + i)) + 200 + i;
chartData1.push({
date: newDate,
value: a1
});
chartData2.push({
date: newDate,
value: a2
});
}
}
AmCharts.makeChart("chartdiv", {
type: "stock",
listeners: [{
event: "rendered",
method: hide
}],
dataSets: [{
title: "first data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}],
dataProvider: chartData1,
categoryField: "date"
},
{
title: "second data set",
fieldMappings: [{
fromField: "value",
toField: "value2"
}],
dataProvider: chartData2,
categoryField: "date",
compared: true
}
],
panels: [{
showCategoryAxis: false,
title: "Data set #1",
recalculateToPercents: "never",
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true
}],
stockLegend: {
}
}, {
showCategoryAxis: true,
title: "Data set #2",
recalculateToPercents: "never",
stockGraphs: [{
id: "g2",
valueField: "value2",
compareField: "value2",
comparable: true,
visibleInLegend: false
}],
stockLegend: {
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth:true,
cursorAlpha:0.1
},
periodSelector: {
periods: [{
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
function hide(chart){
chart.chart.panels[0].graphs[0].hidden = true;
}

Set visibleInLegend and compareGraphVisibleInLegend to false in the stock graph object you want to hide. The former works on the main dataset while the latter works on a compared dataset (Dataset 2 in your case).
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true,
visibleInLegend: false,
compareGraphVisibleInLegend: false //takes affect when dataset 1 becomes a compared dataset rather than the main one
}],
Updated codepen

How can I get the row value when edit any text in row of scrolling table in Gojs?

I'm working with scrolling table in Gojs.
I've set the property "editable: true" for my table. Now, suppose I've edited a text in any column of a row, then how can I get the data for this entire row or edited text?
Please let me know if you know this.
Here is my code:
var nodeJson;
var $ = go.GraphObject.make;
var inputFieldTable = [
{ ID: "001", Name: "Input 1", Text: "Err1" },
{ ID: "002", Name: "Input 2", Text: "Err2" },
{ ID: "003", Name: "Input 3", Text: "Err3" },
{ ID: "004", Name: "Input 4", Text: "Err4" }
];
var outputFieldTable = [
{ ID: "101", Name: "Output 1", Text: "Integer" },
{ ID: "102", Name: "Output 2", Text: "Integer" },
{ ID: "103", Name: "Output 3", Text: "Integer" },
{ ID: "104", Name: "Output 4", Text: "String" },
{ ID: "105", Name: "Output 5", Text: "String" },
{ ID: "106", Name: "Output 6", Text: "Double" }
];
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true,
allowMove: false,
allowDelete: true,
allowCopy: false,
allowDragOut: false,
allowDrop: false
});
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
{
selectionObjectName: "SCROLLING",
resizable: false, resizeObjectName: "SCROLLING",
portSpreading: go.Node.SpreadingNone
},
new go.Binding("location").makeTwoWay(),
$(go.TextBlock,
{ font: "bold 14px sans-serif" },
new go.Binding("text", "key")),
$(go.Panel, "Auto",
$(go.Shape, { fill: "white" }),
$("ScrollingTable",
{ stretch: go.GraphObject.Fill },
new go.Binding("TABLE.itemArray", "items"),
new go.Binding("TABLE.column", "left", function (left) { return left ? 2 : 0; }),
new go.Binding("desiredSize", "size").makeTwoWay(),
{
name: "SCROLLING",
desiredSize: new go.Size(100, 100),
"TABLE.itemTemplate":
$(go.Panel, "TableRow",
{
defaultStretch: go.GraphObject.Horizontal,
fromSpot: go.Spot.LeftRightSides,
toSpot: go.Spot.LeftRightSides,
fromLinkable: true,
toLinkable: true,
},
new go.Binding("portId", "Name"),
$(go.TextBlock, { column: 1 }, new go.Binding("text", "Name")),
$(go.TextBlock, { column: 2 }, new go.Binding("text", "Text"), { editable: true })
),
"TABLE.defaultColumnSeparatorStroke": "gray",
"TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
"TABLE.defaultRowSeparatorStroke": "gray",
"TABLE.defaultRowSeparatorStrokeWidth": 0.5,
"TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
}
)
)
);
myDiagram.model = $(go.GraphLinksModel,
{
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray: [
{
key: "Input", left: true, location: new go.Point(0, 0), size: new go.Size(170, 100),
items: inputFieldTable
},
{
key: "Output", location: new go.Point(300, 0), size: new go.Size(170, 100),
items: outputFieldTable, editable: true
}
]
});
//Function to handle editing of Scrolling Tables row data
myDiagram.addDiagramListener("TextEdited",
function (e) {
// alert("Text is changed.");
var part = e.subject.part;
if (part.data.key.toUpperCase() == "INPUT") {
myDiagram.rollbackTransaction();
return false;
}
else if (part.data.key.toUpperCase() == "OUTPUT") {
if ((part instanceof go.Node)) {
//NEED TO KNOW THE ENTIRE ROW DATA HERE
}
}
});

Are you asking about how to get to the item data from within your "TextEdited" listener?
e.subject will be the edited TextBlock.
e.subject.panel will be the containing Panel, which is a "TableRow" in your Panel.itemTemplate.
e.subject.panel.data will be the item data -- i.e. the data for that row.
This applies to all Panels with itemArrays -- not just in a "ScrollingTable".
It's a little odd for a TextBlock.editable TextBlock not to have a TwoWay Binding, but it can be OK depending on what you do in your "TextEdited" listener.

you'll have to get all the values from the model by calling the below
myDiagram.model.nodeDataArray
you'll then need to iterate through the objects to determine what values have changed.

How do I load a json file into Sencha Touch?

I'm trying to load a json-file into a list. Can anyone see what I'm doing wrong? I'm getting no error.
Data.js:
Ext.regModel('Contact', {
fields: ['bandName', 'playDate']
});
ListDemo.ListStore = new Ext.data.Store({
model: 'Contact',
sorters: 'bandName',
getGroupString : function(record) {
return record.get('bandName')[0];
},
/*data: [
{ bandName: "Bandname", playDate: "Thursday 20:00" }
]*/
proxy: {
type: 'scripttag',
url: 'http://domain.com/artists.json',
reader : {
type : 'json',
},
autoLoad: true
}
});
Index.js:
ListDemo = new Ext.Application({
name: "ListDemo",
launch: function() {
ListDemo.detailPanel = new Ext.Panel({
id: 'detailpanel',
tpl: 'Hello, {bandName}!',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
ListDemo.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
}
}]
}
]
});
ListDemo.listPanel = new Ext.List({
id: 'disclosurelist',
store: ListDemo.ListStore,
itemTpl: '<div class="contact">{bandName}<br /><span style="font-size:12px;">{playDate}</span></div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
ListDemo.detailPanel.update(record.data);
ListDemo.Viewport.setActiveItem('detailpanel');
}
});
ListDemo.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [ListDemo.listPanel, ListDemo.detailPanel]
});
}
});
My json-file:
[
{ "id": 1, "bandName": "Moe", "playDate": "Thursday" },
{ "id": 2, "bandName": "Larry", "playDate": "Thursday" },
{ "id": 3, "bandName": "Curly", "playDate": "Thursday" }
]
Can anyone see what I'm doing wrong?

Your JSON-file is in array format. Add a node that has this array as value, and then set the data node (of your proxy) in your Sencha Touch file to this node.
The JSON would look as follows:
"data": [
{ "id": 1, "bandName": "Moe", "playDate": "Thursday" },
{ "id": 2, "bandName": "Larry", "playDate": "Thursday" },
{ "id": 3, "bandName": "Curly", "playDate": "Thursday" }
]

You should using Chrome browse and Chrome Developer tools to debug your code. Your json file is correct.