I am trying to implement a SAPUI5 chart. I tried using the example in the Demo kit and now want to change it to use my data. I can get the chart to display but have a couple of issues.
1) I am having trouble with the 'name' of the dimensions and measures. From what I have had to do to get the chart to show, it seems as though the name has to match the field name in the 'value'. So for instance, if I have the field 'classProducts' I have this: value: {classProducts}' but of course that isn't much of a descriptive title. When I have had the name: 'XXX' if XXX is anything other than 'classProducts', I get this error:
"Failed to create chart:[50014] - Feed classProducts could not accept
more data containers."
From what I have found in documentation, the name is what you want to display in the legend and in the chart. Does anyone have any suggestions as to how to change the name shown to be any text I want?
2) I am using a Column chart and would like to compare a value between two years. I can get both years to display but is there a way to show each column in a different color? For instance, the value for 2013 is yellow and 2014 is blue?
3) Is there any known constraints on the height and width of a chart (minimum sizes)? I would like to make the chart real small, since I have to display a few at a time on the screen. I tried changing the width and height from the Demo Kit's values, but when I changed the values, the chart didn't show at all.
Here is my controller:
var oVizFrame = myView.byId("idVizFrameColumn");
var oPopOver = myView.byId("idPopOver");
var oModel = new JSONModel("ByYear_sum.json");
var oDataset = new FlattenedDataset({
dimensions: [{
name: "Year",
value: "{Year}"
}],
measures: [{
name: 'classProducts',
value: '{classProducts}'
}],
data: {
path: "/book"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
oVizFrame.setVizProperties({
valueAxis: {
label: {
formatString: 'u'
}
},
legend: {
title: {
visible: false
}
},
title: {
visible: true,
text: 'Classified Products'
}
});
var feedValueAxis = new FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["classProducts"]
}),
feedCategoryAxis = new FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Year"]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
oPopOver.connect(oVizFrame.getVizUid());
Here is my sample data (it is a subset of the original data from the Demo Kit but with my field inserted):
{
"book": [{
"Year": 2001,
"Profit": 213863.42,
"Unit Price": 3001.79,
"Units Available": 35255,
"Cost": 512189.07,
"Revenue": 726052.49,
"classProducts": 904.00,
"Units Sold": 12548
}, {
"Year": 2002,
"Profit": 224016.45,
"Unit Price": 2475.09,
"Units Available": 40748,
"Cost": 428884.52,
"Revenue": 652900.98,
"classProducts": 791.00,
"Units Sold": 12607
}]
}
As mentioned, I resolved the issue to question #1. The others have been resolved as I went in a different direction.
Related
I'm trying to recreate the ECharts "Multi Title Gauge" example (a gauge with three pointers in different colors) but using a dataset rather than the gauge data values in the series.data definition. While I can get this to work for a gauge with a single pointer, I cannot get it working for the "Multi Title Gauge".
I've been able to get this to work with line, bar and pie charts.
I did read that the datasets feature, while introduced in 5.0, is not supported by all chart types.
I was encouraged when I was able to get "Gauge Basic Chart" working with a dataset. But have not been able to get "Multi Title Gauge" to work with a dataset.
The closest I have gotten to having "Multi Title Gauge" use a dataset is by using multiple series' and datasets. Each dataset has only 1 value.
ChartOptions={
dataset: [
{ source: [ ["Series1"], [46] ] },
{ source: [ ["Series2"], [56] ] }
],
series: [
{
name: "Series1",
type: "gauge",
datasetIndex: 0,
progress: { show: true },
title: { offsetCenter: ["-60%", "82%"] },
detail: {
formatter: "R1",
offsetCenter: ["-60%", "97%"]
},
min: 0,
max: 180,
splitNumber: 9,
axisTick: { splitNumber: 4 }
},
{
name: "Series2",
type: "gauge",
datasetIndex: 1,
progress: { show: true },
title: { offsetCenter: ["0%", "82%"] },
detail: {
formatter: "R2",
offsetCenter: ["0%", "97%"]
},
min: 0,
max: 180,
splitNumber: 9,
axisTick: { splitNumber: 4 }
}
]
}
However, both pointers are blue - there is no automatic color change for the different series' and issues with the legend. There is quite a bit of repetition in the data configuration. Using a dataset would (as designed) separate the config from the data.
I have also tried a single dataset with multiple values and then using 'encode' in the series, but 'encode' seems to be ignored for Gauge.
My preference is to standardize on using a dataset for all my charts. But if it's not fully supported for Gauge, then I'll take a different approach.
Any insight would be appreciated.
I'm trying to get the row ID of a select editor in Tabulator.
I have a few hundred rows of values, some i want to have a value of yes, some of no. When I change the value I then need to know which row it is for.
Here is my table.
adtable = new Tabulator("#adtable", {
ajaxURL: "getinfo.php",
layout: "fitColumns",
pagination:"local",
placeholder: "No Data Set available",
paginationSize: 40,
paginationSizeSelector: [100, 200, 500, 1000],
columns: [{
title: "Key Name",
field: "keyname",
formatter: "textarea",
sorter: "string",
headerFilter: "input"
},
{
title: "Active",
field: "display",
editor: "select",
editorParams: {
values: ["Yes", "No"],
sortValuesList: "asc",
defaultValue: "Yes",
elementAttributes: {
maxlength: "10",
},
},
],
});
});
Where can I put a command which will give me the row number.?
I need to update a db record. basiclaly, set display = either yes or no.
My preference was a tickCross but couldnt work that out either.
Any assistance is greatly appreciated.
using Tabulator 4.9
After a bit more thinking... it was actually blindingly simple.
{
title: "Active",
field: "display",
editor: "select",
editorParams: {
values: ["Yes", "No"], //create list of values from all values contained in this column
sortValuesList: "asc", //if creating a list of values from values:true then choose how it should be sorted
defaultValue: "Yes", //set the value that should be selected by default if the cells value is undefined
elementAttributes: {
maxlength: "10", //set the maximum character length of the input element to 10 characters
},
},
cellEdited: function(row) {
let thisrow = row.getData()
alert(thisrow.id + "is now " + thisrow.display)
}
},
Added here to help others who might be banging their head against a wall. I was obviously thinking of something more complicated.
I am using more than one pie chart from amCharts on a single page, when the page is loading the animation is not working, and I want it to work. Below is my code which is used to render chart.
var Piechart132 = AmCharts.makeChart('div132', {
labelsEnabled: false,
autoMargins: false,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
pullOutRadius: 0,
type: 'pie',
theme: 'dark',
dataProvider: [
{ country: 'Banking', litres: 300000000 },
{ country: 'Carpenter', litres: 349500000000 },
{ country: 'Doctor', litres: 433650000000 },
{ country: 'Gas', litres: 108326000000 },
{ country: 'Mechanic', litres: 366450000000 }
],
outlineThickness: 1,
outlineAlpha: 1,
legend: { enabled: true, valueText : '' },
outlineColor: undefined,
titles: [{ text: 'Industry wise Exposure' }],
valueField: 'litres',
titleField: 'country',
balloon: { fixedPosition: true }
});
One more than I want to mention that same code when I execute on Fiddle, it is working fine, it might be possible that there is any other conflict but I can't find it anyway. I've even tried to insert startDuration and set its value to20` so that at least I can see what the problem is but still nothing.
The pie charts definitely do animate when multiple charts are on the same page, however they might all bog down the browser if they're all initialized at once, leading to a choppy experience where the animation runs too quickly or are so choppy that they appear to not work. You may want to consider a lazy-loading technique in which you use each chart's init event to initialize the next chart after a delay, or the lazy load techniques described in the AmCharts knowledge base links below:
https://www.amcharts.com/kbase/lazy-loading-120-charts-page/
https://www.amcharts.com/kbase/make-the-charts-lazy-initialize-only-when-they-scroll-into-view/
I have a kendo's scatterline chart on my HTML page.
I have generated it as following.
objchart = $("#chart").kendoChart({
dataSource: {
data: Chartdata
},
background: mainbackground,
series: [{
type: "scatterLine",
xField: "date"
}],
xAxis: {
title: {
text: "Date"
},
min: min_date,
max: max_date,
name: "Date",
template: "#= kendo.toString(value,'MM/dd/yyyy HH:mm:ss')#",
type: "date",
baseUnit: "seconds",
background: xaxisbackcolor,
},
yAxis: {
title: {
text: "Closing stock prices"
},
min: min_close,
max: max_symbol,
background: yaxisbackcolor,
},
title: {
text: "Close and Volume Date-wise"
},
transitions: false,
zoom: setRange,
dragStart: onDragStart,
drag: onDrag,
dragEnd: onDragEnd
}).data("kendoChart");
Following is my datasource (calling from web api)
[{"date":"9/14/2015 1:20:00 AM","close":6.0,"volume":18.0,"open":58.0,"high":42.0,"low":60.0,"symbol":79.0}]
Now, I need to change the type of the chart from scatter line chart into others like series and bar chart.
when I change it as objchart.options.series[0].type = "column", it does not give any output.
It only leaves the blank chart behind.
What is the correct method to change or cast the chart from any type to any other type?
Thank you
My json looks like this
var jStore = {
" identifier": "cpu",
"items": [
{
"Time": "02:52",
"Used": 100,
"Idle": 0
},
{
"Time": "02:57",
"Used": 100,
"Idle": 0
}....
]
};
I create a datastore and adding to the chart,
var realStore = new dojo.data.ItemFileReadStore({data: jStore});
var Ser = new dojox.charting.DataSeries(realStore, {query: {Idle: "*"} }, "Idle");
var Ser1 = new dojox.charting.DataSeries(realStore, {query: {Used: "*"} }, "Used");
chart.addAxis("x");
chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });
chart.addSeries("Used ",Ser);
chart.addSeries("Idle",Ser1);
the chart is rendering properly but the xaxis values are taken default (1,2,3..).
But i need to give the axis value as the Time in my json.
Xaxis should be like 02:52,02:54,02:56
Also in the tool tip it showing only the value i have given the series. But i would like to add the value+ xaxis value. Say for example 100 at 02:54.
Could someone help me on this.
You can specify custom labels for each value as follows:
mychart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: false,
font: "normal normal 10pt Arial",
labels: [{value: 1, text: "Q2 FY11"},
{value: 2, text: "Q3 FY11"},
{value: 3, text: "Q4 FY11"},
{value: 4, text: "Q1 FY12"}]
});
You can also specify custom tooltip text as follows:
mychart.addSeries("Series A", [{ y: 2.3, tooltip: "FFFF"}, { y: 3.5, tooltip: "GGGG"}]);
In your case since you are using a store, the JSON that feeds the store needs to have a "tooltip" attribute for each value - dojo will use that to populate the tooltip