Highcharts - Passing Data for Flags in Array. It is not rendered - arrays

I am trying to render 3 flags (experimenting with flags) in a candlestick chart in Highchart, but the flag {x: Date.UTC(2012, 7, 6),title: 'On series'}
Is not getting rendered. Why?
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
arrflag =[
{x: Date.UTC(2012, 7, 17),title: 'On series'},
{x: Date.UTC(2012, 7, 9),title: 'On series'}
];
arrflag.push([
{x: Date.UTC(2012, 7, 6),title: 'On series'}
]);
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 0
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
id: 'AAPLX',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
},{
type: 'flags',
name: 'Flags on series',
data: arrflag,
onSeries: 'AAPLX',
shape: 'squarepin'
}]
});
});
});​
Live DEMO

You array of flags has the following value:
arrflag =[
{x: Date.UTC(2012, 7, 17),title: 'On series'},
{x: Date.UTC(2012, 7, 9),title: 'On series'}
];
When you push the other flag you add it to another array, which isn't the expected. So the result will be.
arrflag =[
{x: Date.UTC(2012, 7, 17),title: 'On series'},
{x: Date.UTC(2012, 7, 9),title: 'On series'},
[{x: Date.UTC(2012, 7, 6),title: 'On series'}]
];
Remove [ and ] from the following code.
arrflag.push([
{x: Date.UTC(2012, 7, 6),title: 'On series'}
]);

Related

how to add array of objects in react native

I have an array of object:
const totalItems = [
{
id: 0,
},
{
id: 1,
item: 'ITEM 1',
fat: 20,
prt: 30,
cho: 0,
cal: 300,
},
{
id: 2,
item: 'ITEM 2',
fat: 10,
prt: 15,
cho: 0,
cal: 150,
},
{
id: 3,
item: 'ITEM 3',
fat: 30,
prt: 10,
cho: 0,
cal: 310,
},
{
id: 4,
item: 'ITEM 4',
fat: 0,
prt: 0,
cho: 30,
cal: 120,
},
];
Now I want to add all the fat objects. I have used reduce() method. But it is not working. I am new at this. Kindly help me
you can map over the array and add the fat.
something like this
let totalFat = 0 ;
totalItems.map((item) => {
// I see there is no fat key value in first object id:0 so this check
// to make sure value exist
item.fat && (totalFat = totalFat + item.fat)
})
console.log(totalFat)
In SO while asking questions please give more details like the code you have tried, it's easier to understand that way.
You can use the method (forEach or map ).

show stacked legends in a grouped column highcharts- RecatJs highcharts

I have an example taken from highcharts: this question is very similar to Highcharts: legend of stacked chart
however I havent found the answer I'm looking there.
what I'm looking is something is to group the stack legends like shown below for every name legend it belongs.
in my case I want to have following structure in the legend
Male:
Joe
JOhn
Female:
Janet
Jane
is that possible?
I also tried : http://jsfiddle.net/7sgdbezh/
however since I'd be having multiple legends I dont want to clutter the chart with too many redundant stack name values.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});

How to customize each column in Highcharts stacked column

