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"]
})
]
})
]
})
]
});
}
});
Related
I am trying to show VIZ chart from SAPUI5 but unable to bind data received from model. It throws [50017] - Invalid data binding error. I am posting my code below please have a look at it and help me find the causs.
var assignedContentData = {
"AssignedContentData": [{
"description": "Capital",
"newsletter": 2,
"press_release": 12,
"letter": 1,
"notice": 0,
"bulletin_memorandum": 0
}, {
"description": "NA",
"newsletter": 0,
"press_release": 0,
"letter": 0,
"notice": 1,
"bulletin_memorandum": 0
}, {
"description": "Equity",
"newsletter": 0,
"press_release": 4,
"letter": 0,
"notice": 5,
"bulletin_memorandum": 12
}]
};
var oAssignContentModel = new sap.ui.model.json.JSONModel({
data: assignedContentData
});
sap.ui.getCore().setModel(oAssignContentModel, "oAssignContentModel");
var assignedContentBarChart = new sap.viz.ui5.controls.VizFrame("assignedContentBarChart", {
vizType: "stacked_column"
});
var oDatasetAssignedContentBar = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Description",
value: "{description}"
}],
measures: [{
name: "Newsletter",
value: "{newsletter}"
}],
data: {
path: "/data/AssignedContentData"
}
});
var feedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Newsletter"]
});
var feedCategoryAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Description"]
});
var feedColorAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["Newsletter", "Press_Release", "Letter", "Notice", "Bulletin_memorandum"]
});
assignedContentBarChart.setVizProperties({
plotArea: {
dataLabel: {
visible: true,
formatString: "#,##0"
}
},
legend: {
title: {
visible: false
}
},
title: {
visible: true,
text: 'Bar Chart'
}
});
assignedContentBarChart.setDataset(oDatasetAssignedContentBar);
assignedContentBarChart.addFeed(feedValueAxis1);
assignedContentBarChart.addFeed(feedCategoryAxis1);
Your binding is incorrect. As your model name is oAssignContentModel, it must be reflected in the binding as well in the data property assignment:
var oDatasetAssignedContentBar = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Description",
value: "{description}"
}],
measures: [{
name: "Newsletter",
value: "{newsletter}"
}],
data: {
path: "oAssignContentModel>/data/AssignedContentData"
}
});
Or you can remove the name from the model, and you can leave the data binding as it is now:
sap.ui.getCore().setModel(oAssignContentModel);
I am new to EXTJS. Now im trying to develop simple pivot grid example. my code is:
Ext.onReady(function () {
var myStore = new Ext.data.ArrayStore({
autoLoad: true,
fields: ['gender',
{ name: 'birthDecade', type: 'int' },
{ name: 'peoples', type: 'int' }
],
url: 'countries.json'
});
var pivotGrid = new Ext.grid.PivotGrid({
title: 'Number of people born per decade',
width: 600,
height: 91,
renderTo: 'docbody',
store: myStore,
aggregator: 'count',
topAxis: [
{
width: 80,
dataIndex: 'birthDecade'
}
],
leftAxis: [
{
dataIndex: 'gender'
}
],
});
});
JSON DATA :
[["Male","2010","1"],
["Female","1940","2"],
["Male","1960","3"],
["Female","1980","4"],
["Female","2000","5"],
["Male","2010","5"],
["Male","2030","6"],
["Female","1000","7"]]
And output is :
But i want to show data that i gave in json (3rd column.values-1,2,3,4,5,6,7). how to achieve it?.thanks in advance.
As u used count as aggregator its shows like that. in 2000 one female count is there . for same in 2010 two rows of male count there . So that it shows like that.
If u want to show some numbers in output u can use like this,
Ext.onReady(function () {
var myStore = new Ext.data.ArrayStore({
autoLoad: true,
fields: ['gender',
{ name: 'birthDecade', type: 'int' },
{ name: 'peoples', type: 'int' }
],
url: 'countries.json'
});
var pivotGrid = new Ext.grid.PivotGrid({
title: 'Number of people born per decade',
width: 600,
height: 91,
renderTo: 'docbody',
store: myStore,
aggregator: 'sum',
measure: 'peoples',
topAxis: [
{
width: 80,
dataIndex: 'birthDecade'
}
],
leftAxis: [
{
dataIndex: 'gender'
}
],
});
});
I have the following code in my model controller. Even though I have a series of objects in the data, however it does not show/update the bar column on the chart.
I wonder where am I doing wrong or missing?
Model.js
var theDataSource = new kendo.data.DataSource({
data: allData,
group: {
field: "series"
},
sort: {
field: "category",
dir: "asc"
}
});
chart.dataSource = theDataSource;
chart.refresh();
View.js
$("#chart").kendoChart({
title: {
text: "Selection",
color: "white"
},
theme:"Metro",
seriesDefaults: {
type: "column",
stack: true,
},
series: [{
field: "value",
}]
})
Use setDataSource() to set the datasource, this will notify the chart that the datasource has changed.
var theDataSource = new kendo.data.DataSource({
data: allData,
group: {
field: "series"
},
sort: {
field: "category",
dir: "asc"
}
});
chart.setDataSource(theDataSource);
I am newbie parsing JSON object to highchart and I would like to plot basic bar graph.
I have done on the title of graph. The problem is that the series that I would like to show is not showing.(count as series and qpAnswer as xAxis).
Here is my JSON data
[
{
qpQuestion: "Is that a dog?",
qpAnswerId: "1",
qpAnswer: "Yes",
count: "0"
},
{
qpQuestion: "Is that a dog?",
qpAnswerId: "2",
qpAnswer: "No",
count: "0"
},
{
qpQuestion: "Is that a dog?",
qpAnswerId: "3",
qpAnswer: "ok",
count: "0"
}
]
Here is my JS
var url="sections.php?request=graph";
$.getJSON(url,function(data1){
var options={
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: data1[0].qpQuestion
},
xAxis:{
categories: data1.qpAnswer
title: {
text: 'Answer'
}
},
yAxis: {
min: 0,
title: {
text: 'Answer Count'
}
},
series:data1
};
var chart = new Highcharts.Chart(options);
});
You can pre-process the data to form like
var answers = ['Yes','No' ,'OK'];
var answer_counts= [
{name: 'Yes', data : [2,0,0]},
{name: 'No', data: [0,3,0]},
{name: 'OK', data: [0,0,1]} ];
Then plot it with
var options={
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text:'QA Answers'
},
xAxis:{
categories: answers,
title: {
text: 'Answer'
}
},
yAxis: {
min: 0,
title: {
text: 'Answer Count'
}
},
series:answer_counts
};
var chart = new Highcharts.Chart(options);
I have done in the fiddle, http://jsfiddle.net/gwC2V/1/
Let us know if it helps.
Below Example can help you
The JSON file
[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]
use getJSON() to retrive data from JSON file and Populate to CHART
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
Here is link
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.