Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add timeline sample #21

Open
wants to merge 9 commits into
base: 24.2.x
Choose a base branch
from
94 changes: 94 additions & 0 deletions samples/charts/data-chart/timeline-axis-type.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
{
"export": false,
"strings": {
"legendTitle": "Brexit Timeline"
},
"descriptions": {
"content": {
"type": "DataChart",
"name": "chart",
"plotAreaMarginLeft": 100,
"plotAreaMarginRight": 100,
"axes": [
{
"type": "CategoryXAxis",
"name": "xAxis",
"dataSourceRef": "data",
"label": "Year",
"labelLocation": "OutsideBottom"
},
{
"type": "TimeXAxis",
"name": "xAxis",
"dataSourceRef": "data",
"dateTimeMemberPath": "Year",
"labelLocation": "OutsideBottom"
},
{
"type": "NumericYAxis",
"name": "yAxis",
"title": "TWh",
"labelLocation": "OutsideRight"
}
],
"plotAreaBackground": "rgba(255,255,255,1)",
"series": [
{
"type": "LineSeries",
"name": "LineSeries1",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing title setting

"xAxisRef": "xAxis",
"yAxisRef": "yAxis",
"dataSourceRef": "data",
"valueMemberPath": "Value",
"markerType": "Circle"
},
{
"type": "CalloutLayer",
"name": "CalloutLayer1",
"targetSeriesRef": "LineSeries1",
"dataSourceRef": "data",
"xMemberPath": "",
"yMemberPath": "Value",
"labelMemberPath": "Year",
"isAutoCalloutBehaviorEnabled": false,
"useValueForAutoCalloutLabels": false,
"calloutLeaderBrush": "#EC0D00",
"calloutTextColor": "navy",
"calloutOutline": "#EC0D00",
"calloutBackground": "transparent",
"isCalloutOffsettingEnabled": false,
"textStyle": "font-size: 25px",
Copy link
Collaborator

@HUSSAR-mtrela HUSSAR-mtrela Apr 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using such large font size will make callouts overlap when the chart is small in docs
please change it to smaller font, e.g. 0.8rem

"calloutPositionPadding": 50,
"calloutCollisionMode": "Greedy",
"showDefaultTooltip": false
}
],
"legendRef": null,
"background": "rgba(0, 0, 0, 0)"
}
},
"refs": {
"data": [
{"Date": "2016, 6, 23", "Year": "23 June, 2016", "Value": 5, "Details": "UK votes to exit the EU"},
{"Date": "2017, 3, 29", "Year": "29 March, 2017", "Value": 5, "Details": "The UK triggers Article 50"},
{"Date": "2017, 6, 19", "Year": "19 June, 2017", "Value": 5, "Details": "Brexit negotiations begin"},
{"Date": "2017, 3, 19", "Year": "19 March, 2018", "Value": 5, "Details": "The EU and the UK agree on a transition phase"},
{"Date": "2018, 11, 25", "Year": "25 November, 2018", "Value": 5, "Details": "Draft withdrawl deal agreed"},
{"Date": "2019, 10, 29", "Year": "29 October, 2019", "Value": 5, "Details": "EU heads of state and government approve postponing the Brexit date"},
{"Date": "2020, 12, 31", "Year": "31 December, 2020", "Value": 5, "Details": "Transition period ends"}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the Year data column should display months in short format, e.g. NOV for November

]
},
"modules": [
"withDescriptions",
"charts/DataChartCoreModule",
"charts/DataChartCategoryCoreModule",
"charts/DataChartCategoryModule",
"charts/DataChartVerticalCategoryModule",
"charts/TimeXAxisModule",
"charts/DataChartInteractivityModule",
"charts/DataChartExtendedAxesModule",
"charts/DataChartAnnotationModule",
"charts/AnnotationLayerProxyModule",
"charts/CalloutLayerModule"
]
}