Hi I need to customize each column in highcharts stacked column
like this image
I this implementation i have given like this
{
categories:["6-7","7-8"]
series: [{
name: 'pass',
data: [5, 3, 4, 7, 2]
}, {
name: 'Fail',
data: [2, 2, 3, 2, 1]
}]
}
But now I need to change this implementation and i have to customize each column and add categories
how do i achieve this i'm having a array like this
[{"pass":2,"fail":3,"category":"6-7","percentage":"20%"}
{"pass":5,"fail":0,"category":"7-8","percentage":"10%"}]
i wanted like this
|percentage|
------------
| pass |
| fail |
-----------------
category
You need to preprocess your data to create series structure required by Highcharts. The 'category' label is achievable by using name property and 'percentage' by stack-labels formatter:
var data = [{
"pass": 2,
"fail": 3,
"category": "6-7",
"percentage": "20%"
}, {
"pass": 5,
"fail": 0,
"category": "7-8",
"percentage": "10%"
}];
var series = [{
name: 'Pass',
data: []
}, {
name: 'Fail',
data: []
}];
data.forEach(function(dataObj) {
series[0].data.push({
y: dataObj.pass,
name: dataObj.category,
percentage: dataObj.percentage
});
series[1].data.push({
y: dataObj.fail,
name: dataObj.category
});
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
yAxis: {
stackLabels: {
enabled: true,
formatter: function() {
return this.axis.series[0].options.data[this.x].percentage;
}
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/nfbq2soe/
API Reference: https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter

RGraph V5 Upgrade - error getting context

I had a working 3d chart using version 2107-10-1 that used images for the y axis.
I'm now trying to use the version 5 libraries but I'm getting an error:
"Cannot read property 'getContext' of null at new RGraph.Drawing.Image (RGraph.drawing.image.js:64)
Which is:
"context = this.canvas.getContext('2d');"
I change the line in the library to 3d to match the chart variant setting of 3d and the error is resolved. However I then get the following errors:
"Cannot set property 'shadowColor' of null
at Object.RG.noShadow.RG.NoShadow (RGraph.common.core.js:5155)
at RGraph.Drawing.Image.draw.Draw (RGraph.drawing.image.js:490)"
I've been going through the API to try and find any differences to the property names but my skill and understanding is not great.
Any help or advice would be greatly appreciated.
:-)
new RGraph.Bar({
id: 'cvs',
data: [ [0,5,5],[0,5,5],[0,5,5] ],
options: {
/******/
variant: '3d',
variantThreedAngle: 0,
hmarginGrouped: 2,
/*****/
textFont: '"Courier New", Courier, monospace',
titleFont: '"Courier New", Courier, monospace',
labels:['Monday', 'Saturday', 'Sunday'] ,
colors: [ '#3cb44b','#5484ed','#fbd75b' ],
textSize: 11,
title: 'Test Learner1: T1C1 W/B 22nd April 2019',
titleSize: 11,
titleColor:'#338833',
titleX: 50,
titleY: 25,
titleHalign: 'Left',
textAccessible: false,
key: ['LabelOne','LabelTwo','LabelThree'], //['One','Two','Three','Four','Five'],
keyPositionY: 470,
keyPositionX: 0,
gutterBottom: 65,
gutterRight: 10,
gutterTop: 40,
gutterLeft: 70,
keyPosition: 'gutter',
keyTextSize: 9,
numyticks: 2,
ylabelsCount: 2,
ymax: 10,
ymin: 0,
backgroundColor: 'white',
labelsColor: 'green'
// end options
}
}).draw().exec(function (obj)
{
var images = [
'smileyimages/graphimages/smiley5.png','smileyimages/graphimages/smiley10.png','smileyimages/graphimages/smiley1.png',
];
var index = 0;
obj.coordsText.forEach(function (val, key, arr)
{
if (val.tag === 'scale') {
var x = val.x,
y = val.y,
text = val.text;
var img = new RGraph.Drawing.Image({
id: 'cvs',
x: x,
y: y,
src: images[index],
options: {
halign: 'right',
valign: 'center'
}
}).draw();
index++;
}
});
obj.set({
ylabels: true
});
RGraph.redraw();
}).on('beforedraw', function (obj)
{
RGraph.clear(obj.canvas, 'white');
});
I've adjusted your code for the new property names. With this code remember to update the paths to the images.
<script src="/libraries/RGraph.drawing.image.js"></script>
<script src="/libraries/RGraph.common.core.js"></script>
<script src="/libraries/RGraph.common.key.js"></script>
<script src="/libraries/RGraph.bar.js"></script>
And the code that makes the chart:
new RGraph.Bar({
id: 'cvs',
data: [ [1,5,5],[1,5,5],[1,5,5] ],
options: {
variant: '3d',
hmargin: 20,
hmarginGrouped: 2,
textFont: '"Courier New", Courier, monospace',
titleFont: '"Courier New", Courier, monospace',
xaxis: false,
xaxisLabels:['Monday', 'Saturday', 'Sunday'] ,
colors: [ '#3cb44b','#5484ed','#fbd75b' ],
title: 'Test Learner1: T1C1 W/B 22nd April 2019',
titleX: 120,
titleY: 25,
titleHalign: 'Left',
textAccessible: false,
key: ['LabelOne','LabelTwo','LabelThree'], //['One','Two','Three','Four','Five'],
keyPositionY: 435,
keyPositionX: 100,
marginBottom: 95,
marginRight: 10,
marginTop: 40,
marginLeft: 100,
keyPosition: 'margin',
keyLabelsSize: 9,
yaxis: false,
yaxisLabelsCount: 2,
yaxisScaleMax: 10,
yaxisScaleMin: 0,
backgroundColor: 'white',
xaxisLabelsColor: 'green'
}
}).draw().exec(function (obj)
{
var images = [
'/images/alex.png',
'/images/alert.png',
'/images/facebook.png'
];
var index = 0;
obj.coordsText.forEach(function (val, key, arr)
{
if (val.tag === 'scale') {
var x = val.x,
y = val.y,
text = val.text;
var img = new RGraph.Drawing.Image({
id: 'cvs',
x: x,
y: y + 10,
src: images[index++],
options: {
halign: 'right',
valign: 'center'
}
}).draw();
}
});
});

ExtJs 4.1.1 chart missing markers

I spent days trying to solve this one:
I'm trying to create a chart with several series. In one series I show a line with all points (in my code "val" series). In the second series I wish to show only part of the points ("temperature" series). Both series are showing a data type of int.
I tried to set a very low value to the "temperature" field in order to omit it from the chart but it also caused the respective "val" to be skipped!
In ExtJs 4.1.1: The 10am value of the "val" field is skipped.
In ExtJs 4.0.7: The 10am value of the "val" field exists!
(I wish I could post images here but I do not have 10 reputation points.:-( )
Here is my code:
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: ['temperature', 'date', 'val']
});
var store1 = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
{ temperature: 58, date: new Date(2011, 1, 1, 8), val: 10 },
{ temperature: 63, date: new Date(2011, 1, 1, 9), val: 20 },
{ temperature: -100, date: new Date(2011, 1, 1, 10), val: 40 },
{ temperature: 78, date: new Date(2011, 1, 1, 11), val: 90 },
{ temperature: 81, date: new Date(2011, 1, 1, 12), val: 50 }
]
});
var chart1 = Ext.create('Ext.chart.Chart',{
xtype: 'chart',
animate: false,
store: store1,
legend: true,
insetPadding: 30,
axes: [{
title: 'Temperature',
type: 'Numeric',
position: 'left',
fields: ['temperature', 'val'],
minimum: 0,
maximum: 100
}, {
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'ga',
step: [Ext.Date.HOUR, 1],
fromDate: new Date(2011, 1, 1, 8),
toDate: new Date(2011, 1, 1, 12)
}],
series: [{
type: 'scatter',
axis: ['left','bottom'],
xField: 'date',
yField: 'temperature'
}, {
type: 'line',
title: 'val',
axis: ['left','bottom'],
xField: 'date',
yField: 'val'
}]
});
var panel1 = Ext.create('widget.panel', {
width: 600,
height: 400,
renderTo: Ext.getBody(),
layout: 'fit',
items: chart1
});
Why 4.1.1 makes all series skip because of a value that is out-of-range in one series?
How can I show only part of the points in one series and all of the point in the second?
Try using null or empty '' values for points you want to hide.
Example:
var store1 = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
{ temperature: 58, date: new Date(2011, 1, 1, 8), val: 10 },
{ temperature: 63, date: new Date(2011, 1, 1, 9), val: 20 },
{ temperature: '', date: new Date(2011, 1, 1, 10), val: 40 },
{ temperature: 78, date: new Date(2011, 1, 1, 11), val: ''},
{ temperature: 81, date: new Date(2011, 1, 1, 12), val: 50 }
]
});

Resources