stacked bar chart using angular-highchart - javascript

var array= [{ name: "LTNS", id: 1, percentage: 60, price: 900000 },
{ name: "NPCS", id: 2, percentage: 30, price: 342000 },
{ name: "MARCOS", id: 3, percentage: 10, price: 600000 }]
Using above array i need build stacked bar chart in angular-highchart and result should be like below.
I am using angular-highchart 7.2.0 version.
I have seen lots reference but nothing is same as above.


I think that you can start from this approach:
var array = [{
name: "LTNS",
id: 1,
percentage: 60,
price: 900000
},
{
name: "NPCS",
id: 2,
percentage: 30,
price: 342000
},
{
name: "MARCOS",
id: 3,
percentage: 10,
price: 600000
}
].reverse();
array.forEach(obj => {
obj.data = [obj.percentage]
})
Highcharts.chart('container', {
chart: {
type: 'bar'
},
plotOptions: {
bar: {
stacking: 'normal',
groupPadding: 0.2
}
},
series: array
});
Demo: https://jsfiddle.net/BlackLabel/d9xrgeka/
If you will face an issue implementing other features, please ask a specific question.

Related

change the position of object in array inside other object

in given data every ingredient have its substitute option while I can
select any substitute option for example if I want to change masala
with its substitute output will change the position of substitute with
it's option and output should be given below
i want to replace masala with normal masala
i have to create a function who replace ingredient with it's substitute and interchange the position of both *
input
const oData = [
{ CurryName: 'Chiken', id: 0 },
{
ingredients: [
{
id: 1,
name: 'onion',
property: { color: 'yellow', Quantity: 'half KG', price: 120 },
subOption: [
{
id: 11,
name: 'redOnion',
property: { color: 'red', Quantity: '1 KG', price: 120 },
},
{
id: 12,
name: 'whiteOnion',
property: { color: 'white', Quantity: '2 KG', price: 120 },
},
],
},
{
id: 2,
name: 'oil',
property: { color: 'green', Quantity: 'half LT', price: 120 },
subOption: [
{
id: 21,
name: 'yellowOil',
property: { color: 'yellow', Quantity: '1 LT', price: 120 },
},
{
id: 22,
name: 'olivoOil',
property: { color: 'golden', Quantity: '2 LT', price: 120 },
},
{
id: 22,
name: 'CastrolOil',
property: { color: 'silk', Quantity: '2 LT', price: 170 },
},
],
},
{
id: 3,
name: 'masala',
property: { color: 'gray', Quantity: '1Tspoon', price: 30 },
subOption: [
{
id: 31,
name: 'garamMasala',
property: { color: 'Garam', Quantity: '2Tspoon', price: 30 },
},
{
id: 32,
name: 'chikenMasala',
property: { color: 'green', Quantity: ' 3Tspoon', price: 30 },
},
{
id: 33,
name: 'normalMasala',
property: { color: 'red', Quantity: '5Tspoon', price: 30 },
},
],
},
],
},
];
// in given data every ingredient have it's substitute option while i can select any supstitute option for example if i want to change masala with its substitute output will change the position of substitue with it's option and output should be given below
//i want to replace masala with normal masala
const output = [
{ CurryName: 'Chiken', id: 0 },
{
ingredients: [
{
id: 1,
name: 'onion',
property: { color: 'yellow', Quantity: 'half KG', price: 120 },
subOption: [
{
id: 11,
name: 'redOnion',
property: { color: 'red', Quantity: '1 KG', price: 120 },
},
{
id: 12,
name: 'whiteOnion',
property: { color: 'white', Quantity: '2 KG', price: 120 },
},
],
},
{
id: 2,
name: 'oil',
property: { color: 'green', Quantity: 'half LT', price: 120 },
subOption: [
{
id: 21,
name: 'yellowOil',
property: { color: 'yellow', Quantity: '1 LT', price: 120 },
},
{
id: 22,
name: 'olivoOil',
property: { color: 'golden', Quantity: '2 LT', price: 120 },
},
{
id: 22,
name: 'CastrolOil',
property: { color: 'silk', Quantity: '2 LT', price: 170 },
},
],
},
{
id: 33,
name: 'normalMasala',
property: { color: 'red', Quantity: '5Tspoon', price: 30 },
subOption: [
{
id: 31,
name: 'garamMasala',
property: { color: 'Garam', Quantity: '2Tspoon', price: 30 },
},
{
id: 32,
name: 'chikenMasala',
property: { color: 'green', Quantity: ' 3Tspoon', price: 30 },
},
{
id: 3,
name: 'masala',
property: { color: 'gray', Quantity: '1Tspoon', price: 30 },
}
],
},
],
},
];
console.log(output)

