Related
Due to the company policy I can't share any kind of code but I have been struggling with apche echarts. The requirement is I have a line whose color should change at certain points based on logic. I tried achieving using linestyle and piecewise using dimension. I came pretty close to visualmap but the issue persisted when The parallel or adjacent lines started to get affected and caused wrong color changes on the graph. Here is the requirement the line on the chart is supposed to be red unless we come across a point where the color could be changed to green and back to red when the event is done. please refer to the image and I am open to any and all suggestions. I would prefer a sandbox as an answer link so i can test if that works with the requirement or not.
EDIT 1 The closest I came is this
option = {
title: {
text: '一天用电量分布',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: 'green'
}, {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
}]
},
series: [
{
name: '用电量',
type: 'line',
smooth: true,
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
}
]
};
which renders
how can I use logic to calculate the visualmap points based on event.
You can do that using the visualMap component which maps the data to visual channels.
Like in your example, in a Line series chart you have:
visualMap: {
show: false,
dimension: 0,
pieces: [
{
lte: 6,
color: 'green'
},
{
gt: 6,
lte: 8,
color: 'red'
},
{
gt: 8,
lte: 14,
color: 'green'
},
{
gt: 14,
lte: 17,
color: 'red'
},
{
gt: 17,
color: 'green'
}
]
},
The data for the Line chart is an array of 20 values so the above means: draw the line green for the first 6 values, draw red for values between 6 and 8, then green till 14th value, then red for 14th to 17th value and then green for the values thereon.
See the example here.
Does anyone know how to change the font size of a value in a Gauge chart from Plotly.js? I wanted to make the font smaller (the number “20” below), in a way that didn’t stay above the title of the chart. I looked through Plotly.js reference, but couldn't find anything.
var data = [
{
type: "indicator",
mode: "gauge+number",
value: 20,
title: { text: "Speed", font: { size: 24 }, yanchor: 'bottom' },
gauge: {
axis: { range: [0, 100], tickwidth: 1, tickcolor: "rgb(178, 178, 178)", tickmode: 'array', tickvals: [0, 100] },
bar: { color: "rgb(237, 61, 61)", thickness: 1 },
bgcolor: "rgb(178, 178, 178)",
bordercolor: "rgb(178, 178, 178)",
}
}
];
var layout = {
width: 600,
height: 400,
margin: { t: 25, r: 25, l: 25, b: 25 },
paper_bgcolor: "lavender",
font: { color: "black", family: "Arial" }
};
Plotly.newPlot('myDiv', data, layout);
Link to codepen: https://codepen.io/amandasantosf/pen/qBaNbGK
This can be due using the "number" field, as seen here https://plotly.com/javascript/reference/indicator/#indicator-number-font-size
var data = [
{
type: "indicator",
mode: "gauge+number",
value: 20,
number: { font: { size: 20 }},
title: { text: "Speed", font: { size: 24 }, yanchor: 'bottom' },
gauge: {
axis: { range: [0, 100], tickwidth: 1, tickcolor: "rgb(178, 178, 178)", tickmode: 'array', tickvals: [0, 100] },
bar: { color: "rgb(237, 61, 61)", thickness: 1 },
bgcolor: "rgb(178, 178, 178)",
bordercolor: "rgb(178, 178, 178)",
}
}
];
var layout = {
width: 600,
height: 400,
margin: { t: 25, r: 25, l: 25, b: 25 },
paper_bgcolor: "lavender",
font: { color: "black", family: "Arial" }
};
Plotly.newPlot('myDiv', data, layout);
I've drawn a circular gauge using extjs chart series. I would like to indicate the value of the gauge into the middle of it but I don't succeed. Does anyone could help me?
Here is the code I tried:
{
xtype: 'polar',
width: 60,
height: 60,
background: '#00c6c9',
style: {left:0, right:0},
series: {
type: 'gauge',
minimum: 0,
maximum: 30,
value: 10,
colors: ['#25a2b6', 'lightgrey'],
donut: 75,
background: '#00c6c9',
totalAngle: Math.PI * 2,
style: {left:0, right:0},
needleLength: 100
/*,
renderer: function(sprite, record, attributes, index, store) {
var sprite2 = Ext.create('Ext.draw.Sprite', {
type: 'text',
text: Math.floor(attributes.value),
font: '16px Arial',
x: 30,
y: 30
});
sprite2.show(true);
return attributes;
},
label: {
field: 'value',
display: 'middle'
}*/
}
}
I just want to show the value '10' of the series. In comments you can see I tried to add a renderer function and a label property. In this label, I guess I cannot write "field:'value'" but since I don't need to define a field I don't konw what to use.
Many thanks
Here is the solution, you can change your sprite on render function of chart, and then redraw it, changing x,y,value and other things
Ext.create({
xtype: 'polar',
renderTo: document.body,
width: 160,
height: 160,
background: '#00c6c9',
style: {
left: 0,
right: 0
},
listeners:{
render: function(chart){
var sprite=Ext.clone(chart.getSprites()[0]);
//modify sprite here
sprite.text=''+chart.getSeries()[0].config.value;
chart.setSprites(sprite);
chart.redraw();
}
},
sprites: [{
type: 'text',
x: 58,
y: 95,
text: 'test',
fontSize: 40,
fillStyle: 'white'
}],
series: {
type: 'gauge',
minimum: 0,
maximum: 30,
value: 10,
colors: ['#25a2b6', 'lightgrey'],
donut: 75,
background: '#00c6c9',
totalAngle: Math.PI * 2,
style: {
left: 0,
right: 0
},
needleLength: 100
}
});
I tried to create a chart but i get no display in my html page whereas DOM element seems to be well loaded.
Here is the code of My JS function to create the chart :
this.updateUsageChart = function updateUsageChart() {
var jsonData = {
categories : ['01/12/2015', '02/12/2015', '03/12/2015', '04/12/2015', '05/12/2015', '06/12/2015', '07/12/2015', '08/12/2015', '09/12/2015', '10/12/2015'],
series : [
{
name: 'MAX',
data: [170, 170, 170, 170, 170, 170, 170, 170, 170, 170]
}, {
name: 'MIN',
data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20]
}, {
name: 'test1',
data: [30, 40, 35, 40, 35, 200, 112, 210, 140, 190]
}, {
name: 'test2',
data: [30, 40, 35, 40, 35, 170, 112, 170, 140, 170]
}
]
}
var categories = jsonData.categories ; // Array of String
var series = jsonData.series;
$('#usageChart').highcharts({
title: {
text: 'Test',
x: -20 //center
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Test'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
});
}
I included library in my index.html file :
<script src="../../lib/jquery/jquery.js"></script>
<script src="../../lib/highcharts/highcharts.js"></script>
<script src="../../lib/highcharts/exporting.js"></script>
I'm using the latest version of high charts. I successfully created a 3d bubble chart following http://www.highcharts.com/demo/bubble-3d
I am wondering if I can add to the legend a reference to what the size of the bubble means. Just a simple bubble with some text next to it would be enough.
Thanks in advance for your help.
Just add an empty series and name it.Give it desired name ,See Updated fiddle here
{
name :"description",
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
]
}
}}
Representing bubble size in a legend is not currently a feature of Highcharts.
You can draw one manually:
Add a series for the legend
Draw a rendered box around the legend
JSFiddle
Add a series for the legend
series: [{
// This series gives a legend for reference
data: [{
color: Highcharts.getOptions().colors[0],
x: 86,
y: 25,
z: 10,
dataLabels: {
format: '10%',
y: 40
}
}, {
x: 90,
y: 25,
z: 15,
dataLabels: {
format: '15%',
y: 40
}
}, {
x: 94,
y: 25,
z: 35,
dataLabels: {
format: '35%',
y: 40
}
}]
}, {
color: Highcharts.getOptions().colors[0],
data: [{
x: 95,
y: 95,
z: 13.8,
name: 'BE',
country: 'Belgium'
}, {
Draw a rendered box around the legend
events: {
load: function() {
// Draw the flow chart
var ren = this.renderer,
colors = Highcharts.getOptions().colors;
// Script label
ren.label('Obesity Rate', 410, 220)
.attr({
stroke: '#777',
'stroke-width': 1,
padding: 5,
r: 5,
width: 168,
height: 73
})
.css({
color: '#333',
textAlign: 'center',
fontSize: '1.1em'
})
.add();
}
}