Hi I am trying gauge meter in script. I get this code from echarts.com and now I am including this one with asp. In console it doesn't show any error but it is not showing?
Hope I will get good answer from you friends.
<script>
option = {
series: [{
name: 'Machine Time',
type: 'gauge',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
detail: {
formatter: '{value}%',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{
value: 50,
name: 'Process'
}]
}]
};
timeTicket = setInterval(function() {
option.series[0].data[0].value = 72;
myChart.setOption(option, true);
}, 2000)
clearInterval(timeTicket);
And the html code is
<canvas id="mychart"></canvas>
I don't know which version of eCharts you are trying to use, but for my example I'm using a 4.1.
I think you forgot the init method (echarts.init(...)) that is shown in eCharts documentation, at least in your code here you are not using it, and when I put it in my example, it works.
Also, I don't know why you are using a setInterval(), but for now, I removed it.
I also choose to use a div instead of a canvas to render the gauge, it appears better in my screen.
The options object I let the same as you.
Check below to see it working.
option = {
series: [{
name: 'Machine Time',
type: 'gauge',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
detail: {
formatter: '{value}%',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{
value: 50,
name: 'Process'
}]
}]
};
let myChart = echarts.init(document.getElementById('mychart'));
option.series[0].data[0].value = 72;
myChart.setOption(option, true);
#mychart{
width: 350px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js"></script>
<div id="mychart"></div>
In your div, set the width and heigh values.
Related
Anyone here can help me how to change the color of a needle in my speedometer chart? I copied this chart in Apache E-charts.
This is the script:
var dom = document.getElementById('performance-chart');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
series: [
{
type: 'gauge',
progress: {
show: true,
width: 18,
itemStyle: {
borderWidth: 10,
color: '#8D7CDB'
}
},
axisLine: {
lineStyle: {
width: 18
}
},
axisTick: {
show: false
},
splitLine: {
length: 5,
lineStyle: {
width: 1,
color: '#8D7CDB'
}
},
axisLabel: {
distance: 25,
color: '#8D7CDB',
fontSize: 9
},
anchor: {
show: true,
showAbove: true,
size: 25,
color: '#8D7CDB',
itemStyle: {
borderWidth: 8,
borderColor: '#8D7CDB'
}
},
title: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 20,
color: '#8D7CDB',
formatter: "{value}%",
offsetCenter: [0, '70%']
},
data: [
{
value: 5.85
}
]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
The 'needle' is represented by the pointer parameter. Like most of echarts items, you can change the pointer style with itemStyle.
series: [
{
type: 'gauge',
... // the rest of the config
pointer: {
itemStyle: {
color: 'red'
}
},
},
]
So i have the following configuration:
const frequencyChartoption = {
title: {},
tooltip: {},
legend: {
data: ['Frekvens', 'Vigtighed']
},
xAxis: {
type: 'category',
data: ['marker_01', 'marker_02'],
axisLabel: {
formatter: function (value) {
return '{' + value + '| }\n{value|}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
marker_01: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.marker_01
}
},
marker_02: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.maker_02
}
},
}
}
},
yAxis: {},
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: icons.marker_01,
itemStyle: {
normal: {
color: colors[0],
label: {
interval: 5,
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
},
{
name: 'Vigtighed',
type: 'bar',
data: frequencyChartImportance,
itemStyle: {
normal: {
color: colors[1],
label: {
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
}
]
};
Now as you can see i am using two images as my xAxis
Now i wish to make these show up on my tooltip when i hover over the chart. However i am not quite sure how to do that and was hoping some of you might be able to help?
Simply stated, a series may have a tooltip but the tooltip must be listed as an object with an identifying trigger (see tooltip documentation).
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: {
show: true,
trigger: 'axis',
formatter: (params) => {
// see tooltip.formatter for details
// you want to focus on the 'marker' property
return params[0].name;
}
}
}]
With this in mind, you can set two variables and print them as need be within the output of your tooltip. See the additional example below (from CodePen).
var myChart = echarts.init(document.getElementById("main"));
// specify chart configuration item and data
var option = {
title: {
text: "ECharts entry example"
},
tooltip: {
show: true,
trigger: "axis",
backgroundColor: 'rgba(0, 0, 0, 0.8)',
formatter: (params) => {
// create new marker
var icon0 = `<span data-tooltip="minimum" style="border-left: 2px solid #fff;display: inline-block;height: 12px;margin-right: 5px;width: 20px;"><span style="background-color:${params[0].color};display: block;height: 4px;margin-top: 4px;width: 20px;"></span></span>`;
var icon1 = `<span data-tooltip="implied-high" style="background-color:rgba(255,255,255,.75);border-radius: 2px;display: inline-block;height: 12px;margin-right:5px;width: 20px;"><span style="background-color:${params[0].color};border: 1px solid ${params[0].color};border-radius:50%;display:block;height:6px;margin-left:7px;margin-top:3px;width:6px;"></span></span>`;
console.log("params", params, params[0].name);
return `${icon0} ${params[0].name}
${icon1} ${params[0].value}`;
},
textStyle: {
fontWeight: 'bold',
fontSize: 18
}
},
legend: {
data: ["Sales"]
},
xAxis: {
data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
},
yAxis: {},
series: [
{
name: "Sales",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
Is it possible to render charts and animate them step by step?
Right now I got three area-datasets in my chart which I need to animate step by step. Dataset/area 1 shall start and after this is finished, Dataset/area 2 need to start and then 3.
I cannot find an option for that, is this even possible with Highcharts?
Right now the Animation goes from left,bottom to right,up - is there an option for an animation direction? I want to start the animation from the full width (fully expanded on the xAxis) to go upwarts the yAxis.
My Options:
var $chart = $('#chart');
var chart = new Highcharts.Chart({
chart: {
renderTo: $chart[0],
type: 'area',
style: {
fontFamily: 'Arial, sans-serif'
}
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'bottom',
itemMarginBottom: 15,
borderWidth: 0,
itemStyle: {
color: '#9a9a9a',
fontWeight: '300',
fontSize: '16px',
useHTML: true,
}
},
title: false,
xAxis: {
categories: ['0', '5', '10', '15', '20', '25', '30'],
lineColor: '#9a9a9a',
minTickInterval: 5,
title: {
text: 'Years',
style: {
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
},
labels: {
style: {
color: '#9a9a9a',
fontSize: '14px'
}
}
},
yAxis: {
min: 0,
tickAmount:5,
minorTickInterval: 0,
minorGridLineColor: '#9a9a9a',
gridLineWidth: 1,
maxPadding: 0.1,
title: {
text: 'Eur',
style: {
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
},
labels: {
format: '{value:,.0f}',
style: {
color: '#9a9a9a',
fontSize: '14px'
}
}
},
tooltip: {
backgroundColor: '#FCFFC5'
},
plotOptions: {
series: {
borderWidth: 0,
pointPadding: 0.2,
groupPadding: 0,
style: {
color: '#000',
fontSize: '16px',
fontWeight: '300'
}
}
},
series: [
{
name: '2',
legendIndex: 2,
color: '#83bd3f',
animation: {
duration: 3000
},
data: [1042,
2128,
3259,
4438,
5666,
6946,
7652
]
},
{
name: '1',
legendIndex: 1,
color: '#24356d',
animation: {
duration: 2000
},
data: [1024,2073,3146,
4246,
5372,
6525,
7705
]
},
{
name: 'Eingezahlte Rate',
legendIndex: 0,
color: '#9a9a9a',
animation: {
duration: 1000
},
data: [
1000,
2000,
3000,
4000,
5000,
6000,
7000
]
}
]
});`
Thanks
You can use series.afterAnimate event in which you can fire animation for another series.
In your first series set afterAnimate like this:
events: {
afterAnimate: function () {
this.chart.get('1').update({
visible: true,
animation: {
duration: 2000
},
events: {
afterAnimate: function () {
this.chart.get('2').update({
visible: true,
animation: {
duration: 3000
}
})
}
}
})
}
},
For the other series, initially you can disable animation or/and set their visibility to false:
series: [{
name: '2',
id: '2',
legendIndex: 2,
color: '#83bd3f',
animation: {
duration: 0
},
visible: false,
To change the direction of the animation you need to wrap series.animate
method and change how the clipping rect is animated.
(function(H) {
H.wrap(H.seriesTypes.area.prototype, 'animate', function(proceed, init) {
var series = this,
chart = series.chart,
clipRect,
animation = H.animObject(series.options.animation),
sharedClipKey,
newH;
if (init) {
return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
} else {
sharedClipKey = this.sharedClipKey;
clipRect = chart[sharedClipKey];
if (clipRect) {
clipRect.attr({
y: chart.plotSizeY,
height: 0,
width: chart.plotSizeX
}).animate({
y: 0,
height: chart.plotSizeY
}, animation);
}
if (chart[sharedClipKey + 'm']) {
chart[sharedClipKey + 'm'].attr({
y: chart.plotSizeY,
height: 0,
width: chart.plotSizeX + 99
}).animate({
y: 0,
height: chart.plotSizeY
}, animation);
}
// Delete this function to allow it only once
series.animate = null;
}
});
})(Highcharts)
example: http://jsfiddle.net/0esjvmgL/
I have created a Bar graph using echarts. I want to bind multiple values to data object dynamically, currently I'm able to bind only single value. here is my java script. I'mm a newbie for this, hoping for a fully functional solution.
var myChart = echarts.init(document.getElementById('page_views_today'));
var option = {
// Setup grid
grid: {
zlevel: 0,
x: 20,
x2: 40,
y: 20,
y2: 20,
borderWidth: 0,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)',
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow', // line|shadow
lineStyle: { color: 'rgba(0,0,0,.5)', width: 1 },
shadowStyle: { color: 'rgba(0,0,0,.1)' }
}
},
// Add legend
legend: {
data: []
},
toolbox: {
orient: 'vertical',
show: true,
showTitle: true,
color: ['#bdbdbd', '#bdbdbd', '#bdbdbd', '#bdbdbd'],
feature: {
mark: { show: false },
dataZoom: {
show: true,
title: {
dataZoom: 'Data Zoom',
dataZoomReset: 'Reset Zoom'
}
},
dataView: { show: false, readOnly: true },
magicType: {
show: true,
itemSize: 12,
itemGap: 12,
title: {
line: 'Line',
bar: 'Bar',
},
type: ['line', 'bar'],
option: {
/*line: {
itemStyle: {
normal: {
color:'rgba(3,1,1,1.0)',
}
},
data: [1,2,3,4,5,6,7,8,9,10,11,12]
}*/
}
},
restore: { show: false },
saveAsImage: { show: true, title: 'Save as Image' }
}
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'0h-2h', '2h-4h', '4h-6h', '6h-8h', '8h-10h', '10h-12h', '12h-14h', '14h-16h', '16h-18h', '18h-20h', '20h-22h', '22h-24h'
],
axisLine: {
show: true,
onZero: true,
lineStyle: {
color: 'rgba(63,81,181,1.0)',
type: 'solid',
width: '2',
shadowColor: 'rgba(0,0,0,0)',
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#fff',
type: 'solid',
width: 0,
shadowColor: 'rgba(0,0,0,0)',
},
},
}],
// Vertical axis
yAxis: [{
type: 'value',
splitLine: {
show: false,
lineStyle: {
color: 'fff',
type: 'solid',
width: 0,
shadowColor: 'rgba(0,0,0,0)',
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
onZero: true,
lineStyle: {
color: '#ff0000',
type: 'solid',
width: '0',
shadowColor: 'rgba(0,0,0,0)',
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
}],
// Add series
series: [
{
name: 'Page Views',
type: 'bar',
smooth: true,
symbol: 'none',
symbolSize: 2,
showAllSymbol: true,
barWidth: 10,
itemStyle: {
normal: {
color: 'rgba(63,81,181,1.0)',
borderWidth: 2, borderColor: 'rgba(63,81,181,1)',
areaStyle: { color: 'rgba(63,81,181,1)', type: 'default' }
}
},
data: []
}
]
};
Here is my java-script function from where I want to bind the values dynamically.
// Load data into the ECharts instance
load_graph_with_positions(option);
function load_graph_with_positions(option) {
option.series[0].data[0] = 1234;
myChart.setOption(option);
}
One way to do this is by passing values in an array and then shifting the previous values, while pushing-in the data. Following is the example of shiting and pushing the data:
option.series[0].data.shift();
option.series[0].data.push(json.num);
Hence your function will become:
function load_graph_with_positions(option,values) {
var valuesLength = values.length;
for (var i = 0; i < valuesLength; i++) {
option.series[0].data.shift();
option.series[0].data.push(values[i]);
}
myChart.setOption(option);
}
You can also refer to following github example for dynamic addition:
https://github.com/hisune/Echarts-PHP/blob/master/demo/dynamic.php
I'm using Highcharts to develop a customized chart. Here is what I've gotten by my own jsfiddle.
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
type: 'area',
inverted: true,
height: 700,
width: 780,
marginRight: 20
},
credits: {
enabled: false
},
colors: [
'#828385',
'#3AAFC1',
'#F87D2A',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'],
exporting: {
enabled: false
},
title: {
text: ' '
},
subtitle: {
style: {
position: 'absolute',
right: '0px',
bottom: '10px'
}
},
legend: {
itemDistance: 30,
x: 180,
verticalAlign: 'top'
},
xAxis: {
categories: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9", "Label10"],
offset: -410,
labels: {
overflow: 'justify'
},
plotLines: [{
color: '#A0A0A0',
width: 1,
value: 0
}, {
color: '#A0A0A0',
width: 1,
value: 1
}, {
color: '#A0A0A0',
width: 1,
value: 2
}, {
color: '#A0A0A0',
width: 1,
value: 3
}, {
color: '#A0A0A0',
width: 1,
value: 4
}, {
color: '#A0A0A0',
width: 1,
value: 5
}, {
color: '#A0A0A0',
width: 1,
value: 5
}, {
color: '#A0A0A0',
width: 1,
value: 6
}, {
color: '#A0A0A0',
width: 1,
value: 7
}, {
color: '#A0A0A0',
width: 1,
value: 8
}, {
color: '#A0A0A0',
width: 1,
value: 9
}]
},
yAxis: {
title: {
text: 'Índice teste'
},
max: 100,
min: 0,
},
plotOptions: {
area: {
fillOpacity: 0.5
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
if (jQuery('#type_group_name_hidden').val() == 'Processo') {
jQuery('#type_group_name_hidden').val('Atividade');
} else if (jQuery('#type_group_name_hidden').val() == 'Atividade') {
jQuery('#type_group_name_hidden').val('Procedimento');
} else if (jQuery('#type_group_name_hidden').val() == 'Procedimento') {
jQuery('#type_group_name_hidden').val('Processo');
}
jQuery('#group_name_hidden').val(this.category);
requestAjaxChart('processos', buildProcessos);
}
}
},
marker: {
lineWidth: 1
},
threshold: 50
}
},
series: [{
name: "Market",
data: [46.503590664272934, 51.39078282828278, 56.89226932668327, 47.66801075268824, 46.82561768530563, 59.23058676654176, 51.08220338983055, 46.17849829351536, 55.84550063371354, 51.428756058158314]
}, {
name: "My network",
data: [48.175, 27.159999999999997, 39.916666666666664, 38.6, 53.85, 38.949999999999996, 30.4, 51.9, 33.519999999999996, 54.7875]
}, {
name: "Avg",
data: [70, 80, 65, 75, 85, 82, 72, 69, 71, 58]
}]
});
});
Even it looks pretty good, it's not exactly what the client desire. I need to do some changes as described bellow:
Remove all the vertical lines on xAxis. As my chart is a inverted one, I couldn't figure out how to remove them.
On the xAxis values (0 - 100), remove the intermediaries values (10, 20, 30, ...) keeping just the first and last value (0, 100)
Move the yAxis labels upon the horizontal lines
Make clickable the points behind the overflowed chart area
I've tried almost all configuration options but with no success.
Any suggestion?
Some answers :
1) See from docs gridlineWidth property.
2) See from docs tickPositions property.
3) Another docs labels.y property.
4) Not possible, even if it's SVG/VML it still is HTML, you can't make clickable DIV which is positioned behind another one.