I suggest that define an element before 'subOption' like 'selectedOption' so you can change it more easily between them
{
selectedOption:{id: 33,
name: 'normalMasala',
property: { color: 'red', Quantity: '5Tspoon', price: 30 }},
subOption: [
{
id: 31,
name: 'garamMasala',
property: { color: 'Garam', Quantity: '2Tspoon', price: 30 },
},
{
id: 32,
name: 'chikenMasala',
property: { color: 'green', Quantity: ' 3Tspoon', price: 30 },
},
{
id: 3,
name: 'masala',
property: { color: 'gray', Quantity: '1Tspoon', price: 30 },
}
],
}
if you able to add 'selectedOption' you can use this code
let temp = oData[1].ingredients[3].subOption[3]
oData[1].ingredients[3].subOption[3].splice(3,1,oData[1].ingredients[3].selectedOption)
oData[1].ingredients[3].selectedOption=temp;

This solution may not be ideal because it changes the original data. But if you don't mind changing the original data, use this.
function swapIngredientMainSub(data, mainID, subID) {
const { ingredients } = data[1];
const targetIndex = ingredients.findIndex(({ id }) => id === mainID);
const { subOption, ...main } = ingredients[targetIndex];
const subIndex = subOption.findIndex(({ id }) => id === subID);
const sub = subOption[subIndex];
subOption[subIndex] = main;
ingredients[targetIndex] = { ...sub, subOption };
}
swapIngredientMainSub(oData, 3, 33);
console.log(JSON.stringify(oData) === JSON.stringify(output)); // true
Option 2:
function swapIngredientMainSub(data, subID) {
const { ingredients } = data[1];
const targetIndex = ingredients.findIndex(({ subOption }) =>
subOption.find(({ id }) => id === subID)
);
const { subOption, ...main } = ingredients[targetIndex];
const subIndex = subOption.findIndex(({ id }) => id === subID);
const sub = subOption[subIndex];
subOption[subIndex] = main;
ingredients[targetIndex] = { ...sub, subOption };
}
swapIngredientMainSub(oData, 33);
console.log(JSON.stringify(oData) === JSON.stringify(output)); // true

I don't know about d3 library that you have included in the tags, but you can use something like this:
const oData = [{
CurryName: 'Chiken',
id: 0
},
{
ingredients: [{
id: 1,
name: 'onion',
property: {
color: 'yellow',
Quantity: 'half KG',
price: 120
},
subOption: [{
id: 11,
name: 'redOnion',
property: {
color: 'red',
Quantity: '1 KG',
price: 120
},
},
{
id: 12,
name: 'whiteOnion',
property: {
color: 'white',
Quantity: '2 KG',
price: 120
},
},
],
},
{
id: 2,
name: 'oil',
property: {
color: 'green',
Quantity: 'half LT',
price: 120
},
subOption: [{
id: 21,
name: 'yellowOil',
property: {
color: 'yellow',
Quantity: '1 LT',
price: 120
},
},
{
id: 22,
name: 'olivoOil',
property: {
color: 'golden',
Quantity: '2 LT',
price: 120
},
},
{
id: 22,
name: 'CastrolOil',
property: {
color: 'silk',
Quantity: '2 LT',
price: 170
},
},
],
},
{
id: 3,
name: 'masala',
property: {
color: 'gray',
Quantity: '1Tspoon',
price: 30
},
subOption: [{
id: 31,
name: 'garamMasala',
property: {
color: 'Garam',
Quantity: '2Tspoon',
price: 30
},
},
{
id: 32,
name: 'chikenMasala',
property: {
color: 'green',
Quantity: ' 3Tspoon',
price: 30
},
},
{
id: 33,
name: 'normalMasala',
property: {
color: 'red',
Quantity: '5Tspoon',
price: 30
},
},
],
},
],
},
];
const selectIngredients = (obj, mainName, subName) => {
obj[1].ingredients.map(ingredient => {
if (ingredient.name === mainName) {
const optionIndex = ingredient.subOption.findIndex(element => element.name === subName);
if (optionIndex !== undefined) {
const {
id,
name,
property
} = ingredient;
ingredient.id = ingredient.subOption[optionIndex].id;
ingredient.name = ingredient.subOption[optionIndex].name;
ingredient.property = ingredient.subOption[optionIndex].property;
ingredient.subOption[optionIndex].id = id;
ingredient.subOption[optionIndex].name = name;
ingredient.subOption[optionIndex].property = property;
}
}
});
return obj;
};
console.log(selectIngredients(oData, "masala", "normalMasala"));

Highchart treemap is not showing numeric data in name field

I'm new to High charts. I'm facing an issue while putting the numeric data in the name field, the data is not getting displayed over the chart.
Here's the working demo => Click here
Here's the code =>
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 2011,
value: 6,
colorValue: 1
}, {
name: 2012,
value: 6,
colorValue: 2
}, {
name: 2013,
value: 4,
colorValue: 3
}, {
name: 2014,
value: 3,
colorValue: 4
}, {
name: 2015,
value: 2,
colorValue: 5
}, {
name: 2016,
value: 2,
colorValue: 6
}, {
name: 2017,
value: 1,
colorValue: 7
}]
}],
title: {
text: 'Highcharts Treemap'
}
});
Any help regarding the issue would be appreciated.

