My vizframe has multiple Measures. I want to have 1 reference line for each measure.
How can I add more than 1 reference line to the chart using setVizProperties?
current code which adding 1 reference line
var oChart = sap.ui.getCore().byId("mainPageView--idVizFrame");
oChart.setVizProperties({
plotArea: {
dataLabel: {
visible: true
},
referenceLine: {
line: {
valueAxis: [{
value: value1,
visible: show,
size: 1,
type: "dotted",
label: {
text: "Target:" + value1 + strrange,
visible: show
}
}]
}
}
}
});
the following code solves this issue
var RefLines2 = [];
var TargetValues = [40, 50, 60, 70];
for (var i = 0; i < TargetValues.length; i++) {
RefLines2.push({
value: TargetValues[i],
visible: show,
size: 1,
type: "dotted",
label: {
text: "Target:" + TargetValues[i] + strrange,
visible: show
}
}
);
}
oChart.setVizProperties({
plotArea: {
dataLabel: {
visible: true
},
referenceLine: {
line: {
valueAxis: RefLines2
}
}
}
});
Related
Two custom feature added in toolbox. I need functionality where in we can reset one feature on click of another.
like existing feature 'zoom' button and 'horizontally select' brush button. If we click the zoom button first and then click on brush button then zoom button automatically gets reset to default.
below is the reference code -
`function func(x) {
x /= 10;
return Math.random() * 22;
}
function generateData() {
let data = [];
for (let i = 0; i <= 10; i += 0.1) {
data.push([i, func(i)]);
}
return data;
}
var isPointSelect = false;
var rangeSelector = false;
option = {
animation: false,
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
},
myRangeSelector: {
show: true,
title: 'Range Selector',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (model, api, type) {
// debugger;
rangeSelector = !rangeSelector;
this.model.setIconStatus(type, rangeSelector ? 'emphasis' : 'normal');
}
},
myPointSelect: {
show: true,
title: 'Point Select',
icon: 'path://M432.45,595.444c0,2.177-4.689,6.82-11.305,6.82r-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M621.146,591.294c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (model, api, type) {
isPointSelect = !isPointSelect;
this.model.setIconStatus(type, isPointSelect ? 'emphasis' : 'normal');
}
},
brush: {
type: ['lineX', 'clear', 'keep']
}
}
},
brush: {
xAxisIndex: 'all',
brushLink: 'all',
brushStyle: {
color: 'white'
},
outOfBrush: {
colorAlpha: 0.1
}
},
graphic: {
elements: []
},
grid: {
top: 100,
left: 50,
right: 40,
bottom: 50
},
xAxis: {
minorTick: {
show: true
},
minorSplitLine: {
show: true
}
},
yAxis: {
minorTick: {
show: true
},
minorSplitLine: {
show: true
}
},
series: [
{
type: 'line',
showSymbol: false,
clip: true,
data: generateData(),
markArea: {
data: []
}
}
]
};`
Echart has similar functionality for zoom and brush feature.
I need to set the scale for valueAxis to auto i.e. without mentioning min and max in setVizScales method.
Is there any way we can use https://sapui5.hana.ondemand.com/sdk/#/api/sap.chart.ScaleBehavior` in Viz chart.
So that values with small differences can be placed away from each other unlike one in the below image
valueAxisScale: {
scaleBehavior: sap.chart.ScaleBehavior,
autoScaleSettings: {
syncWith: sap.chart.AutoScaleMode.VisibleData
}
}
in the xml file you define a VizFrame:
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"
height='100%' width="100%" vizType='line'>
<viz:VizFrame>
in js file you initial the VizFrame:
onInit: function (evt) {
var oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.setVizProperties({
plotArea: {
dataLabel: {
formatString: formatPattern.SHORTFLOAT_MFD2,
visible: true
}
},
valueAxis: {
label: {
formatString: formatPattern.SHORTFLOAT
},
title: {
visible: false
}
},
valueAxisScale: "AutoScale",
categoryAxis: {
title: {
visible: false
}
},
title: {
visible: false,
text: 'Revenue by City and Store Name'
}
});
}
in the js code you can see the option:
valueAxisScale: "AutoScale"
I have a column chart with positive and negative values. Using the default dataLabels, keeps the label at the end of the column, which isn't ideal for negative values, as it goes below the x axis.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
height: 200,
borderColor: '#ddd'
},
title: {
text: ''
},
legend: {
padding: 0,
margin: 5
},
credits: {
enabled: true
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
}
},
colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],
loading: {
labelStyle: {
top: '35%',
fontSize: "2em"
}
},
xAxis: {
categories: ["7/12", "7/13", "7/14", "7/15", "7/16"]
},
series: [{
"name": "Odometer",
"data": [{
"y": 94.98
}, {
"y": 182.96
}, {
"y": -160.97
}, {
"y": -18.00
}, {
"y": 117.97
}]
}]
});});
Example: http://jsfiddle.net/absessive/NKXRk/54/
Add plotOptions.column.stacking as normal like this and it will work.
You can change a little bit Highcharts.seriesTypes.column.prototype.alignDataLabel function, so it will not have functionality of aligning the dataLabel below your column if its value is smaller than 0.
Here you can find code that may help you:
H.seriesTypes.column.prototype.alignDataLabel = function(point, dataLabel, options, alignTo, isNew) {
var inverted = this.chart.inverted,
pick = H.pick,
Series = H.Series,
series = point.series,
merge = H.merge,
dlBox = point.dlBox || point.shapeArgs, // data label box for alignment
below = false,
inside = pick(options.inside, !!this.options.stacking), // draw it inside the box?
overshoot;
// Align to the column itself, or the top of it
if (dlBox) { // Area range uses this method but not alignTo
alignTo = merge(dlBox);
if (alignTo.y < 0) {
alignTo.height += alignTo.y;
alignTo.y = 0;
}
overshoot = alignTo.y + alignTo.height - series.yAxis.len;
if (overshoot > 0) {
alignTo.height -= overshoot;
}
if (inverted) {
alignTo = {
x: series.yAxis.len - alignTo.y - alignTo.height,
y: series.xAxis.len - alignTo.x - alignTo.width,
width: alignTo.height,
height: alignTo.width
};
}
// Compute the alignment box
if (!inside) {
if (inverted) {
alignTo.x += below ? 0 : alignTo.width;
alignTo.width = 0;
} else {
alignTo.y += below ? alignTo.height : 0;
alignTo.height = 0;
}
}
}
// When alignment is undefined (typically columns and bars), display the individual
// point below or above the point depending on the threshold
options.align = pick(
options.align, !inverted || inside ? 'center' : below ? 'right' : 'left'
);
options.verticalAlign = pick(
options.verticalAlign,
inverted || inside ? 'middle' : below ? 'top' : 'bottom'
);
// Call the parent method
Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
};
The only change I have made is that I have changed below parameter to false.
Here you can find an example how it can work:
http://jsfiddle.net/NKXRk/59/
Best regards,
i am using sencha touch to show a chart and add data to store of chart dynamically.but when i add data to store, my chart does not update result.
this is code of my chart:
Ext.define('MyApp.view.MyLineChart1', {
extend: 'Ext.chart.CartesianChart',
requires: [
'Ext.chart.axis.Category',
'Ext.chart.axis.Numeric',
'Ext.chart.series.Line'
],
config: {
itemId: 'xy',
store: 'MyStore',
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111'
],
axes: [
{
type: 'category',
fields: [
'x'
],
maximum: 5,
minimum: 0
},
{
type: 'numeric',
fields: [
'y'
],
grid: {
odd: {
fill: '#e8e8e8'
}
},
position: 'left'
}
],
series: [
{
type: 'line',
colors: 'rgba(0,200,0,0.3)',
style: {
smooth: true,
stroke: 'rgb(0,200,0)',
},
xField: 'x',
yField: 'y'
}
],
listeners: [
{
fn: 'onChartShow',
event: 'show',
order: 'after'
}
]
},
onChartShow: function(component, eOpts) {
var TaskRunner = Ext.create("MyApp.controller.TaskRunner");
chart = Ext.ComponentQuery.query("#xy")[0];
store = chart.getStore();
chart.animationSuspended = true;
chart.update();
store.removeAll();
this.timeChartTask = TaskRunner.start({
run: this.update_chart,
interval: 1000,
repeat: 10,
scope: this
});
},
update_chart: function(chart) {
var me = this;
chart = Ext.ComponentQuery.query("#xy")[0];
store = chart.getStore();
count = store.getCount();
xAxis = chart.getAxes()[0];
visibleRange = 10000;
second = 1000;
console.log(xAxis.getMinimum());
if (count > 0) {
lastRecord = store.getAt(count - 1);
xValue = lastRecord.get('x') + second;
if (xValue - me.startTime > visibleRange) {
me.startTime = xValue - visibleRange;
xAxis.setMinimum(this.startTime);
xAxis.setMaximum(xValue);
console.log("count >0");
}
store.add({
x: xValue,
y: me.getNextValue()
});
// store.load();
chart.redraw();
} else {
chart.animationSuspended = true;
me.startTime = Math.floor(Ext.Date.now() / second) * second;
xAxis.setMinimum(me.startTime);
xAxis.setMaximum(me.startTime + visibleRange);
store.add({
x: this.startTime,
y: me.getNextValue()
});
chart.animationSuspended = false;
// store.load();
chart.redraw();
console.log("count < 0");
}
},
getNextValue: function(previousValue) {
var delta = Math.random()*4 - 2;
if (Ext.isNumber(previousValue)) {
return Ext.Number.constrain(previousValue + delta, -2, 2);
}
return Math.random()*4 - 2;
}
});
this is my store:
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel1'
],
config: {
model: 'MyApp.model.MyModel1',
storeId: 'MyStore'
}
});
and this is my model:
Ext.define('MyApp.model.MyModel1', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'x'
},
{
name: 'y'
}
]
}
});
If you want set data to store use this code:
var store = Ext.getStore('MyStore');
store.load(function () {
var store = Ext.getStore('MyStore');
store.removeAll();
store.add({
x: xValue,
y: me.getNextValue()
});
store.sync();
});
I'm working on a donut chart type, with the Highcharts library.
As you can see in the image below, some of the inner data labels are overlapped.
I've been playing with the parameter "distance" but doesn't fix this.
Find attached the code below,
// Create the chart
$(container).highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
symbol: 'url(/icon-turn-down.png)'
}
}
},
title: {
text: _title,
margin: 50
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
formatter: function() {
var s = this.point.name.split('.');
if (s.length == 1) {
return this.y > 1? '<b>'+this.point.name+':</b> '+Highcharts.numberFormat(this.point.y) : null;
}
return this.y > 1? s[0]+'<br /><b>'+$.trim(s[1])+':</b> '+Highcharts.numberFormat(this.point.y) : null;
}
},
series: [{
name: '',
data: innerData,
size: '80%',
dataLabels: {
formatter: function() {
return this.y > 0 ? this.point.name : null;
},
color: 'white',
distance: -50
}
}, {
name: '',
data: outerData,
size: '100%',
innerSize: '80%',
dataLabels: {
formatter: function() {
var s = this.point.name.split('.');
if (s.length == 1) {
return this.y > 1 ? '<b>'+ this.point.name+':</b> '+ Highcharts.numberFormat(this.point.y) : null ;
}
s = this.point.name.substring(this.point.name.indexOf(".")+2);
return this.y > 1 ? '<b>'+ s+':</b> '+ Highcharts.numberFormat(this.point.y): null;
},
style: {
fontSize: "10px",
fontColor: "#000000"
}
}
}]
});
Finally, I found a solution, which is playing with the "startangle" attribute.
series: [{
name: '',
data: innerData,
startAngle:110,
size: '80%',
dataLabels: {
formatter: function() {
return this.y > 0 ? this.point.name : null;
},
color: 'white',
distance: -45
}, {
...
Distance parameter cannot be applied for each point, only general, so only what comes to my mind is iteared on each datalabel and use translate() function, or use formatter, apply CSS class and dhten use top/left parameter for each element. But will be helpful if you recreate your example as fiddle.