I am attempting to use the Multiple RadialBars chart to show 3 percentages, along with the "Total" average percentage in the middle. Documentation for this chart can be found here: https://apexcharts.com/vue-chart-demos/radialbar-charts/multiple-radialbars/
My issue is with how the chart displays the "Total" value. I would like this value to go out two decimal places, but instead, it keeps the full floating point value. I've attached an image to elaborate.
RadialBar Long Percentage
I know this problem can be fixed by using a formatter for the total, and simply using the .toFixed(2) method. However, I can't seem to figure out the formatter for this chart. Without using a formatter, the default behavior finds the average of all three percentages (as seen above). The documentation unfortunately does not elaborate on how to customize the formatter function.
var efficiencyOptions = {
series: [],
chart: {
height: 350,
type: 'radialBar',
},
plotOptions: {
radialBar: {
dataLabels: {
name: {
show: true,
fontSize: '22px',
},
value: {
show: true,
fontSize: '16px',
},
total: {
show: true,
label: 'Total',
// formatter function goes here
formatter: function (w) {
// Need to find average of three percentages and fix to two decimal places
}
}
}
}
},
colors: ['#1ab7ea', '#0084ff', '#39539E'],
labels: ["Laser 1", "Laser 2", "Laser 3"],
};
If anyone could help me figure out this formatter function it would be very appreciated. Thank you very much in advance.
value: {
formatter: function(val) {
return parseInt(val);
},
color: '#111',
fontSize: '36px',
show: true
},
Related
I am using a line chart. I feed the data the following:
var scheduled = [[51,1700],[52, 1750],[1,1600],[2,1675]];
var actual = [[51,1320],[52, 1550],[1,1575],[2,1600]];
In the above the first number of each set is the week of the year and I am trying to show the last 4 months of data.
However, when the chart is drawn Flot charts re-sorts the data by the first value (lowest to highest) which creates all kinds of issues. Instead of 4 columns in the series there are now 52, and the lines are quite out of whack.
I don't see anything in the documentation that says this is supposed to happen, nor do I see anything that says I can prevent it. However, for the data to be meaningful, the data must not be re-ordered.
Is there a setting I'm unaware of that can stop this behavior?
Edit : Adding plot code
var plot = $.plot('#scheduled-actual-flot-line', [
{
label: 'Scheduled Hours',
data: scheduled,
lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
points: { show: true, radius: 4 }
},
{
label: 'Actual Hours',
data: actual,
lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
points: { show: true, radius: 4 }
}],
{
series: {
lines: { show: true },
points: { show: true },
shadowSize: 0 // Drawing is faster without shadows
},
colors: ['#afd2f0', '#177bbb'],
legend: {
show: true,
position: 'nw',
margin: [15, 0]
},
grid: {
borderWidth: 0,
hoverable: true,
clickable: true
},
yaxis: { ticks: 4, tickColor: '#eeeeee' },
xaxis: { ticks: 12, tickColor: '#ffffff' }
}
);
Flot takes the x values as numbers and displays / sorts them accordingly. If you don't want that, you can use the category mode (see this example and this fiddle with your data).
xaxis: {
//ticks: 12,
tickColor: '#ffffff',
mode: 'categories'
}
PS: 12 ticks are not possibly with your data, as there are only 4 datapoints defined.
That flot reads all data as numbers by default is described here in the documentation.
Flotr examples use a for loop to create random data, so the first index will always be sequential.
[[51,1700],[52, 1750],[1,1600],[2,1675]];
Your arrays show that flotr must be doing a sort on the array before painting the data sets as lines, bar-graphs or whatever.
I can only suggest you create a timestamp from the months and there's a time setting you can in flotr settings to format the dates as you want.
The other way is replace your anomalous data (months) with sequential indices:
var arr = [[51,1700],[52, 1750],[1,1600],[2,1675]];
for(var i=0; i<arr.length; i++) arr[1][0] = i;
Flot is doing exactly what it should do for a line chart (or any type of x-y graph). It's showing the last two points of your dataset on the left because 1 and 2 are indeed less than 51 and 52. I'm guessing that you're trying to show data that crosses a year boundary. You need to make the first two weeks of the second year later than the last two of the first. You could use actual dates instead of week numbers, in which case Flot would handle it fine. That would also give you more flexibility in labeling the x-axis. But as a quick fix, just add 52 to the second year's data, e.g.:
var scheduled = [[51,1700],[52, 1750],[53,1600],[54,1675]];
var actual = [[51,1320],[52, 1550],[53,1575],[54,1600]];
I have a column chart with two series, one of which I want to go down and the other up, like this:
However both of the series have positive y-values, which I can't change, e.g.
blue = [1746181, 1884428, 2089758, 2222362, 2537431, 2507081, 2443179,
2664537, 3556505, 3680231, 3143062, 2721122, 2229181, 2227768,
2176300, 1329968, 836804, 354784, 90569, 28367, 3878];
grey = [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
1447162, 1005011, 330870, 130632, 21208];
Using highcharts options, is it possible to have a chart like this? The example I used for the screenshot is this jsFiddle if it's useful to anyone, however it has a series with negative values which is not an option for me. Instead my data is more like this fiddle
I would try to use two separate yAxes: http://jsfiddle.net/zares7x9/2/, where one of them is reversed:
yAxis: [{
title: {
text: null
},
top: '5%',
height: '45%',
labels: {
formatter: function () {
return (Math.abs(this.value) / 1000000) + 'M';
}
},
min: 0,
max: 4000000
}, {
title: {
text: null
},
labels: {
formatter: function () {
return (Math.abs(this.value) / 1000000) + 'M';
}
},
offset: 0,
showFirstLabel: false, // hide 0-value
reversed: true, //reverse
top: '50%',
height: '45%',
min: 0,
max: 4000000
}],
Setting top and height allows you to render axes like one. Note, that you need to set for one of the series yAxis: 1, to inform Highcharts which series belongs to which axis.
I am attempting to make a stacked column chart representing events on a timeline. I need evenly-spaced bars, that scroll left/right with their respective ticks. Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).
For example: when scrolling one "step" to the right, I note these differences:
The column remains in place with updated data and the axis tick moves to the left. This results in a 'graphic equalizer'-like effect when scrolling. (See fiddle)
What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.
I suspect I'm misunderstanding something in the configuration. Any help/direction would be very much appreciated.
(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of < today) differently to normal data?)
chart: {
alignTicks: false,
backgroundColor: '#eeeeee',
events: {
load: function (e) {
this.xAxis[0].setExtremes(1390943153305, 1400015153305);
}
},
ignoreHiddenSeries: true,
renderTo: $('#chart')[0]
},
colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
credits: {enabled: false},
legend: {
enabled: true,
shadow: true
},
rangeSelector: {selected: 1},
title: {text: 'Global Events'},
navigator: {
height: 40,
xAxis: {
gridLineWidth: 1
},
series: {type: 'column'}
},
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [
['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
['second', [604800]],
['minute', [10080]],
['hour', [168]],
['day', [7]],
['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
['month', null],
['year', null]
]
}
}
},
xAxis: {ordinal: false},
series: data
If you want just weekly grouping, then only that one set, see: http://jsfiddle.net/s6BmC/2/
I think that resolves your issue, right?
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [ [ 'week', [1] ]]
}
}
},
Regarding additional question:
- yes you can set specific color for each point, but you need to determine on your own what color should be set:
data: [{ x: timestamp, y: value, color: color }, { x: timestamp, y: value, color: color }... ]
Another solution is to wrap setting color for column. Something similar I have done for candlestick: http://jsfiddle.net/79WZM/ (this solution requires much more knowledge of Highcharts).
I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.
I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?
Thanks.
Not possible out of the box, but as mentioned by Steve Gu achievable by scatter. You can even ignore the formatter and disable the marker alltogether:
{
series: [
{
type: 'scatter',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key}',
enabled: true,
y: 0,
},
data: [{ x: 0, y: 975, name: '975'}],
marker: {
enabled: false,
}
}
]
}
just disable marker and set format to key.
Add another data series, which is a type of "Scatter" and apply the data labels to this series using Marker. The trick is to use the same fill color as your background color and 0 line width so the marker will not be visible and only the label will be shown.
{
name: 'Outlier',
color: 'white',
type: 'scatter',
data: [ // x, y positions where 0 is the first category
{
name: 'This is my label for the box',
x:0, //box index. first one is 0.
y:975 //it will be bigger than the maximum value of of the box
}
],
dataLabels : {
align: 'left',
enabled : true,
formatter : function() {
return this.point.name;
},
y: 10,
},
marker: {
fillColor: 'white',
lineWidth: 0,
lineColor: 'white'
}
}
Unfortunately this option is not supported, only what you can do is use renderer to add custom text inside chart, but I'm aware that it can be not comfortable solution. http://api.highcharts.com/highcharts#Renderer.text()
Obviosuly you can reqest your suggestion in our user voice system http://highcharts.uservoice.com/
I am using ExtJs/ YUI charts in my application.
What I am wondering, is it possible to dynamically change the color on any of the charts based on data?
i.e. I have a store which contains a field holding the hex color for that particular row. Is it possible to dynamically set the color of a bar in the bar chart with the hex value?
Take a look at this blog post. When you are configuring the chart object, pass a series object with a style property as described in that post to define the colors and their sequence.
Then you just need to get your colors by either looping through your store records and building a new array, or perhaps pulling it from your store with store.query. Then pass this array as the property.
(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)
From what I've been able to find, you can use the
(...),
series: [style: {colors: arrayBuiltFromStore }],
(...)
method if you're creating a pie chart (or another chart with series.colors attribute), and it works great.
If you're using a type of chart that doesn't support series.colors... it gets a little more convoluted. I found that using the renderer method works fairly well. The only problem with this method (that I can see right away) is that it doesn't change the colors in the legend. It would take some further editing to see if this could be pulled from the store.
If you figure out the legend issue, let me know, but I hope this helps.
Note: Not all the variables used in the below script are populated in the script.
function myColorer(rec) {
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000');
return aFiller[rec];
}
Ext.onReady(function() {
var sDataStore = new Ext.data.JsonStore(sPathToDataStore);
chart = new Ext.chart.Chart({
renderTo: document.getElementById('test-graph'),
width: 800,
height: 600,
animate: true,
store: sDataStore,
legend: {
position: 'right',
isVertical: true,
},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['field1','field2','field3','field4'],
title: 'Title Here',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: label1,
title: sXAxisLabel,
grid: true,
}],
series: [{
renderer: function(sprite, record, curAttr, index, store) {
var color = myColorer(index);
return Ext.apply(curAttr, {
fill: color
});
},
type: 'area',
highlight: false,
axis: 'left',
xField: label1,
yField: ['field1','field2','field3','field4'],
style: {
opacity: 0.93
}
}]
});
});
Try this:
Create a hidden field and assign its value to the value of the store field which contains the colour value.
when rendering bar chart, set the background colour of a bar to the value of the hidden field.
Yes, you can do it by using renderers. Following code example changes colors of bars in bar chart:
series: {
type: 'bar',
xField: 'name',
yField: 'value',
label:{
field: 'value'
},
renderer: function(sprite, config, rendererData, index) {
var record = rendererData.store.getData().items[index];
return Ext.apply(rendererData, {
fillStyle: record.data.color,
});
}
}
Here 'color' is a field of the store model. You can set different color for each bar by setting it in corresponding record in your store.