The name field is a string so if you want to display a numeric data on the chart you have to convert it into a string.
To do so you can simply add quotes :
name: '2011',
Or you can use the toString() method:
name: numericValue.toString(),
See demo here

Passing in Id for each data item in bar chart using highcharts

Currently i have my bar chart displaying a bar chart graph and for each bar the title and the data value is shown with no problem. But i would also like to add the id for each displayed bar because i have the bars clickable and with a click on a bar i would like to pass in the id of that individual bar so i can display page with another set of graphs particular to the item id that was passed in.
This is an example of the current json data that i am using to create my chart:
Array:...
{id: 1, uuid: "0ff158d7-09a7-41df-81d1-fd3ac752a967", name: "Example 1", percentage: 34}
{id: 2, uuid: "81aa6eb2-b6fe-4d14-a3ea-f5487b67784a", name: "Example 2", percentage: 0}
{id: 7, uuid: "b7d7fd90-d9af-4a56-aceb-20bfdeda3af4", name: "Example 3", percentage: 12}
....
This is how i am populating my chart:
var value: Array<any> = [];
var name: Array<any> = [];
var ids: Array<any> = [];
this.myService.getData(url).subscribe(
data => {
this.results = data;
this.results.map(function(result){
value.push(result.percentage);
name.push(result.name);
ids.push(result.id);
})
this.chart = {
title: {
text: '',
style: {
display: 'none'
}
},
credits: {
enabled: false
},
chart: {
type: 'bar'
},
xAxis: {
categories: name,
},
yAxis: {
min: 0,
max: 100,
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' %'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(event:any){
console.log(event.target.id);
}
}
}
}
},
series: [{
showInLegend: false,
data: value,
name: 'Demo'
}]
};
}
);
Currently when i click on a bar i could only get the name and its percentage. is there a way to pass in the whole object or at least include the id reference with each data value so i can extract it once clicked?

1.First proper data series has to be form
var dataObj=[{id: 1, uuid: "0ff158d7-09a7-41df-81d1-fd3ac752a967",
name: "Example 1", percentage: 34},
{id: 2, uuid: "81aa6eb2-b6fe-4d14-a3ea-f5487b67784a", name: "Example 2", percentage: 0},
{id: 7, uuid: "b7d7fd90-d9af-4a56-aceb-20bfdeda3af4", name: "Example 3", percentage: 12}];
var value=[];
for(var i=0;i<dataObj.length;i++){
value.push({name:dataObj[i].name,y:dataObj[i].percentage,uuid:dataObj[i].uuid,id:dataObj[i].id})
}
console.log(value);
2.PlotOptions will be
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(event){
console.log(event.point.id);
console.log(event.point.uuid);
}
}
}
}
},
Fiddle demo

Chart angularJs

I have some trouble integrating my data json to a chart i tried highlight chart , nvd3 ,google chart i have data comming out of http get :
$http.get("/get")
.success(function(data){
$scope.produit=data;
});
the result of this is
$scope.produit = [
{
id: 15,
nom: "azerty",
type: "azerty",
quantity: 456,
prix: 25296
},
{
id: 21,
nom: "sdqs",
type: "qsdqsd",
quantity: 102,
prix: 52
}
];
i want to view quantity and type in chart i tried to put type and quantity in seprate tables then when i try to use for (i=0;i>$scope.produit.lenght;i++) it won't work because am putting the for inside the data structure of the chart here's an exemple of data structure
$scope.pieData = [{
name: type[0],
quantity[0]
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
Thank you !

Heat Map With Red Color Range For Negative Values And Green Color Range For Positive Values

I am using heat map of highchart. Its working fine.
Now i want to set color ranges for values. Like green color range for positive values and red color range for negative values.
Is there any option i can use to achieve it ?
Heat Map Sample

U need to Change the min color and max Color
$(function () {
$('#container').highcharts({
colorAxis: {
minColor: '#00FF00',
maxColor: '#FF0000'
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'Positive A',
value: 6,
colorValue: 1
}, {
name: 'Positive B',
value: 6,
colorValue: 2
}, {
name: 'Positive C',
value: 4,
colorValue: 3
}, {
name: 'Neutral',
value: 3,
colorValue: 4
}, {
name: 'Negative E',
value: 2,
colorValue: 5
}, {
name: 'Negative F',
value: 2,
colorValue: 6
}, {
name: 'Negative G',
value: 1,
colorValue: 7
}]
}],
title: {
text: 'Highcharts Treemap'
}
});
});
Here is the JS Fiddle for it

You can mention color to be used while preparing the data to be loaded to chart, you can add your checks and choose at data preparing part.
Example:
data: [{
name: 'A',
value: 6,
color: "red"
}, {
name: 'B',
value: 6,
color: "red"
}, {
name: 'C',
value: 4,
color:"green"
}, {
name: 'D',
value: 3,
color: "red"
}, {
name: 'E',
value: 2,
color:"green"
}, {
name: 'F',
value: 2,
color:"green"
}, {
name: 'G',
value: 1,
color:"yellow"
}]
Sample fiddle

Categories