My JSON looks like this:-
{
"date": "2021-11-02T11:09:10.000+00:00"
"classification": "Internal",
}
And I want to plot "date" on X-axis and "classification" as a value in the Series.
But there is no way I found to plot it as a value.
Any suggestions??
I'm not sure what you are looking for.. but you can set the yAxis type also to "category":
option = {
dataset: {
source: [
{
date: '2021-11-02T11:09:10.000+00:00',
classification: 'Internal'
},
{
date: '2021-11-03T11:09:10.000+00:00',
classification: 'External'
}
]
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'category'
},
series: [
{
encode: {
x: 'date',
y: 'classification'
},
type: 'line'
}
]
};
Related
I'm trying to highlight a specific part in a graph by date. The graph is dates in X axis and value in Y axis. I tried doing like this example but I get the error TypeError: Cannot read properties of undefined (reading 'coord')
This is my graph's code:
{
xAxis: {
type: "category",
data: xaxis,
show: true,
axisLabel: {
formatter: function(params:any){
return (new Date(params)).toLocaleString('pt-BR')
}
}
},
yAxis: {
type: "value",
name: 'Eficiência de Consumo (Nm³/ton)',
axisLabel: {
formatter: '{value}'
}
},
dataZoom: [
{
type: 'inside'
}
],
tooltip: {
trigger: "axis",
formatter: function(params:any){
const seriesName = params[0].seriesName
const timeStamp = (new Date(params[0].axisValue)).toLocaleString('pt-BR')
const eficiencia = params[0].value
return `${seriesName} <br/> ${timeStamp}: ${eficiencia} Nm³/ton`
},
axisPointer: {
label: {
backgroundColor: "#6a7985"
}
}
},
legend: {
orient: 'horizontal',
top: 'top'
},
visualMap: {
show: false,
pieces: [
{
min: startAlertTime,
max: endAlertTime,
color: '#FBDB0F'
}
]
},
series: [{
data: yaxis,
name: 'Eficiência de Consumo',
type: "line",
}]}
startAlertTime and endAlertTime are ISO timestamps like so '2022-06-13T10:42:22.772Z'. I'd like to highlight the graph between those two points. This is my graph with no VisualMap:
Graph with no visualmap
This is what I'd like to do based on the timestamps on the X axis:
Desired output
visualMap is going to color the line. If you want to color an area (like in your desired output), you'll have to use series.markArea. Both are used on the example you gave.
I have the following collections
const TransactionSchema = mongoose.Schema({
schedule: {
type: mongoose.Schema.ObjectId,
required: true,
ref: "Schedule"
},
uniqueCode: {
type: String,
required: true
},
item: {
type: mongoose.Schema.ObjectId,
required: false,
ref: "Item"
},
created: {
type: Date,
default: Date.now
},
status: {
type: String,
required: false
},
})
schedule
const ScheduleSchema = mongoose.Schema({
start: {
type: Date,
required: true,
},
end: {
type: Date,
required: false,
},
questions: {
type: Array,
default: [],
},
items: [{
item: {
type: mongoose.Schema.ObjectId,
require: true,
ref: "Item"
},
stock: {
type: Number,
required: true
}
}],
status: {
type: String,
required: false
},
})
I want to return how many times the item appear in transaction and reduce it with the number of total item I have in array of objects items in schedule collection.
For example I have the following data:
transaction
[
{
"_id":ObjectId('626134d547c28b6ecc6d0c6c'),
"schedule":624edc44ac2edc1cf07821de,
"uniqueCode":"312312312312",
"created":2022-04-21T10:41:25.901+00:00,
"item": 61efd8a812432135c08a748d,
"status": "Active"
},
{
"_id":ObjectId('62615ea3db7d00061b7cc437'),
"schedule":624edc44ac2edc1cf07821de,
"uniqueCode":"1213123123",
"created":2022-04-21T13:39:47.351+00:00,
"item": 624c6b26a41c439987b1eb42,
"status": "Active"
}
]
schedule
[
{
"_id":ObjectId('624edc44ac2edc1cf07821de'),
"start":2000-01-01T00:00:00.000+00:00,
"end":2000-01-01T00:00:00.000+00:00,
"questions":[
12,
32,
122
],
"items":[
{
"item":61efd8a812432135c08a748d,
"stock":120
},
{
"item":624c6b26a41c439987b1eb42,
"stock":1000
}
],
"status":"Active"
},
]
Item
[
{
"_id": ObjectId('61efd8a812432135c08a748d'),
"name": "Samsung S21"
},
{
"_id": ObjectId('624c6b26a41c439987b1eb42'),
"name": "Iphone 10"
}
]
I want to get the following result:
[
{
"item":"Samsung S21",
"total":119
},
{
"item":"Iphone 10",
"total":999
}
]
Note: I want the query to query one schedule data only so the result only shows the items in that schedule. The first row shows 119 from total stock of item 120 - 1 which is how many times the item appeared in transaction (where the status is active). The second row shows 999 because the item has appeared in one transaction.
Thank you. Sorry for my bad English.
I would appreciate any help that I can get with this
I need to plot a pie chart with 4 standard pies: ABC, BCD, CDE and DEF
Each Pie has a data point coming in from my GraphiQL resolver which looks like this:
{
"data": {
"metrics": {
"A": 56147.85,
"B": 116480.51,
"C": 56147.85,
"D": 120329.45000000001,
}
}
}
This is my highchart code for piechart
function PieChart() {
const { loading, error, data } = useQuery(CONC, {
variables: {
Currency: 'USD',
Date: {
date: '2019-05-01',
date_range: ['2019-05-01', '2019-06-10'],
},
Options: {
a: {
prop: '44',
csprop: ['14', '14', '40', '60'],
},
d: {
prop: '104',
csprop: ['511', '289', '519', '62'],
},
},
C: 'G',
Incl: false,
DFilters: [
{
by: 'P',
values: [],
},
],
},
});
const Top = [];
const First = [];
const Second = [];
const Rest = [];
data &&
data.metrics.forEach((e) => {
Top.push(e['A']);
First.push(e['B']);
Second.push(e['C']);
Rest.push(e['D']);
});
return (
<HighchartWrapper
chartOptions={{
chart: {
type: 'pie',
height: 230,
// width: 565,
},
title: {
text: '',
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
},
accessibility: {
point: {
valueSuffix: '%',
},
},
exporting: {
enabled: false,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
},
},
},
series: [
{
name: 'R',
data: [
{ name: 'ABC', y: Top},
{ name: 'BCD', y: First},
{ name: 'CDE', y: Second},
{ name: 'DEF', y: Rest},
],
},
],
}}
/>
);
}
export default memo(PieChart);
PROBLEM:
The GraphiQL query is generating results.
But I believe it's the way I am trying to push data that's giving me an empty pie chart
Thank you all in advance
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
it's the first time i am using billboard.js so i'm having difficulties working with timeseries data, here's my try:
exemple of the data:
{
"values":{
[5,8],[2020-02-07T07:06:01.591Z,2020-02-07T07:06:03.812Z]
}
}
how i'm trying to display it (not sure if MS exists):
chart = bb.generate({
bindto: "#chart",
data: {
x: "x",
xFormat: "%Y-%m-%dT%H:%M:%S.%MSZ",
type: "line",
columns: [
["x",data.values[1]],
["nbr evenements",data.values[0]]
]
},
axis:{
x:{
type:"timeseries",
localtime:false,
tick: {
format: "%Y-%m-%d %H:%M:%S.%MS"
}
}
}
});
i tried this instead, it worked fine:
chart = bb.generate({
bindto: "#chart",
data: {
x: "x",
xFormat: "%Y-%m-%dT%H:%M:%S.%LZ",
type: "line",
columns: [
["x"].concat(data.values[1]),
["nbr evenements"].concat(data.values[0])
]
},
axis:{
x:{
type:"timeseries",
localtime:false,
tick: {
format: "%Y-%m-%dT%H:%M:%S"
}
}
}
});