Querying Vertices through another vertex [GREMLIN] - gremlin

The image above is how my graph looks like, and i would like to query the following output:
[
{
chart:{
name: 'chart1',
id: 'chart1',
label: 'chart',
pk: 'chart1',
},
variables: [
{
variable: {
name:'variable1'
id: 'variable1',
label: 'variable',
pk: 'variable1',
},
years: [
{
name:'year1'
id: 'year1',
label: 'year',
pk: 'year1',
},
{
name:'year2'
id: 'year2',
label: 'year',
pk: 'year2',
},
],
},
{
variable: {
name:'variable2'
id: 'variable2',
label: 'variable',
pk: 'variable2',
},
years: [
{
name:'year3'
id: 'year3',
label: 'year',
pk: 'year3',
},
],
}
],
},
{
chart:{
name: 'chart2',
id: 'chart2',
label: 'chart',
pk: 'chart2',
},
variables: [
{
variable: {
name:'variable2'
id: 'variable2',
label: 'variable',
pk: 'variable2',
},
years: [
{
name:'year4'
id: 'year4',
label: 'year',
pk: 'year4',
},
],
},
],
}
]
But with my current query:
g
.V()
.hasLabel('chart')
.project('chart', 'variables')
.by(valueMap(true))
.by(
out('visualizes')
.hasLabel('year')
.out('outputs')
.hasLabel('variable')
.project('variable', 'years')
.by(
valueMap(true).fold()
)
.by(
__.in('outputs')
.hasLabel('year')
.valueMap(true)
.fold()
)
.fold()
)
This is what im getting:
[
{
chart: {
id: 'chart1',
label: 'chart',
name: 'chart1',
pk: 'chart1',
},
variables: [
{
variable: [
{
id: 'variable1',
label: variable,
name: 'variable1',
pk: 'variable1'
}
],
years: [
{
id: 'year1',
label: 'year',
name: 'year1',
pk: 'year1',
},
{
id: 'year2',
label: "year",
name: 'year2',
pk: 'year2'
},
]
},
{
variable: [
{
id: 'variable1',
label: 'variable',
name: 'variable1',
'pk': 'variable1'
}
],
years: [
{
id: 'year1',
label: 'year',
name: 'year1',
pk: 'year1'
},
{
id: 'year2',
label: 'year',
name: 'year2',
pk: 'year2'
}
]
},
{
variable: [
{
id: 'variable2',
label: "variable",
name: 'variable2',
pk: 'variable2'
}
],
years: [
{
id: 'year3',
label: 'year',
name: 'year3',
pk: 'year3',
},
{
id: 'year4',
label: "year",
name: 'year4',
pk: 'year4'
}
]
}
]
},
{
chart: {
id: 'chart2',
label: 'chart',
name: 'chart2',
pk: 'chart2'
},
variables: [
{
variable: [
{
id: 'variable2',
label: 'variable',
name: 'variable2',
pk: 'variable2'
}
],
years: [
{
id: 'year3',
label: 'year',
name: 'year3',
pk: 'year3'
},
{
id: 'year4',
label: 'year',
name: 'year4',
pk: 'year4'
}
]
}
]
}
]
//this is the formatted version to be easily read. refer to this link for the actual json: https://pastebin.com/Y2ncHyPi
As you can see from the actual output my problem with the query, is chart1 duplicates variable1 and chart2's variable have year3 which is from chart1. Do i have to change the structure of my graph? or do i have to add additional properties for reference? please help.
Query for seeding graph:
g
.addV('chart')
.property('name', 'chart1')
.property('pk', 'chart1')
.property('id', 'chart1')
.as('chart1')
.addV('chart')
.property('name', 'chart2')
.property('pk', 'chart2')
.property('id', 'chart2')
.as('chart2')
.addV('year')
.property('name', 'year1')
.property('pk', 'year1')
.property('id', 'year1')
.as('year1')
.addV('year')
.property('name', 'year2')
.property('pk', 'year2')
.property('id', 'year2')
.as('year2')
.addV('year')
.property('name', 'year3')
.property('pk', 'year3')
.property('id', 'year3')
.as('year3')
.addV('year')
.property('name', 'year4')
.property('pk', 'year4')
.property('id', 'year4')
.as('year4')
.addV('variable')
.property('name', 'variable1')
.property('pk', 'variable1')
.property('id', 'variable1')
.as('variable1')
.addV('variable')
.property('name', 'variable2')
.property('pk', 'variable2')
.property('id', 'variable2')
.as('variable2')
.addE('visualizes')
.from('chart1')
.to('year1')
.addE('outputs')
.from('year1')
.to('variable1')
.addE('visualizes')
.from('chart1')
.to('year2')
.addE('outputs')
.from('year2')
.to('variable1')
.addE('visualizes')
.from('chart1')
.to('year3')
.addE('outputs')
.from('year3')
.to('variable2')
.addE('visualizes')
.from('chart2')
.to('year4')
.addE('outputs')
.from('year4')
.to('variable2')
PS: I am using Azure Cosmos DB's gremlin API.

