Kendo chart with normal and Logarithmic scale - charts

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;
}

Related

In Apache Echarts, can inside piechart labels switch automatically to outside if they overlap?

I have a nested pie chart (two pie chart series, one an outer "doughnut" around the other). The inner pie chart needs to mainly use inner-positioned labels, but sometimes there isn't enough room and they overlap:
How can I get this to not overlap? Is there a way to switch the overlapping labels or those that can't fit inside their slices to be outer-positioned instead? Or some other strategy to make these readable? Using 100% outer positioned labels works, but because of the outer pie chart there isn't much room and it's much harder to read because the outer pie chart also has its own set of outer-positioned labels.
Series def:
seriesOpt = [{
encode: {
value: "value",
itemName: "name"
},
type: "pie",
startAngle: 90,
//minShowLabelAngle: 0.05, // buggy, throws internal javascript error
avoidLabelOverlap: true,
datasetIndex: 0,
name: "inner",
radius: [0, insideRadius??"40%"],
label: {
show: true,
position: "inside"
distanceToLabelLine: 10,
alignTo: "none",
overflow: "truncate",
formatter: '{name|{b}}\n{pct|{d}%}',
rich: {
pct: {
color: '#999'
}
},
labelLine: {
show: false
}
},{
encode: {
value: "value",
itemName: "name"
},
type: "pie",
startAngle: 90,
//minShowLabelAngle: 0.05, // buggy, throws internal javascript error
avoidLabelOverlap: true,
datasetIndex: 1,
name: "outer",
radius: [outsideInnerRadius??"60%",outsideOuterRadius??"75%"],
label: {
show: true,
position: "outside",
distanceToLabelLine: 10,
alignTo: "none",
overflow: "truncate",
formatter: '{name|{b}}\n{pct|{d}%}',
rich: {
pct: {
color: '#999'
}
},
labelLine: {
show: true,
length: 60,
length2: 15
}
}]
You should tweak series-pie.labelLayout.
Here is an example:
const data = [
{
name: 'Foo',
value: 10
},
{
name: 'Bar',
value: 20
},
{
name: 'Baz',
value: 15
},
{
name: 'Qux',
value: 500
}
];
let option = {
series: [
{
type: 'pie',
radius: ['120px', '90px'],
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
labelLayout: {
moveOverlap: 'shiftY' // <--- HERE
}
},
{
type: 'pie',
radius: '42px',
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
labelLine: {
showAbove: true
},
// ========== THERE ==========
labelLayout: {
x: 131,
moveOverlap: 'shiftY'
}
// ====================
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 300px;
height: 300px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>

Apache ECharts Gauge Gradient Style

I am trying to get something like this, where the style of the chart goes from a color on the min value to a color on the max value, and the progress value is in between.
I have this code:
option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [{
name: 'Pressure',
type: 'gauge',
max: 40,
min: -10,
startAngle: 180,
endAngle: 0,
progress: {
show: true,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 1,
y2: 1,
colorStops: [{
offset: 0,
color: "blue"
}, {
offset: 0.25,
color: "blue"
}, {
offset: 0.5,
color: "green"
}, {
offset: 0.75,
color: "orange"
}, {
offset: 1,
color: "red"
}],
global: false // default is false
}
}
},
pointer: {
show: false
},
detail: {
valueAnimation: true,
formatter: '{value}'
},
data: [{
// name of date item
name: 'data1',
// value of date item is 8
value: 10,
},
// {
// name: 'data2',
// value: 40,
// // user-defined label format that only useful for this data item
// label: {},
// // user-defined special itemStyle that only useful for this data item
// itemStyle:{},
// anchor: {
// show: false
// },
// progress: {
// itemStyle: {
// color: 'black'
// }
// },
// title: {
// show: false
// },
// detail: {
// show: false
// },
// }
]
}]
};
Which gives the close to what I want but not really as you can see the range of colors apply up to the current value. To test this paste the code in here:
https://echarts.apache.org/examples/en/editor.html?c=gauge-simple
The result:
Another solution is to draw the entire axis line with this gradient color and cover the right side after the progress value but not sure how to do this.

Apache ECharts: Rotated labels get cropped

I'm trying to use rotated labels in my graph. However, the labels are getting cropped. How can I make more space in the bottom so that the labels can fit?
options = {
xAxis: {
type: "category",
data: axis,
axisLabel: {
show: true,
interval: 0,
rotate: 45,
},
axisTick: {
show: true,
interval: 0
}
},
yAxis: {
type: "value",
data: axis,
min: 1,
minInterval: 1,
maxInterval: 1,
max: 15,
axisTick: {
interval: 1
}
},
series: [
{
type: "bar",
stack: "minmax",
itemStyle: {
normal: {
color: "rgba(0,0,0,0)"
}
},
data: maxs
},
{
type: "bar",
stack: "minmax",
data: mins,
itemStyle: { color: "#63869e" }
},
{
symbolSize: 20,
data: scatter,
type: "scatter",
itemStyle: { color: "black" },
},
]
};
To contain the label you can use:
options = {
grid: {
containLabel: true,
}
}
Space can be added with grid option bottom:
options = {
grid: {
bottom: 100,
}
}

ECharts Baidu how to display labels in negative value as positive value?

I am using ECharts Baidu to generate charts. I am using a tornado chart to display the force of left and right arm. The force of the left arm is displayed at the left side and right arm at the right side. Is there a way display the negative value of the label and the axis as positive? I can always hide the axis value so as long as the solution can make the graph to display negative as positive label, I will mark it as solution.
https://echarts.baidu.com/echarts2/doc/example/bar5.html#-en
var option= {
title: {
},
grid: {
top: '10%',
bottom: '25%',
left: '20%',
right: '10%',
},
tooltip: { triggerOn: 'click' },
xAxis: [
{
type: 'value',
name: 'Newton',
nameLocation: 'center',
nameTextStyle: {
padding: 10
},
}
],
yAxis: [
{
axisTick: { show: false },
data: ['FEB']
}
],
barWidth: 40,
series: [
{
type: 'bar',
stack: 'feb',
label: {
normal: {
show: true,
position: 'top',
}
},
data: [{ value: Number(data2[0].left) * -1 }], //the value is from the ajax call
itemStyle: { color: 'gray' }
},
{
type: 'bar',
stack: 'feb',
label: {
normal: {
show: true,
position: 'top'
}
},
data: [Number(data2[0].right)],
itemStyle: { color: '#F26718' },
},
],
textStyle: {
fontWeight: 'bold',
color: 'black'
}
}
chart.setOption(option);
})
try with this:
label: {
normal: {
show: true,
position: 'top',
formatter: function (params) {
return Math.abs(params.value[1]);
}
}
}
this example assumes that the data you passed to the chart is an array like [x, y]. if your input data is different, put a breakpoint inside the formatter function e see how "params" is structured.

