FlChart to display different time series - firebase

I try to use the following code for my application to display the weight of animals in a chart. My goal is a variable time controlled via buttons (e.g. 1 month, 6 months, 1 year,...).
LineChart(
LineChartData(
lineTouchData: LineTouchData(enabled: true),
gridData: FlGridData(
show: false,
drawHorizontalLine: false,
drawVerticalLine: false,
getDrawingVerticalLine: (value) {
return FlLine(
color: Colors.black,
strokeWidth: 1,
);
},
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, data_snap()['Historie_Inhalt']['0']),
FlSpot(1, data_snap()['Historie_Inhalt']['1']),
FlSpot(2, data_snap()['Historie_Inhalt']['2']),
FlSpot(3, data_snap()['Historie_Inhalt']['3']),
FlSpot(4, data_snap()['Historie_Inhalt']['4']),
FlSpot(6, data_snap()['Historie_Inhalt']['5'])],
isCurved: true,
barWidth: 1,
colors: [
Colors.black87,
],
belowBarData: BarAreaData(
show: true,
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.grey.withOpacity(0.3)]
),
dotData: FlDotData(
show: false,
getDotPainter: (spot, percent, barData, index) =>
FlDotCirclePainter(
radius: 10,
color: Colors.deepOrange.withOpacity(0.5)),
),
),
],
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: false,
reservedSize: 10,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2019';
case 1:
return '2020';
case 2:
return '2021';
case 3:
return '2022';
default:
return '';
}
}),
leftTitles: SideTitles(showTitles: true, margin: 3,
reservedSize: SizeConfig.safeBlockHorizontal * 11
),
rightTitles: SideTitles(showTitles: false),
topTitles: SideTitles(showTitles: false),
),
),
swapAnimationDuration: Duration(milliseconds: 1500),
)
I get the following error directly for the first FlSpot:
type 'String' is not a subtype of type 'int' of 'index'
So far I retrieved only six fixed values from Firebase and displayed them with the following code:
FlSpot(5, data_snap()['P_1W_W']),
'P_1W_W' is in the screenshot below on the same level as 'name'.
The database looks like this ('Historie_Inhalt' is defined as an Array):

Related

How to edit rows in detailslist fluent react UI

