How do I create a single progress line using Apache eCharts?
Here is in an image example:
The green line should change depending on it's value, for example:
When the value is 10 there should only be a small green line.
When the value is 50 the green should fill half the line, and grey the other half.
When the value is 100 it should be all green.
The green line should also animate on load.
It should have rounded end caps.
And it should resize based on the width of the container.
Is this simple type of progress line possible in Apache eCharts?
Here you go : (my echarts sandbox)
var myChart = echarts.init(document.getElementById('main'));
var progressLineLength = 500;
var maxValue = 100;
var value = 70;
option = {
graphic: {
elements: [
{
type: 'group',
left: 'center',
top: 'center',
children: [
{
type: 'rect',
shape: {
x:0,
y:0,
width: progressLineLength,
height:10,
},
style: {
fill: '#E5E5E5'
}
},
{
type: 'rect',
shape: {
x:0,
y:0,
width: progressLineLength*value/maxValue,
height:10,
},
style: {
fill: '#3874CB'
},
keyframeAnimation: {
duration: 1000,
loop: false,
keyframes: [
{
percent: 0,
scaleX: 0,
},
{
percent: 1,
scaleX: 1,
}
]
}
}
]
}
]
}
};
myChart.setOption(option)
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<div id="main" style="width: 600px; height:200px;"></div>
</body>
</html>
Related
I have the chart bellow and I want to add the percentage to the series body. Like I manipulate the image bellow in red.
how Is this possible?
https://codesandbox.io/s/label-line-adjust-forked-09ukre?file=/index.js
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
});
var app = {};
var option;
var datas = [
////////////////////////////////////////
[
{ name: "test1", value: 20 },
{ name: "test2", value: 40 },
{ name: "test3", value: 40 }
]
];
option = {
title: {
text: "test",
left: "center",
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: 14
}
},
series: datas.map(function (data, idx) {
return {
type: "pie",
radius: [80, 160],
top: "10%",
height: "33.33%",
left: "center",
width: 400,
itemStyle: {
borderColor: "#fff",
borderWidth: 1
},
label: {
alignTo: "edge",
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: "#999"
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
data: data
};
})
};
if (option && typeof option === "object") {
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
Thanks
To place information inside the chart, you have to use position: "inside" in the label. Set what is put inside the label with the formatter. (Here, {c} is the value of a data item)
label: {
formatter: "{c}%",
position: "inside"
},
But it seems that it's not possible to have both a label inside AND one outside the same chart (like in your image). However, a workaround can do the job here. Like using 2 identical series except one has the label from your example code, and one has the label code I wrote above. One chart will be on top of the other (wich is a bit messy) but the result will be as you want :
I have doughnut chart using chartsjs, and also I used multi layer with cutoutPercentage.
The First Layer (Black color) is the Total and the second layer (Red Color) complete is the running value.
type: 'doughnut',
data: {
datasets: [
{
data: Total,
fill: true,
backgroundColor:'rbg(242, 133, 0)',
borderWidth: 3,
weight:1,
},{
data: complete,
fill: true,
backgroundColor:'rgb(255,36,0)',
borderWidth: 3,
weight:1,
}
]
},
options: {
responsive: true,
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltip: {
enabled: false
},
cutoutPercentage: 70,
},
This is what I need,2nd layer is running until reach the total.
In case you need a generic solution, you can use the Plugin Core API and define a beforeInit hook that modifies the chart configuration to fit your needs.
Please take a look at below runnable code and see how it could be done.
new Chart('runningValue', {
type: 'doughnut',
plugins: [{
beforeInit: chart => {
chart.data.datasets = [{
data: [chart.data.total],
backgroundColor: chart.data.totalColor,
borderWidth: 3
},
{
data: [chart.data.complete, chart.data.total - chart.data.complete],
backgroundColor: [chart.data.completeColor, '#fff'],
borderWidth: 3
}
]
}
}],
data: {
total: 50,
complete: 35,
totalColor: 'rbg(242, 133, 0)',
completeColor: 'rgb(255,36,0)'
},
options: {
rotation: -90,
circumference: 180,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: '70%'
}
});
canvas {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="runningValue"></canvas>
Simply define two values and two background colors on the second dataset as shown in the runnable code below.
const total = 50;
const complete = 35;
new Chart('runningValue', {
type: 'doughnut',
data: {
datasets: [{
data: [total],
backgroundColor: 'rbg(242, 133, 0)',
borderWidth: 3
},
{
data: [complete, total - complete],
backgroundColor: ['rgb(255,36,0)', '#fff'],
borderWidth: 3
}
]
},
options: {
rotation: -90,
circumference: 180,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: '70%'
}
});
canvas {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="runningValue"></canvas>
I want my Leaflet polyline arrow to increases it's size on Zoom In and decreases it on Zoom Out.
But by it's pattern what happens is the opposite of that. Is the a way to reverse it?
Here a complete exemple: https://github.com/bbecquet/Leaflet.PolylineDecorator
function addLine(map, iniCoord, endCoord, desc, color, lineWeight, onClick) {
var polyline = L.polyline([coordIni, coordFim], {
color: color,
offset: 0,
weight: lineWeight
});
polyline.addTo(elements);
L.polylineDecorator(polyline, {
patterns: [{
offset: '100%',
symbol: L.Symbol.arrowHead({
offset: 20,
iconSize: 3,
polygon: false,
pathOptions: {
stroke: true,
color: color,
weight: 3
}
})
}]
}).addTo(elements);
polyline.on('click', onClick);
}
I've found the solution:
var map = L.map('map');
**var arrowSize = 30;**
L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
elements = L.layerGroup().addTo(map);
map.on('zoomend', function() {
var currentZoom = map.getZoom();
**arrowSize = 30/((20 - currentZoom )*2);**
elements.clearLayers();
});
function addLine(map, iniCoord, endCoord, desc, color, onClick) {
var polyline = L.polyline([coordIni, coordFim], {
color: color,
offset: 0,
weight: 1.5
});
polyline.addTo(elements);
L.polylineDecorator(polyline, {
patterns: [{
offset: '100%',
symbol: L.Symbol.arrowHead({
offset: 20,
**pixelSize: arrowSize,**
polygon: false,
pathOptions: {
stroke: true,
color: color,
}
})
}]
}).addTo(elements);
polyline.on('click', onClick);
}
I want to create chart like that in highcharts:
IOT Central Chart
this is what i get until now:
Highcharts.setOptions({
colors: ['#3399CF', '#F9BA06', '#65AF35', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
// Get the data. The contents of the data file can be viewed at
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/activity.json',
function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data.splice(1, 10), function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
type: "spline",
marginLeft: 40, // Keep all charts left aligned
marginTop: 7,
marginBottom: 7
},
title: {
text: null,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
visible: false,
labels: {
format: '{value} km'
}
},
yAxis: {
visible: true,
title: {
text: null
},
tickAmount: 2,
minPadding: 0,
lineWidth:1,
gridLineColor: "transparent"
},
series: [{
data: dataset.data,
name: dataset.name,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
}
);
.chart {
min-width: 320px;
max-width: 800px;
height: 150px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
but the problem is that i cant export or zoom do normal legend to this chart.
The problem here is that you create three separate charts instead of one.
Highstock allows you to position and resize axes (height & top properties):
yAxis: [{
height: '50%'
}, {
top: '50%',
height: '50%'
}],
API references:
https://api.highcharts.com/highstock/yAxis.height
https://api.highcharts.com/highstock/yAxis.top
In fact it's going to work in Highcharts too (even though it's not documented).
Live demo: http://jsfiddle.net/BlackLabel/gb3jhq75/
I add Ext.draw.Component inside grid cell as column renderer:
renderer: function(_value){
var id = Ext.id();
Ext.Function.defer(function(){
Ext.create('Ext.draw.Component', {
minWidth: width,
id: 'timer-' + id,
width: (_value * width),
style: {
position: 'absolute',
'z-index': '10000000',
},
height: 17,
renderTo: id,
resizable: {
dynamic: true,
pinned: true,
handles: 'w e',
widthIncrement: width,
},
gradients: [{
id: 'grad1',
angle: 270,
stops: {
0: {
color: '#6594cf'
},
1: {
color: '#c6d8ed'
},
99: {
color: '#5f96db'
},
100: {
color: '#6594cf'
}
}
}],
items: [{
type: 'rect',
fill: 'url(#grad1)',
width: '100%',
height: '100%',
x: 0,
y: 0
}],
draggable: {
constrain: false,
},
listeners: {
}
});
}, 25);
return '<div id="' + id + '" style="width:1000px;" class="timers" />';
}
I need to know, how to drag this draw component only by x-axis. And I need name of listeners, whitch called on drag and on resize.
There is listner resize, but funciton return only new width and height (or I dont know some thing), I need to know, to whitch resizable handle was user pooled - left or right?