Connect points from two different series with an vertical line (DevExtreme chart)

I've got follow chart, wich I made with DevExtreme charts:
// Add your javascript here
$(function() {
var dataSource = [{
argument: '15.06.2016',
sys: 160,
dia: 90
}, {
argument: '16.06.2016',
sys: 170,
dia: 95
}, {
argument: '17.06.2016',
sys: 152,
dia: 91
}];
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
return {
text: obj.value + " mmHg"
}
}
},
legend: {
verticalAlignment: "top",
horizontalAlignment: "right"
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
export: {
enabled: true,
printingEnabled: true
},
zoomingMode: "all",
scrollingMode: "all",
series: [{
name: "Blutdruck systolisch",
type: "scatter",
valueField: "sys",
axis: "sysAxe",
point: {
color: "black",
symbol: "triangleDown"
}
}, {
name: "Blutdruck diastolisch",
type: "scatter",
valueField: "dia",
axis: "diaAxe",
point: {
color: "black",
symbol: "triangleUp"
}
}],
valueAxis: [{
name: "sysAxe",
title: "Blutdruck systolisch",
position: "left",
max: 170,
min: 140,
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}, {
name: "diaAxe",
title: "Blutdruck diastolisch",
position: "left",
max: 99,
min: 90,
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}]
});
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>
<div id="chartContainer" style="width:100%; height: 440px"></div>
I've got two different y-axis (systolic and diastolic blood pressure) with two different ranges (sys= 140-170 and dia= 90-99). When you measure the blood pressure of a human, you have to place the systolic value in one scale and the diastolic value in a second. This are two different values but they are still together. And the medical persons must see this, with a vertical connection between the two values something like this:
So they can see fast enough which measured blood pressure values are together and what is the value of each. For us "normal" users this is a little bit confusing, but for the medical persons, doctor and the healthcare it's simply logical. So this is a chart for the healthcare. Is it possible to connect two different points of two series with each other like in the picture?
Thanks and cheers.
This worked for me:
$(function() {
var dataSource = [{
argument: '15.06.2016',
sys: 160,
dia: 90
}, {
argument: '16.06.2016',
sys: 170,
dia: 95
}, {
argument: '17.06.2016',
sys: 152,
dia: 91
}];
$(".chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
return {
text: obj.highValueText + "/" + obj.lowValueText + " mmHg"
}
}
},
legend: {
visible: false,
verticalAlignment: "top",
horizontalAlignment: "right"
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
zoomingMode: "all",
scrollingMode: "all",
series: [{
type: "stock",
lowValueField: "dia",
closeValueField: "dia",
openValueField: "sys",
highValueField: "sys",
}],
valueAxis: [{
name: "bdAxe",
title: "Blutdruck",
position: "left",
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}]
});
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>
<div class="chartContainer" style="width:100%; height: 440px"></div>
I used the stock chart for this: http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Series_Types/StockSeries/?search=stock&version=16_1&approach=Knockout
Thanks & Cheers.