I am working with Fluent react UI. I want to edit rows in the table. Is there any option?
https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist
I recommend FluentUI Editable DetailsList. The following example/library has excellent customization to edit on grid/table. It also have other features like column-based filter, bulk edit, bulk delete, and so on.
GitHub Repo: https://github.com/microsoft/FluentUIEditableDetailsList
Working Example: https://editabledetailslist.azurewebsites.net/
The examples are right forward and easy to use. I am currently using it in my SPFx Webpart project with react. You can install using the npm and use the example on the repository to play around.
Install Package on your project
npm i fluentui-editable-grid
Usage
import { DetailsListLayoutMode, mergeStyles, mergeStyleSets, SelectionMode, TextField } from '#fluentui/react';
import { EditableGrid, EditControlType, IColumnConfig, EventEmitter, EventType, NumberAndDateOperators } from 'fluentui-editable-grid';
import { Fabric } from 'office-ui-fabric-react';
import * as React from 'react';
import { useState } from 'react';
const Consumer = () => {
const classNames = mergeStyleSets({
controlWrapper: {
display: 'flex',
flexWrap: 'wrap',
}
});
const [items, setItems] = useState<any[]>([]);
const columns: IColumnConfig[] = [
{
key: 'id',
name: 'ID',
text: 'ID',
editable: false,
dataType: 'number',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
applyColumnFilter: true,
disableSort: true
},
{
key: 'customerhovercol',
name: 'Custom Hover Column',
text: 'Custom Hover Column',
editable: true,
dataType: 'string',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: false,
includeColumnInSearch: false,
applyColumnFilter: false,
disableSort: true,
hoverComponentOptions: { enable:true, hoverChildComponent: <CellHover customProps={{ someProp: '' }} /> }
},
{
key: 'name',
name: 'Name',
text: 'Name',
editable: true,
dataType: 'string',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
applyColumnFilter: true
},
{
key: 'age',
name: 'Age',
text: 'Age',
editable: true,
dataType: 'number',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
applyColumnFilter: true
},
{
key: 'designation',
name: 'Designation',
text: 'Designation',
editable: true,
dataType: 'string',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
inputType: EditControlType.MultilineTextField,
applyColumnFilter: true
},
{
key: 'salary',
name: 'Salary',
text: 'Salary',
editable: true,
dataType: 'number',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: false,
includeColumnInSearch: true,
maxLength:5,
applyColumnFilter: true,
cellStyleRule: {
enable: true,
rule: {
operator : NumberAndDateOperators.LESSTHAN,
value: 50000
},
whenTrue: { textColor: '#EF5350', fontWeight: 'bold' },
whenFalse: { textColor: '#9CCC65' }
}
},
{
key: 'dateofjoining',
name: 'Date of Joining',
text: 'Date of Joining',
editable: true,
dataType: 'date',
minWidth: 150,
maxWidth: 150,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
inputType: EditControlType.Date
},
{
key: 'payrolltype',
name: 'Payroll Type',
text: 'Payroll Type',
editable: true,
dataType: 'string',
minWidth: 150,
maxWidth: 150,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
inputType: EditControlType.DropDown,
dropdownValues: [
{ key: 'weekly', text: 'Weekly' },
{ key: 'biweekly', text: 'Bi-Weekly' },
{ key: 'monthly', text: 'Monthly' }
]
},
{
key: 'employmenttype',
name: 'Employment Type',
text: 'Employment Type',
editable: true,
dataType: 'string',
minWidth: 200,
maxWidth: 200,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
inputType: EditControlType.Picker,
pickerOptions: {
pickerTags: ['Employment Type1', 'Employment Type2', 'Employment Type3', 'Employment Type4', 'Employment Type5', 'Employment Type6', 'Employment Type7', 'Employment Type8', 'Employment Type9', 'Employment Type10', 'Employment Type11', 'Employment Type12'],
minCharLimitForSuggestions: 2,
tagsLimit: 1,
pickerDescriptionOptions: {
enabled: true,
values: [
{ key: 'Employment Type1', description: 'Employment Type1 Description'},
{ key: 'Employment Type2', description: 'Employment Type2 Description'},
{ key: 'Employment Type3', description: 'Employment Type3 Description'},
{ key: 'Employment Type4', description: 'Employment Type4 Description'},
{ key: 'Employment Type5', description: 'Employment Type5 Description'},
{ key: 'Employment Type6', description: 'Employment Type6 Description'},
{ key: 'Employment Type7', description: 'Employment Type7 Description'},
{ key: 'Employment Type8', description: 'Employment Type8 Description'},
{ key: 'Employment Type9', description: 'Employment Type9 Description'},
{ key: 'Employment Type10', description: 'Employment Type10 Description'},
{ key: 'Employment Type11', description: 'Employment Type11 Description'},
{ key: 'Employment Type12', description: 'Employment Type12 Description'},
] },
suggestionsRule: StringOperators.STARTSWITH
}
}
];
const SetDummyData = () : void => {
const dummyData = [
{
id: "1",
customerhovercol: 'Hover Me',
name: "Name1",
age:32,
designation:'Designation1',
salary:57000,
dateofjoining:'2010-04-01T14:57:10',
payrolltype: 'Weekly',
employmenttype: 'Employment Type11'
},
{
id: "2",
customerhovercol: 'Hover Me',
name: "Name2",
age:27,
designation:'Designation2',
salary:42000,
dateofjoining:'2014-06-09T14:57:10',
payrolltype: 'Monthly',
employmenttype: 'Employment Type4'
},
{
id: "3",
customerhovercol: 'Hover Me',
name: "Name3",
age:35,
designation:'Designation3',
salary:75000,
dateofjoining:'2005-07-02T14:57:10',
payrolltype: 'Weekly',
employmenttype: 'Employment Type7'
},
{
id: "4",
customerhovercol: 'Hover Me',
name: "Name4",
age:30,
designation:'Designation4',
salary:49000,
dateofjoining:'2019-04-01T14:57:10',
payrolltype: 'Bi-Weekly',
employmenttype: 'Employment Type2'
}
];
setItems(dummyData);
}
React.useEffect(() => {
SetDummyData();
}, []);
return (
<Fabric>
<div className={classNames.controlWrapper}>
<TextField placeholder='Search Grid' className={mergeStyles({ width: '60vh', paddingBottom:'10px' })} onChange={(event) => EventEmitter.dispatch(EventType.onSearch, event)}/>
</div>
<EditableGrid
id={1}
columns={columns}
items={items}
enableCellEdit={true}
enableExport={true}
enableTextFieldEditMode={true}
enableTextFieldEditModeCancel={true}
enableGridRowsDelete={true}
enableGridRowsAdd={true}
height={'70vh'}
width={'140vh'}
position={'relative'}
enableUnsavedEditIndicator={true}
//onGridSave={onGridSave}
enableGridReset={true}
enableColumnFilters={true}
enableColumnFilterRules={true}
enableRowAddWithValues={{enable : true, enableRowsCounterInPanel : true}}
layoutMode={DetailsListLayoutMode.justified}
selectionMode={SelectionMode.multiple}
enableRowEdit={true}
enableRowEditCancel={true}
enableBulkEdit={true}
enableColumnEdit={true}
enableSave={true}
/>
</Fabric>
);
};
export default Consumer;
}

