I'm trying to create a population pyramid chart, using echarts (echarts.apache.org). I can't find an example of that kind, and couldn't find how to do it. The values of the chart should all be displayed as positive. A chart example: https://www.internetgeography.net/wp-content/uploads/2019/12/united-kingdom-population-pyramid-2016.gif
I have tried using reverse axes bar chart, with negative numbers, but I couldn't find a way to hack the displayed negative numbers into positive ones.
I tried modifying the stack graph and using negative input values and overwriting the display as positive (Math.abs()).
When importing the data, I multiply by -1, so the output must be positive. valueFormatter: (value) => Math.abs(value)
Modify tooltip.valueFormatter
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
valueFormatter: (value) => Math.abs(value)
}
And modify series.label.formatter display to be positive as well Math.abs(params.value)
label: {
show: true,
position: 'left',
formatter: function (params) {
return Math.abs(params.value);
}
}
And custom xAxis.axisLabel.formatter
xAxis: [
{
type: 'value',
show: true,
axisLabel: {
formatter: function (params) {
return Math.abs(params);
}
}
}
],
Example
Example code with Echarts editor
Related
I`m struggling with the esthetic aspect of my chart. Actually it lookes like this:
Chart is showing data over time in 10mins intervals. With that number of labels it`s hard to see what column matches to time.
I would like to create ticks like on the image, so the chart would be way more readable. I looked into documentatnion and tried this but without effect:
scales: {
xAxes: [
{
ticks: {
drawTicks: true,
},
},
],
Pasting the answer from the comment section,
best way to work with ticks is by using callback function eg:
ticks: {
callback: function (value: any, index: any, ticks: any) {
return 'What you want to return';
},
}
I need to show grid lines when my chart has no data. (For now, It shows a blank division when there is no data) How to show grid lines? Is it possible to do? I tried but couldn't find an useful answer. Following is the method I used to draw the chart.
public drawChart(): void {
this.options = new StockChart ({
rangeSelector: {
selected: 0,
inputEnabled: false,
},
chart: {
type: 'spline',
},
yAxis: {
labels: {
formatter: function(): string {
return this.value + '';
},
},
opposite: false,
},
plotOptions: {
series: {
showInNavigator: true,
},
},
series: [],
});
}
To show the gridlines yAxis needs to have defined some min and max values. When series is applied those values are calculated and set to the yAxis, but in the case of the empty data, we need to apply them as the dummy values. Later, when data will be applied we can reset those values by using the yAxis.update feature.
Demo: https://jsfiddle.net/BlackLabel/zcsp8nfr/
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
I am trying to draw a Critical Power Chart like this:
The data I get is linear. One value for every second from 1 up to 18000.
I have no clue how to teach flot to draw an non-linear x-axis.
I tried to set custom ticks, but this seems to just have impact to the labels, not the line.
The x axis ticks will always be the same and don't need to be calculated:
[1s,5s,15s,30s,1m,2m,3m,5m,10m,20m30m,1h,2h,3h,5h]
Playground including tons of data: https://jsfiddle.net/ogeo2ygx/6/
Code:
$.plot($("#cpChart"), [{data: data,label: "Critical Power", labelBoxBorderColor: 0, color: '#cbcbcb',yaxis:1,lines: { show: true, fill: true } }], {
xaxes: [{
//here should be some Magic to Draw an nice Critical Power Chart
tickFormatter: (t, v) => {
return t + "s";
}
}],
yaxes: [{
alignTicksWithAxis: 1,
position: "left",
tickFormatter: (t, v) => {
return t.toFixed(0) + " Watt"
}
}],
legend: {
position: 'sw',
labelBoxBorderColor: 0
},
colors: ["#1ab394"],
grid: {
color: "#999999",
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0,
hoverable: true
}
});
You can achieve that (which is called logarithmic scale) with two steps:
Transform the x-axis values using the Math.log function (with a +1 because the logarithm of zero is -infinity).
Define a custom ticks array with your ticks.
See the documentation for more information.
Relevant code:
xaxes: [{
ticks: [[1, '1s'],[5, '5s'], [15, '15s'],[30, '30s'],[60, '1m'],[120, '2m'],[180, '3m'], [300, '5m'], [600, '10m'], [1200, '20m'], [1800, '30m'],[3600, '1h'], [7200, '2h'], [10800, '3h'], [18000, '5h']],
transform: (x) => { return Math.log(1 + x); },
inverseTransform: (x) => { return Math.exp(x) - 1; }
}],
Updated fiddle: https://jsfiddle.net/ogeo2ygx/8/
I need to create a pie chart with labels indicating what each area means, but also another info overimposed over each area. If I use both data labels and a legend, they'll show the same text. How can I have both with different texts, or emulate that effect?
A mock of what I'd like to get:
Using the format or formatter config properties of the dataLabels, you can make them say whatever you want.
pie: {
dataLabels: {
enabled: true,
formatter: function(){
return 'Y Value: ' + this.y; // y value
}
},
showInLegend: true
}
Quick example.
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.