I can suggest a solution that I'm not sure is the simplest one, but it works:
g.V().hasLabel('chart').
project('chart', 'variables').
by(valueMap(true)).
by(out('visualizes').
hasLabel('year').as('y').
out('outputs').
group().by().
by(select('y').fold()).unfold().
project('variable', 'years').
by(select(keys).
valueMap(true)).
by(select(values).unfold().
valueMap(true).fold()).fold())
I tested it here:
https://gremlify.com/6h

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;
}

Align columns and rows for ant design table

I'm using ant design table to list out my datas but the columns are aligned to the right and by default the titles for all the columns should be aligned to the left. Here's the link to the image: Ant design table alignment issue.
Some of the titles are caused by small width but those are adjustable. The problem is that the titles are aligned to the right, except column 1 which is Round.
Here's my code:
const tableColumns = [
{
title: 'Round',
dataIndex: 'round',
width: 80,
},
{
title: 'Date',
dataIndex: 'date',
width: 100,
},
{
title: 'Price',
dataIndex: 'price',
width: 70,
},
{
title: 'Raise Size',
dataIndex: 'raiseSize',
width: 100,
},
{
title: 'Amount',
dataIndex: 'amount',
width: 100,
},
{
title: 'Market Cap',
dataIndex: 'marketCap',
width: 50,
},
{
title: 'Max Allocation',
dataIndex: 'maxAllocation',
width: 50,
},
{
title: 'Filled',
dataIndex: 'filled',
width: 100,
},
{
title: 'Status',
dataIndex: 'status',
width: 100,
},
{
title: 'Yield',
dataIndex: 'yieldPer',
width: 100,
},
];
const tableData = [
{
round: "Round 1",
date: "10-10-2021",
price: '0.05 USDC',
raiseSize: "1000000 SHI",
amount: "25M",
marketCap:"10M",
maxAllocation: "10M",
filled: "1379%",
status: "Filled",
yieldPer:"+223%"
},
{
round: "Round 2",
date: "17-10-2021",
price: '0.10 USDC',
raiseSize: "1000000 SHI",
amount: "25M",
marketCap:"20M",
maxAllocation: "10M",
filled: "1579%",
status: "Filled",
yieldPer:"+203%"
},
{
round: "Round 3",
date: "28-10-2021",
price: '0.15 USDC',
raiseSize: "1000000 SHI",
amount: "25M",
marketCap:"30M",
maxAllocation: "10M",
filled: "1379%",
status: "Upcoming",
yieldPer:""
},
];
And here is where i use the table:
<Table style={{marginTop:'20px'}} columns={tableColumns} dataSource={tableData} align='center' size="middle" />
Looks like align property for Column is something you are looking for:
const tableColumns = [
{
title: 'Round',
dataIndex: 'round',
width: 80,
},
{
title: 'Date',
align: 'right', // <--- this way
dataIndex: 'date',
width: 100,
},
...

Hide highcharts series name on the chart

I am messing around with highcharts for a company project and I have the name/number from calculations (totals) being displayed int he legend. The problem is they also display on the graph. I can't for the life of me figure out how to turn them off on the chart, yet leave them on in the legend. I've read through the API and maybe I missed it but could use some help if you all don't mind.
Code:
Highcharts.chart('high_charts_admin', {
title: {
text: 'Adset ID: '+results[1].data[0].adset_id,
},
subtitle: {
text: 'Campaign Name: '+results[1].data[0].campaign_name,
},
yAxis: {
title: {
text: ''
}
},
xAxis: {
title: {
text: 'Day of the Campaign',
},
//type: 'datetime',
categories: results[0][8]
},
legend: {
//labelFormatter: function() {
// return '<span style="color: '+this.color+'">'+ this.name + '</span>';
// },
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemWidth: 250,
itemStyle: {
fontSize: '16px',
color: 'black'
},
itemMarginTop: 12,
itemMarginBottom: 12,
squareSymbol: true,
symbolHeight: 25,
symbolWidth: 30,
symbolRadius: 100,
},
chart: {
marginRight: 300,
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0,
type: 'series',
//showInLegend: false,
}
},
series: [{
name: 'Results: '+results[2][0],
data: results[0][0],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Reach: '+results[2][1],
data: results[0][1],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Impressions: '+results[2][2],
data: results[0][2],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Cost Per Lead: '+results[2][3],
data: results[0][3],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Spend: '+results[2][4],
data: results[0][4],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CTR (All): '+results[2][5],
data: results[0][5],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CPC (All): '+results[2][6],
data: results[0][6],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Clicks: '+results[2][7],
data: results[0][7],
type: 'spline',
marker: {
radius: 2
},
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Here is my code:
Highcharts.chart('high_charts_admin', {
title: {
text: 'Adset ID: '+results[1].data[0].adset_id,
},
subtitle: {
text: 'Campaign Name: '+results[1].data[0].campaign_name,
},
yAxis: {
title: {
text: ''
}
},
xAxis: {
title: {
text: 'Day of the Campaign',
},
//type: 'datetime',
categories: results[0][8]
},
legend: {
//labelFormatter: function() {
// return '<span style="color: '+this.color+'">'+ this.name + '</span>';
// },
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemWidth: 250,
itemStyle: {
fontSize: '16px',
color: 'black'
},
itemMarginTop: 12,
itemMarginBottom: 12,
squareSymbol: true,
symbolHeight: 25,
symbolWidth: 30,
symbolRadius: 100,
},
chart: {
marginRight: 300,
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0,
type: 'series',
//showInLegend: false,
}
},
series: [{
name: 'Results: '+results[2][0],
data: results[0][0],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Reach: '+results[2][1],
data: results[0][1],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Impressions: '+results[2][2],
data: results[0][2],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Cost Per Lead: '+results[2][3],
data: results[0][3],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Spend: '+results[2][4],
data: results[0][4],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CTR (All): '+results[2][5],
data: results[0][5],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'CPC (All): '+results[2][6],
data: results[0][6],
type: 'spline',
marker: {
radius: 2
},
}, {
name: 'Clicks: '+results[2][7],
data: results[0][7],
type: 'spline',
marker: {
radius: 2
},
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
You have added total value in the series name
name: 'Results: '+results[2][0],
So it is showing in charts as well as in legend.
Instead of this you should use custom param in series defination like
series: [{
name: 'Results1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot,num)=>{return tot+num}),
type: 'spline',
marker: {
radius: 5
}
}]
Above I added total param in series, then I will use labelFormatter to show the total value in legend.
legend: {
labelFormatter: function() {
return this.userOptions.name + ': ' + this.userOptions.total
},
},
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
labelFormatter: function() {
return this.userOptions.name + ': ' + this.userOptions.total
},
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Results1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
total: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reduce((tot, num) => {
return tot + num
}),
type: 'spline',
marker: {
radius: 5
},
}, {
name: 'Results2',
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4],
total: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 116.4].reduce((tot, num) => {
return tot + num
}),
type: 'spline',
marker: {
radius: 5
},
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="container" style="height: 400px"></div>
Fiddle demo
I think that removing the series-label module script from your HTML document is a solution which you are looking for.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
Demo: https://jsfiddle.net/BlackLabel/f6rya8k3/
API: https://api.highcharts.com/highcharts/plotOptions.series.label

Stock chart timeline buttons and date field left align with chart

I need guide make my chart as shown in the attached screenshot.
I have been using HighCharts for this purpose, but couldn't find appropriate options or configurations to do so. Following is the screen shot of my required design:
I am also attaching the fiddle link to my current implementation that I used to achieve these design requirements.
My Fiddle
HTML:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JavaScript:
Highcharts.stockChart('container', {
chart: {
spacingLeft: 200,
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
title : {
text : 'Activity'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Daily',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Weekly',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Monthly',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
legend: {
enable: true,
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
series: [{
name: 'Label 1',
color: "#00aade",
data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
},
{
name: 'Label 2',
color: "#8cc63e",
data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
}]
});
Kindly if some one can guide me in doing proper configurations or styling to achieve this.
Thanks.
This is the closest I could get
http://jsfiddle.net/0yax1bav/5/
Add spacing on the left:
chart: {
spacingLeft: 300,
},
Move legend to the left:
legend: {
enabled: true,
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: -250,
y: 150
},
Move title to the left:
title : {
align: 'left',
x: -280,
text : 'Activity',
floating: true
},
Move range to the left:
rangeSelector: {
floating: true,
x: 0,
verticalAlign: 'middle',
buttonPosition: {
align: 'left',
y: 20,
x: -140
},
inputPosition: {
align: 'left',
y: 15,
x: -280
},
...
Disable exporting buttons:
exporting:{
buttons:{
contextButton: {
enabled: false
}
}
}
Highcharts.stockChart('container', {
chart: {
spacingLeft: 300,
},
legend: {
enabled: true,
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: -250,
y: 150
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
exporting:{
buttons:{
contextButton: {
enabled: false
}
}
},
title : {
align: 'left',
x: -280,
text : 'Activity',
floating: true
},
rangeSelector: {
floating: true,
x: 0,
verticalAlign: 'middle',
buttonPosition: {
align: 'left',
y: 20,
x: -140
},
inputPosition: {
align: 'left',
y: 15,
x: -280
},
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Daily',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Weekly',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Monthly',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
series: [{
name: 'Label 1',
color: "#00aade",
data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
},
{
name: 'Label 2',
color: "#8cc63e",
data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
}]
});
I was able to get this far. Highcharts x,y coordinates are a bit challenging to use, but you needed to do a bit more styling on buttonPosition,inputPosition, and Title (see screenshot) to move them to the right side:
HTML:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js">
</script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JavaScript:
Highcharts.stockChart('container', {
chart: {
marginLeft: 300,
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
title : {
text : 'Activity',
x: -280
},
rangeSelector: {
x: 0,
verticalAlign: 'middle',
buttonPosition: {
align: 'left',
y: 20,
x: -140
},
inputPosition: {
align: 'left',
y: 15,
x: -280
},
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Daily',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Weekly',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Monthly',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
legend: {
width: 100,
align: 'left',
x: 0, // = marginLeft - default spacingLeft
y: -100,
itemWidth: 100,
borderWidth: 1
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
series: [{
name: 'Label 1',
color: "#00aade",
data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
},
{
name: 'Label 2',
color: "#8cc63e",
data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
}]
});
The legend doesn't appear to be rendering - check to make sure that your data is in the proper format and also try playing around with x and y.

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