gantt x-axis display

[pubmania]

Hi,

First off many thanks for such useful tool.

I was using the online live editor and I encountered a weird issue. The gantt I was trying to create was as shown below:

gantt 
dateFormat DD/MM/YY
title PostNord Deployment Plan

Section Common
Task 1 :done,10/03/17, 13/03/17
Task 2 :done, 02/12/16, 13/03/17
Task 3 :done, 02/12/16, 13/12/16
Section Section_1
Design :02/12/16, 22/02/17
Design 2 :crit, 02/12/16, 06/03/17
Design 3 :crit, 02/12/16, 18/03/17

Order wave 1 :20/03/17, 14/04/17
Order wave 2 :crit, 27/03/17, 21/04/17
Order wave 3 :crit, 03/04/17, 28/04/17

Deployment Wave 1 :17/04/17, 23/06/17
Deployment Wave 2 :24/04/17, 09/06/17
Deployment Wave 3 :crit,01/05/17, 07/07/17

Section Section_2
Design :crit, 23/02/17, 15/03/17
Order and Deliver : 20/03/17, 28/04/17
Deployment :01/05/17, 16/08/17

When I use this the Week changes to year for first tick of x-axis (Jan) and then changes to mm-yy for March and April, then changes back to W-17 for May and then again to mm-yy for rest of the months.

I also found that changing the duration of last task to June or July changes everything back to W-nn format. I am also trying to find out a way to change the resulting image to show whole of x-axis as just mmm (Jan, Feb, Mar etc.) and reading some of the previous issues but haven't really understood the axisFormat thing that people have referred to and would really appreciate some guidance on it.

[ydprtm]

+1

[pubmania]

@knsv

actually while I was not getting anywhere with my problem, I came across timeline from vis js library which appears to be doing the same thing and then an R-markdown package based on this js library called timevis which can help create a timeline fairly easily. I was able to create some really nice visuals of gantt using variations of text below on rstudio:

{r echo = FALSE}
library(timevis)