Error "Tried calling: call()" while loading page with Linechart

In my application I am trying to use the following code to display a Linechart with a a selector below for the displayed data.
class _SearchResultState extends State<SearchResult> {
dynamic data_snap;
bool _loading = false;
Future<dynamic> getData() async{
final DocumentReference document = FirebaseFirestore.instance.collection("Animals").doc(widget.data);
_loading = true;
await document.get().then<dynamic>(( DocumentSnapshot snapshot) async{
setState(() {
data_snap =snapshot.data;
_loading = false;
});
});
}
Map<int, LineChartData> selection;
int _selected = 2;
bool showAvg = false;
#override
void initState(){
selection = {0: oneWeek(), 1: oneMonth(), 2: oneYear()};
super.initState();
getData();
}
#override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
SizeConfig().init(context);
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.lightGreen),
backgroundColor: Colors.grey[100],
title: const Text('Details', style:
TextStyle(color: Colors.lightGreen)),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [ _loading ? CircularProgressIndicator():
Container(
height: SizeConfig.safeBlockHorizontal * 150,
child: Card(
color: Theme.of(context).cardColor,
child: Padding(
padding: const EdgeInsets.only(
top: 5.0,
bottom: 5.0,
left: 5.0,
right: 5.0
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: _loading ? CircularProgressIndicator(): [
Text(data_snap()['Name'],
style: new TextStyle(
fontSize: SizeConfig.blockSizeHorizontal * 5,
fontWeight: FontWeight.bold))
],
),
Row(
children: [ _loading ? CircularProgressIndicator():
new Container(
width: SizeConfig.safeBlockHorizontal * 90,
height: SizeConfig.safeBlockHorizontal * 38,
alignment: Alignment.center,
child: LineChart(
selection[_selected],
),
),],),
Row(
children: [ _loading ? CircularProgressIndicator():
new Container(
width: SizeConfig.safeBlockHorizontal * 90,
height: SizeConfig.safeBlockHorizontal * 38,
alignment: Alignment.center,
child:
SizedBox(
width: 300,
height: 34,
child: Row(
children: [
FlatButton(
onPressed: () {
setState(() {
_selected = 2;
});
},
child: Text('Week',
style: TextStyle(
fontSize: 12,
color: _selected == 0
? Colors.white.withOpacity(0.5)
: Colors.white))),
FlatButton(
onPressed: () {
setState(() {
_selected = 1;
});
},
child: Text('Month',
style: TextStyle(
fontSize: 12,
color: _selected == 1
? Colors.white.withOpacity(0.5)
: Colors.white))),
FlatButton(
onPressed: () {
setState(() {
_selected = 2;
});
},
child: Text('Year',
style: TextStyle(
fontSize: 12,
color: _selected == 2
? Colors.white.withOpacity(0.5)
: Colors.white))),
],
))
)],),
],
),
),
),
)
]
)
),
);
}
LineChartData oneWeek() {
List<double> listMax2 = List.from(data_snap()['Historie_Inhalt']);
final listMax2reversed = List.from(listMax2.reversed);
final list_one_week2 = listMax2reversed.take(
data_snap()['Historie_Zeitangabe']['1w']);
final list_one_week_list2 = List.from(list_one_week2);
final list_one_week_list_rev2 = List.from(list_one_week_list2.reversed);
List<FlSpot> spots_one_week2 =
list_one_week_list_rev2
.asMap()
.entries
.map((e) {
return FlSpot(e.key.toDouble(), e.value);
}).toList();
return LineChartData(
lineTouchData: LineTouchData(enabled: true),
gridData: FlGridData(
show: false,
drawHorizontalLine: false,
drawVerticalLine: false,
getDrawingVerticalLine: (value) {
return FlLine(
color: Colors.black,
strokeWidth: 1,
);
},
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
lineBarsData: [
LineChartBarData(
spots: spots_one_week2,
isCurved: true,
barWidth: 1,
colors: [
Colors.black87,
],
belowBarData: BarAreaData(
show: true
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.grey.withOpacity(0.3)]
),
dotData: FlDotData(
show: false,
getDotPainter: (spot, percent, barData, index) =>
FlDotCirclePainter(
radius: 10,
color: Colors.deepOrange.withOpacity(0.5)),
),
),
],
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: false,
reservedSize: 3,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2019';
case 1:
return '2020';
case 2:
return '2021';
case 3:
return '2022';
default:
return '';
}
}),
leftTitles: SideTitles(showTitles: true, margin: 3,
reservedSize: SizeConfig.safeBlockHorizontal * 11
),
rightTitles: SideTitles(showTitles: false),
topTitles: SideTitles(showTitles: false),
));
}
LineChartData oneMonth() {
List<double> listMax2 = List.from(data_snap()['Historie_Inhalt']);
final listMax2reversed = List.from(listMax2.reversed);
final list_one_month2 = listMax2reversed.take(data_snap()['Historie_Zeitangabe']['1m']);
final list_one_month_list2 = List.from(list_one_month2);
final list_one_month_list_rev2 = List.from(list_one_month_list2.reversed);
List<FlSpot> spots_one_month2 =
list_one_month_list_rev2
.asMap()
.entries
.map((e) {
return FlSpot(e.key.toDouble(), e.value);
}).toList();
return LineChartData(
lineTouchData: LineTouchData(enabled: true),
gridData: FlGridData(
show: false,
drawHorizontalLine: false,
drawVerticalLine: false,
getDrawingVerticalLine: (value) {
return FlLine(
color: Colors.black,
strokeWidth: 1,
);
},
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
lineBarsData: [
LineChartBarData(
spots: spots_one_month2,
isCurved: true,
barWidth: 1,
colors: [
Colors.black87,
],
belowBarData: BarAreaData(
show: true
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.grey.withOpacity(0.3)]
),
dotData: FlDotData(
show: false,
getDotPainter: (spot, percent, barData, index) =>
FlDotCirclePainter(
radius: 10,
color: Colors.deepOrange.withOpacity(0.5)),
),
),
],
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: false,
reservedSize: 3,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2019';
case 1:
return '2020';
case 2:
return '2021';
case 3:
return '2022';
default:
return '';
}
}),
leftTitles: SideTitles(showTitles: true, margin: 3,
reservedSize: SizeConfig.safeBlockHorizontal * 11
),
rightTitles: SideTitles(showTitles: false),
topTitles: SideTitles(showTitles: false),
));
}
LineChartData oneYear() {
List<double> listMax2 = List.from(data_snap()['Historie_Inhalt']);
final listMax2reversed = List.from(listMax2.reversed);
final list_one_year2 = listMax2reversed.take(data_snap()['Historie_Zeitangabe']['1y']);
final list_one_year_list2 = List.from(list_one_year2);
final list_one_year_list_rev2 = List.from(list_one_year_list2.reversed);
List<FlSpot> spots_one_year2 =
list_one_year_list_rev2
.asMap()
.entries
.map((e) {
return FlSpot(e.key.toDouble(), e.value);
}).toList();
return LineChartData(
lineTouchData: LineTouchData(enabled: true),
gridData: FlGridData(
show: false,
drawHorizontalLine: false,
drawVerticalLine: false,
getDrawingVerticalLine: (value) {
return FlLine(
color: Colors.black,
strokeWidth: 1,
);
},
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
lineBarsData: [
LineChartBarData(
spots: spots_one_year2,
isCurved: true,
barWidth: 1,
colors: [
Colors.black87,
],
belowBarData: BarAreaData(
show: true
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.grey.withOpacity(0.3)]
),
dotData: FlDotData(
show: false,
getDotPainter: (spot, percent, barData, index) =>
FlDotCirclePainter(
radius: 10,
color: Colors.deepOrange.withOpacity(0.5)),
),
),
],
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: false,
reservedSize: 3,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2019';
case 1:
return '2020';
case 2:
return '2021';
case 3:
return '2022';
default:
return '';
}
}),
leftTitles: SideTitles(showTitles: true, margin: 3,
reservedSize: SizeConfig.safeBlockHorizontal * 11
),
rightTitles: SideTitles(showTitles: false),
topTitles: SideTitles(showTitles: false),
));
}
}
I already tried to use a FutureBuilder, but it doesn't work with the selection in initState().
I get the following error in the line "List listMax2 = List.from(data_snap()['Historie_Inhalt']);" of the function LineChartData oneWeek().
The method 'call' was called on null.
Receiver: null
Tried calling: call()
How can I solve this problem?
Try doing this instead:
Map<int, LineChartData> selection = {};
#override
void initState(){
super.initState();
getData().then((_) { //or use whenComplete
setState(() => selection = {0: oneWeek(), 1:oneMonth(), 2: oneYear()});
}
}
And change your Row like this:
Row(
children: [
_loading
? CircularProgressIndicator()
: Container(
width: SizeConfig.safeBlockHorizontal * 90,
height: SizeConfig.safeBlockHorizontal * 38,
alignment: Alignment.center,
child: selection.isNotEmpty && selection.containsKey(_selected)
? LineChart(selection[_selected])
: Container() ,
),],),

How to Place ng-5 range sliders labels into range slider pointers in angular?

i have customized range slider width and height but the label Legend can't be edited.I have to place the label text to inside my range pointer
html:
<ng5-slider [(value)]="valueOne" [options]="ValueOpt"></ng5-slider>
typescript:
valueOne = 0;
ValueOpt: Options = {
vertical: true,
showSelectionBar: false,
showTicksValues: false,
disabled: true,
stepsArray: [
{ value: 0, legend: 'Off' },
{ value: 20, legend: 'Very low' },
{ value: 40, legend: 'Low' },
{ value: 60, legend: 'Neutral' },
{ value: 80, legend: 'high' },
{ value: 100, legend: 'Very high' }
]
hideLimitLabels: true,
translate: (valueOne: number, label: LabelType): string => {
console.log();
switch (valueOne) {
case 0:
return '<b>Off</b>';
case 20:
return '<b>Very low</b>';
case 40:
return '<b>Low</b>';
case 60:
return '<b>Netural</b>';
case 80:
return '<b>High</b>';
case 100:
return '<b>Very high</b>';
default: return ' ';
}
}
}

flow error pass object w/ extra properties than parameter needs

I have the following code where defining a getByIds function that filters an array of objects, each of which has an id field and other fields.
// #flow
type X = {
id: string
};
type F = (Array<string>, Array<X>) => Array<X>;
import { curry } from "ramda";
const getByIds: F = curry((ids, xs) => xs.filter(x => ids.includes(x.id)));
export default getByIds;
when feeding a user = {id: 123, alias: 'foo'} to getByIds, flow warns that X doesn't have property alias . I thought flow allows extra properties (covariant?) to be attached to object of a less restricting type.
Here is the eslintrc.js
module.exports = {
env: {
// browser: true ensures things like window, or localStorage won't get complained
browser: true,
es6: true
},
plugins: [
"react",
"flowtype"
// "prettier",
],
extends: [
"eslint:recommended",
// "plugin:react/recommended",
"plugin:flowtype/recommended"
],
// https://github.com/feross/standard/issues/447
parser: "babel-eslint",
parserOptions: {
ecmaFeatures: {
modules: true,
classes: true,
experimentalObjectRestSpread: true,
jsx: true
},
sourceType: "module"
},
rules: {
// "indent": [
// "error",
// 4
// ],
// "prettier/prettier": "error",
"linebreak-style": ["error", "unix"],
// "quotes": [
// "error",
// "double"
// ],
// "semi": [
// "error",
// "never"
// ],
// "jsx-space-before-closing": 1,
// "no-undef": "error",
"no-unused-vars": [2, { argsIgnorePattern: "_" }], //https://eslint.org/docs/rules/no-unused-vars#argsignorepattern
"flowtype/define-flow-type": 1,
"comma-dangle": [1, "always-multiline"],
"always-multiline": 0,
"no-console": 0,
"no-constant-condition": 0,
"no-case-declarations": 0,
"react/no-danger": 0,
"react/display-name": 1,
"react/jsx-key": 1,
"react/jsx-no-comment-textnodes": 1,
"react/jsx-no-duplicate-props": 1,
"react/jsx-no-target-blank": 1,
"react/jsx-no-undef": 1,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/no-children-prop": 1,
"react/no-danger-with-children": 1,
"react/no-deprecated": 1,
"react/no-direct-mutation-state": 1,
"react/no-find-dom-node": 1,
"react/no-is-mounted": 1,
"react/no-render-return-value": 1,
"react/no-string-refs": 1,
"react/no-unescaped-entities": 1,
"react/no-unknown-property": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"react/require-render-return": 1,
"react/jsx-max-props-per-line": 1,
"react/jsx-first-prop-new-line": [1, "multiline-multiprop"],
"react/jsx-indent-props": [1, 2]
},
globals: {
module: true,
gon: true,
require: true,
__dirname: true,
_: true,
jest: true,
process: true,
it: true,
describe: true,
expect: true,
test: true,
SyntheticEvent: true,
SyntheticAnimationEvent: true,
SyntheticClipboardEvent: true,
SyntheticCompositionEvent: true,
SyntheticInputEvent: true,
SyntheticUIEvent: true,
SyntheticFocusEvent: true,
SyntheticKeyboardEvent: true,
SyntheticMouseEvent: true,
SyntheticDragEvent: true,
SyntheticWheelEvent: true,
SyntheticTouchEvent: true,
SyntheticTransitionEvent: true
},
settings: {
flowtype: {
onlyFilesWithFlowAnnotation: true
}
}
};
Any ideas?

Day vs Time on Scatter plot

I want to have a day vs timescatter plot. I have some unix time values. I just need to plot them on X and Y axis such that the days of the week (e.g. Monday, Tuseday etc.) on the X axis and the time e.g.(2:24,13:40 etc. ) on the Y axis. I have tried using the datetime type. But I think I am missing something.
Here is what I have tried to do:
data=[["Saturday", 1390723133.57414], ["Sunday", 1390803027.3852], ["Monday", 1390862581.18321], ["Monday", 1390830748.67335], ["Wedneday", 1391015403.93726], ["Wedneday", 1391006992.20059], ["Sunday", 1390804961.8415]]
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'test'
},
xAxis: {
title: {
enabled: true,
text: 'Day of the week'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
},
yAxis: {
title: {
text: 'Time of the day'
},
type: 'datetime',
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: '',
color: 'rgba(223, 83, 83, .5)',
data: data
}]
});
});
});
You need parse your data to correct format, because in data array you need to have timestamps or numbers, not days / strings as you have.

Resources