I've got the mfpierre:chartist meteor package installed and the mspi:chartistlegend plugin for it installed (both atmosphere packages). I've got the plugin like so:
new Chartist.Bar('.ct-chart', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[1,2,3,4],
[1,2,3,4],
[1,2,3,4]
]
}, {
plugins: [ Chartist.plugins.legend() ]
});
The chart won't render with the "plugins" key/value pair in place. If I remove the "plugins" key/value, the chart renders fine. As far as I can tell, I'm following the documentation. Any help welcome.
I am not using meteor so your mileage may vary but I am using Angular2 and was getting similar errors. The answer for me was to use the legend plugin to get it initialized first and then use it in the Chartist plugin definition like you have done. This feels hacky but its working...
import * as Chartist from 'chartist';
import * as MyLegend from 'chartist-plugin-legend';
constructor(){
var tester = new MyLegend(); //without this line, you get 'Chartist.plugins undefined'
}
.... in another method like ngOnInit or something...
new Chartist.Bar('.ct-chart', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[1,2,3,4],
[1,2,3,4],
[1,2,3,4]
]
}, {
plugins: [ Chartist.plugins.legend({
legendNames: ['Blue pill', 'Red pill', 'Purple pill']
}) ]
});
You need to provide an object to .legend() containing names for the legends, like this:
new Chartist.Line('.ct-chart-line', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
},
plugins: [
Chartist.plugins.legend({
legendNames: ['Blue pill', 'Red pill', 'Purple pill'],
})
]
});
More demos here: https://codeyellowbv.github.io/chartist-plugin-legend/
You can also add names in the series like this:
series: [
{ "name": "Money A", "data": [60000, 40000, 80000, 70000] },
{ "name": "Money B", "data": [40000, 30000, 70000, 65000] },
{ "name": "Money C", "data": [8000, 3000, 10000, 6000] }
]
Source
Related
I've the following date: "2022-06-04T00:00:00.000Z" format, We've need of date calculation for highcharts in this numeric type format "1525844100000" so how can I calculate in react-highcharts
xAxis: {
type: 'datetime',
ordinal: false,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
Date: false,
tickInterval: 4 3600 1000,
minRange: 1 24 3600000,
dateTimeLabelFormats: {
day: '%l %P',
hour: '%l %P'
},
offset: 0,
},
series: [
{
"data": [[1.424304e+12, 0.25]],
color: '#FFA749',
},
],
"highcharts": "^6.1.1",
"react-highcharts": "^16.0.2",
I've given above my charts details
In order to convert ISO-8601 to timestamp format, use getTime() JS method.
let timestamp = new Date('2022-06-04T00:00:00.000Z').getTime()
// expected output: 1654300800000
Demo: https://jsfiddle.net/BlackLabel/vnLdum1k/
Am trying to detect and extract TABLE/FORMS data from a multi-page PDF (Async operation), which as per docs, "StartDocumentAnalysis" API is the right one. However,the outputs differ in each case when doing from console and from automation (using above API).
Case1: When analyzing same multi-page PDF from Textract console, I see 13 Tables are detected along with Forms/Lines/Words.
{
"BlockType": "CELL",
"Confidence": 67.00711822509766,
"RowIndex": 1,
"ColumnIndex": 2,
"RowSpan": 1,
"ColumnSpan": 1,
"Geometry": {....},
},
"Id": "fba85b26-3340-4f00-912c-5b86f253b7cd",
"Relationships": [
{
"Type": "CHILD",
"Ids": [
"684d019a-8c89-4cc1-81a0-702e581938f6",
"de8def9a-de59-4f70-ae2f-1624b1b607d7"
]
}
],
"Page": 3,
"childText": "Ficus Bank ",
"SearchKey": "Ficus Bank "
}
Case2: When using "StartDocumentAnalysis" API on same PDF from S3, the BlockType ="TABLE" are present in the output but without any data.
{
"BlockType": "CELL",
"ColumnIndex": 2,
"ColumnSpan": 1,
"Confidence": 67.00711822509766,
"EntityTypes": null,
"Geometry": {....},
},
,
"Hint": null,
"Id": "77c2a38a-c36c-4d8d-ba32-7e51a022ee23",
"Page": 3,
"Query": null,
"Relationships": [
{
"Ids": [
"e9b3b510-1041-4d6a-ab42-1fa42643038e",
"0a4d2092-c09e-4a56-aafe-700c006b85a3"
],
"Type": "CHILD"
}
],
"RowIndex": 1,
"RowSpan": 1,
"SelectionStatus": null,
"Text": null,
"TextType": null
},
Observation: The below two keys ("childText" & "SearchKey") are missing from the Async API's output from CELL type of TABLE blocktype.
"childText": "Ficus Bank ",
"SearchKey": "Ficus Bank "
Any info/direction would be appreciated.
var k = [
{
"category": "Cars",
"products": [
{
"productName": "Aston Martin",
"quantity": 2,
"costPrice": 13500000,
"coverPhoto": "www.astonmartinphotoUrl.jpg"
},
{
"productName": "Mercedes",
"quantity": 1,
"costPrice": 220000,
"coverPhoto": "www.mercerdezphotoUrl.jpg"
}
]
},
{
"category": "Food",
"products": [
{
"productName": "Pizza",
"quantity": 50,
"costPrice": 30,
"coverPhoto": "www.pizzaphotoUrl.jpg"
},
{
"productName": "Pancake",
"quantity": 3,
"costPrice": 3,
"coverPhoto": "www.pancakephotoUrl.jpg"
}
]
}
];
Given the above code sample, I'm trying to add a new map to the nested list, product using the firebase.arrayUnion()
Map _map =
{
"productName": 'Tesla',
"quantity": 2,
"costPrice": 45000,
"coverPhoto": "www.teslaPhotoUrl.jpg"
};
I want to only add this map only where the key 'category' is equal to 'Cars'
_firebaseFirestoreRef.collection('data').doc(id).update({
"fieldPath to the the list where key category == Cars": FieldValue.arrayUnion([_map])
});
And I want final result to be like this on my firebase firestore database
[
{
"category": "Cars",
"products": [
{
"productName": "Aston Martin",
"quantity": 2,
"costPrice": 13500000,
"coverPhoto": "www.astonmartinphotoUrl.jpg"
},
{
"productName": "Mercedes",
"quantity": 1,
"costPrice": 220000,
"coverPhoto": "www.mercerdezphotoUrl.jpg"
},
{
"productName": 'Tesla',
"quantity": 2,
"costPrice": 45000,
"coverPhoto": "www.teslaPhotoUrl.jpg"
}
]
},
{
"category": "Food",
"products": [
{
"productName": "Pizza",
"quantity": 50,
"costPrice": 30,
"coverPhoto": "www.pizzaphotoUrl.jpg"
},
{
"productName": "Pancake",
"quantity": 3,
"costPrice": 3,
"coverPhoto": "www.pancakephotoUrl.jpg"
}
]
}
];
I know I need to use the FirebaseFirestore FieldPath and some query objects, but I don't know how to use it effectively to achieve this ...
Since your k is an array, you're trying to update an existing element in an array field, which is not possible in Firestore. You'll first need to read the document, get the k array from it, update it in your application code, and then write the resulting field back to the database.
This has been covered quite regularly before, so I recommend looking at some other questions about updating an item in an array.
You can also consider turning the top-level array into a map, using the category for the first-level field name:
products: {
"Cars": [{
"productName": "Aston Martin",
"quantity": 2,
"costPrice": 13500000,
"coverPhoto": "www.astonmartinphotoUrl.jpg"
}, ... ]
"Food": [{
...
}]
}
Now you can add an item to the Cars array with an array union on products.Cars.
As Dharmaraj commented, you could also consider putting the products into a subcollection. This will allow you to query the products separately, and allows you to read the parent document without reading all products.
I'm using WooCommerce Rest APIs in wordpress to make an android application and i'm trying to get product variation from the product detail's response.I am getting product variations with its attributes and names in a list but i don't know how to check which variation has which Variation ID.
"attributes": [
{
"id": 3,
"name": "Ships From",
"position": 0,
"visible": false,
"variation": true,
"options": [
"China"
]
},
{
"id": 20,
"name": "Type",
"position": 1,
"visible": false,
"variation": true,
"options": [
"1",
"2",
"3"
]
},
{
"id": 21,
"name": "Length (m/ft)",
"position": 2,
"visible": false,
"variation": true,
"options": [
"0.25 / 0.82",
"0.5 / 1.64",
"1 / 3.28",
"1.5 / 4.92",
"2 / 6.56"
]
}
],
"default_attributes": [],
"variations": [
158435,
158436,
158437,
158438,
158439,
158440,
158441,
158442,
158443,
158444,
158445,
158446
],
here i have names and ID of attributes with everything and in below i have all ID of product variations but i don't know how to know that if i mix China+1+"0.25 / 0.82 then which will be variation ID.
thanks in advance.
You have to make another api call to wp-json/wc/v3/products/< product_id >/variations or make individual calls to wp-json/wc/v3/products/< product_id >/variations/< variation_id > using those variations id's on the "variations" array and check which variation has which combination of attributes, there is no direct relation between the variation ID and the attributes it uses.
I have prepared linear graph and some data here.
As you can see, when you try display details of samples in the middle, graph show detail of another one. As the date format I am using Unix timestamp.
Next problem is rectangle below which should show sample's date, instead of it show day, month, and some number. I require date format like YYYY/MM/DD - mm:ss.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 80,
"autoMarginOffset": 20,
"marginTop": 7,
"dataDateFormat": "YYYY/MM/DD JJ:NN:QQQ",
"dataProvider": chartData,
"valueAxes": [{
"axisAlpha": 0.2,
"dashLength": 1,
"position": "left",
}],
"mouseWheelZoomEnabled": true,
"graphs": [{
"id": "g1",
"balloonText": "BallonText",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"hideBulletsCount": 50,
"title": "red line",
"valueField": "yCoordinate",
"useLineColorForBulletBorder": true,
"balloon":{
"drop":true
}
}],
"chartScrollbar": {
"autoGridCount": true,
"graph": "g1",
"scrollbarHeight": 40
},
"chartCursor": {
"limitToGraph":"g1"
},
"categoryField": "xCoordinate",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
} );
There are a couple of issues.
1) Your date-based data must be sorted in ascending, per the parseDates documentation documentation. Your dates are out of order, which will cause chart behavior issues like what you're seeing.
2) You have to set your category axis minPeriod to match the smallest period between each of your dates in your data. It looks like seconds ("ss") are appropriate.
As for formatting the chart cursor, you can set categoryBalloonDateFormat to the desired format. In this case "YYYY/MM/DD - NN:SS" is what you want. Refer to the formatting dates documentation if you need to use different formats.
Also note that dataDateFormat is not necessary if you're using millisecond timestamps. dataDateFormat is only used to parse your date data if they are strings.
Updated code below:
var chartData = [
{
xCoordinate: 1511509736056,
yCoordinate: 1
},
{
xCoordinate: 1511509955035,
yCoordinate: 1
},
{
xCoordinate: 1511510013033,
yCoordinate: 1
},
{
xCoordinate: 1511510152052,
yCoordinate: 1
},
{
xCoordinate: 1511510436036,
yCoordinate: 1
},
{
xCoordinate: 1511510664024,
yCoordinate: 1
}
];
//sort dates into ascending order
chartData.sort(function(lhs, rhs) {
return lhs.xCoordinate - rhs.xCoordinate;
});
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
marginRight: 80,
autoMarginOffset: 20,
marginTop: 7,
dataProvider: chartData,
valueAxes: [
{
axisAlpha: 0.2,
dashLength: 1,
position: "left"
}
],
mouseWheelZoomEnabled: true,
graphs: [
{
id: "g1",
balloonText: "BallonText",
bullet: "round",
bulletBorderAlpha: 1,
bulletColor: "#FFFFFF",
hideBulletsCount: 50,
title: "red line",
valueField: "yCoordinate",
useLineColorForBulletBorder: true,
balloon: {
drop: true
}
}
],
chartScrollbar: {
autoGridCount: true,
graph: "g1",
scrollbarHeight: 40
},
chartCursor: {
limitToGraph: "g1",
categoryBalloonDateFormat: "YYYY/MM/DD - NN:SS" //change date format in cursor
},
categoryField: "xCoordinate",
categoryAxis: {
parseDates: true,
axisColor: "#DADADA",
dashLength: 1,
minPeriod: "ss", //update min period to match the smallest intervals in your data.
minorGridEnabled: true
},
export: {
enabled: true
}
});
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>