dataGroups <- read.csv(header = TRUE, text = "
id,content,group,start,end,style
1,Task 1,Common,2016-12-02,2017-03-17,NA
2,Task 2,Common,2016-12-02,2017-02-17,background-color: red;color: white
3,Task 3,Common,2016-12-02,2017-03-17,NA
4,Task 4,Section 1,2016-12-02,2017-02-17,background-color: red
5,Task 5,Section 1,2017-03-17,2017-04-07,NA,NA
6,Task 6,Section 2,2017-03-17,2017-04-27,NA,NA
7,Task 7,Section 2,2017-04-07,2017-04-27,NA,NA
8,Task 8,Section 2,2017-05-07,2017-05-17,background-color: red
9,Task 9,Section 2,2017-06-07,2017-06-20,NA,NA
10,Task 10,Section 3,2017-07-07,2017-07-31,background-color: red
")

groups <- read.delim(header = TRUE, sep = ":", text = "
id: content
Common:Common
Section 1:Section 1
Section 2:Section 2
Section 3:Section 3
")
  
timevis(
  dataGroups,
  groups, 
  showZoom = TRUE,
  zoomFactor = 1,
  fit = TRUE
)

Now as it is all being done using javascript library much like mermaid does using phantomjs, I was wondering if someone can look into creating the solution / fork of timevis into mermaid but using vis.js to create the gantt.

My apologies in advance if this is a very naive expectation or makes no sense but I would much rather be able to use mermaid on atom than open R-Studio.

Thanks again!!!

[knsv]

That is quite nice! An integration with vis.js for would open new possibilities for diagrams. Good idea! Get Outlook for iOS On Wed, Apr 12, 2017 at 3:53 PM +0200, "pubmania" <[email protected]> wrote: @knsv actually while I was not getting anywhere with my problem, I came across timeline from vis js library which appears to be doing the same thing and then an R-markdown package based on this js library called timevis which can help create a timeline fairly easily. I was able to create some really nice visuals of gantt using variations of text below on rstudio: {r echo = FALSE} library(timevis) dataGroups <- read.csv(header = TRUE, text = " id,content,group,start,end,style 1,Task 1,Common,2016-12-02,2017-03-17,NA 2,Task 2,Common,2016-12-02,2017-02-17,background-color: red;color: white 3,Task 3,Common,2016-12-02,2017-03-17,NA 4,Task 4,Section 1,2016-12-02,2017-02-17,background-color: red,NA 5,Task 5,Section 1,2017-03-17,2017-04-07,NA,NA 6,Task 6,Section 2,2017-03-17,2017-04-27,NA,NA 7,Task 7,Section 2,2017-04-07,2017-04-27,NA,NA 8,Task 8,Section 2,2017-05-07,2017-05-17,background-color: red,NA 9,Task 9,Section 2,2017-06-07,2017-06-20,NA,NA 10,Task 10,Section 3,2017-07-07,2017-07-31,background-color: red,NA ") groups <- read.delim(header = TRUE, sep = ":", text = " id: content Common:Common Section 1:Section 1 Section 2:Section 2 Section 3:Section 3 ") timevis( dataGroups, groups, showZoom = TRUE, zoomFactor = 1, fit = TRUE ) Now as it is all being done using javascript library much like mermaid does using phantomjs, I was wondering if someone can look into creating the solution / fork of timevis into mermaid but using vis.js to create the gantt. My apologies in advance if this is a very naive expectation or makes no sense but I would much rather be able to use mermaid on atom than open R-Studio. Thanks again!!! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[pubmania]

Hi, with my extremely limited knowledge I did manage to create an html page where if I put CSV for data it will create Gantt chart using timeline module of vis js. I used papaparse js to parse CSV and create json dataset. Code is here and demo is here.

I am hoping someone knowledgeable can now help integrate it with mermaid or atleast give me some pointers on how to go about doing it.

[tylerlong]

I think the orignal issue has been fixed: https://mermaidjs.github.io/mermaid-live-editor/#/edit/Z2FudHQgCmRhdGVGb3JtYXQgREQvTU0vWVkKYXhpc0Zvcm1hdCAlWS0lbQp0aXRsZSBQb3N0Tm9yZCBEZXBsb3ltZW50IFBsYW4KClNlY3Rpb24gQ29tbW9uClRhc2sgMSA6ZG9uZSwxMC8wMy8xNywgMTMvMDMvMTcKVGFzayAyIDpkb25lLCAwMi8xMi8xNiwgMTMvMDMvMTcKVGFzayAzIDpkb25lLCAwMi8xMi8xNiwgMTMvMTIvMTYKU2VjdGlvbiBTZWN0aW9uXzEKRGVzaWduIDowMi8xMi8xNiwgMjIvMDIvMTcKRGVzaWduIDIgOmNyaXQsIDAyLzEyLzE2LCAwNi8wMy8xNwpEZXNpZ24gMyA6Y3JpdCwgMDIvMTIvMTYsIDE4LzAzLzE3CgpPcmRlciB3YXZlIDEgOjIwLzAzLzE3LCAxNC8wNC8xNwpPcmRlciB3YXZlIDIgOmNyaXQsIDI3LzAzLzE3LCAyMS8wNC8xNwpPcmRlciB3YXZlIDMgOmNyaXQsIDAzLzA0LzE3LCAyOC8wNC8xNwoKRGVwbG95bWVudCBXYXZlIDEgOjE3LzA0LzE3LCAyMy8wNi8xNwpEZXBsb3ltZW50IFdhdmUgMiA6MjQvMDQvMTcsIDA5LzA2LzE3CkRlcGxveW1lbnQgV2F2ZSAzIDpjcml0LDAxLzA1LzE3LCAwNy8wNy8xNwoKU2VjdGlvbiBTZWN0aW9uXzIKRGVzaWduIDpjcml0LCAyMy8wMi8xNywgMTUvMDMvMTcKT3JkZXIgYW5kIERlbGl2ZXIgOiAyMC8wMy8xNywgMjgvMDQvMTcKRGVwbG95bWVudCA6MDEvMDUvMTcsIDE2LzA4LzE3

And by the way you can configure the axis format: #269 (comment)

[tylerlong]

@pubmania I like the work you have done and I created a new issue to track it: #640