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

Browser become unresponsive when sankey chart is generated with specific data #6555

Closed
lisachristina1234 opened this Issue Aug 30, 2017 · 8 comments

Comments

Projects
None yet
5 participants
@lisachristina1234

lisachristina1234 commented Aug 30, 2017

Summary : Sankey chart is not generating for following option data.

Version & Environment

  • ECharts version : 3
  • Browser version: Version 59.0.3071.115 (Official Build) (64-bit)
  • OS Version: Ubuntu 16.04

Expected behaviour :
Sankey chart should be generated with the given data.
I am not able to find what is special in this data which is why sankey chart is not generating.
Its not too much data and even not creating more than 100 links or nodes.
I hope echarts team would soon figure out why chart is not generating.
Thanks in advance.

ECharts option

option = {
"series" : [
{
  "type": "sankey",
  "right": 130,
  "layout": "none",
  "data": [
    {
      "name": "Key Mess _2",
      "displayName": "Key Mess _2",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(24,129,126,255)",
          "borderColor": "rgba(24,129,126,255)"
        }
      },
      "value": 81.0
    },
    {
      "name": "Field _2",
      "displayName": "Field _2",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(239,198,53,255)",
          "borderColor": "rgba(239,198,53,255)"
        }
      },
      "value": 21.0
    },
    {
      "name": "11/03/2014",
      "displayName": "11/03/2014",
      "dimName": "Date",
      "measureName": "SUM(ID)",
      "value": 66.0
    },
    {
      "name": "Fielld _1",
      "displayName": "Fielld _1",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(226,141,43,255)",
          "borderColor": "rgba(226,141,43,255)"
        }
      },
      "value": 38.0
    },
    {
      "name": "Key Mess _1",
      "displayName": "Key Mess _1",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(179,148,48,255)",
          "borderColor": "rgba(179,148,48,255)"
        }
      },
      "value": 59.0
    },
    {
      "name": "10/03/2014",
      "displayName": "10/03/2014",
      "dimName": "Date",
      "measureName": "SUM(ID)",
      "value": 69.0
    },
    {
      "name": "Legal",
      "displayName": "Legal",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(81,160,158,255)",
          "borderColor": "rgba(81,160,158,255)"
        }
      },
      "value": 26.0
    },
    {
      "name": "13/03/2014",
      "displayName": "13/03/2014",
      "dimName": "Date",
      "measureName": "SUM(ID)",
      "value": 110.0
    },
    {
      "name": "Contact",
      "displayName": "Contact",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(81,160,158,255)",
          "borderColor": "rgba(81,160,158,255)"
        }
      },
      "value": 4.0
    },
    {
      "name": "Services _2",
      "displayName": "Services _2",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(63,127,166,255)",
          "borderColor": "rgba(63,127,166,255)"
        }
      },
      "value": 5.0
    },
    {
      "name": "08/03/2014",
      "displayName": "08/03/2014",
      "dimName": "Date",
      "measureName": "SUM(ID)",
      "value": 7.0
    },
    {
      "name": "JobBoard",
      "displayName": "JobBoard",
      "dimName": "Step 1",
      "measureName": "SUM(ID)",
      "value": 66.0
    },
    {
      "name": "Solutions",
      "displayName": "Solutions",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(226,117,96,255)",
          "borderColor": "rgba(226,117,96,255)"
        }
      },
      "value": 3.0
    },
    {
      "name": "07/03/2014",
      "displayName": "07/03/2014",
      "dimName": "Date",
      "measureName": "SUM(ID)",
      "value": 21.0
    },
    {
      "name": "Blog Search _1",
      "displayName": "Blog Search _1",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(234,171,97,255)",
          "borderColor": "rgba(234,171,97,255)"
        }
      },
      "value": 27.0
    },
    {
      "name": "Accueil",
      "displayName": "Accueil",
      "dimName": "Step 1",
      "measureName": "SUM(ID)",
      "value": 241.0
    },
    {
      "name": "12/03/2014",
      "displayName": "12/03/2014",
      "dimName": "Date",
      "measureName": "SUM(ID)",
      "value": 154.0
    },
    {
      "name": "Blog",
      "displayName": "Blog",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(163,54,34,255)",
          "borderColor": "rgba(163,54,34,255)"
        }
      },
      "value": 29.0
    },
    {
      "name": "Link",
      "displayName": "Link",
      "dimName": "Link",
      "measureName": "SUM(ID)",
      "value": 435.0
    },
    {
      "name": "News _1",
      "displayName": "News _1",
      "dimName": "Step 2",
      "measureName": "SUM(ID)",
      "itemStyle": {
        "normal": {
          "color": "rgba(82,170,221,255)",
          "borderColor": "rgba(82,170,221,255)"
        }
      },
      "value": 6.0
    },
    {
      "name": "09/03/2014",
      "displayName": "09/03/2014",
      "dimName": "Date",
      "measureName": "SUM(ID)",
      "value": 8.0
    },
    {
      "name": "Company _1",
      "displayName": "Company _1",
      "dimName": "Step 1",
      "measureName": "SUM(ID)",
      "value": 47.0
    }
  ],
  "links": [
    {
      "source": "Accueil",
      "target": "Key Mess _2",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Key Mess _2",
      "value": 12.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Key Mess _2",
      "target": "JobBoard",
      "sourceDisplayName": "Key Mess _2",
      "targetDisplayName": "JobBoard",
      "value": 29.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "10/03/2014",
      "target": "Link",
      "sourceDisplayName": "10/03/2014",
      "targetDisplayName": "Link",
      "value": 69.0,
      "sourceName": "Date",
      "targetName": "Link",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Link",
      "target": "JobBoard",
      "sourceDisplayName": "Link",
      "targetDisplayName": "JobBoard",
      "value": 66.0,
      "sourceName": "Link",
      "targetName": "Step 1",
      "measureName": "SUM(ID)"
    },
    {
      "source": "11/03/2014",
      "target": "Link",
      "sourceDisplayName": "11/03/2014",
      "targetDisplayName": "Link",
      "value": 66.0,
      "sourceName": "Date",
      "targetName": "Link",
      "measureName": "SUM(ID)"
    },
    {
      "source": "09/03/2014",
      "target": "Link",
      "sourceDisplayName": "09/03/2014",
      "targetDisplayName": "Link",
      "value": 8.0,
      "sourceName": "Date",
      "targetName": "Link",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "News _1",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "News _1",
      "value": 6.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "Blog Search _1",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Blog Search _1",
      "value": 27.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Company _1",
      "target": "Blog",
      "sourceDisplayName": "Company _1",
      "targetDisplayName": "Blog",
      "value": 14.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "13/03/2014",
      "target": "Link",
      "sourceDisplayName": "13/03/2014",
      "targetDisplayName": "Link",
      "value": 110.0,
      "sourceName": "Date",
      "targetName": "Link",
      "measureName": "SUM(ID)"
    },
    {
      "source": "07/03/2014",
      "target": "Link",
      "sourceDisplayName": "07/03/2014",
      "targetDisplayName": "Link",
      "value": 21.0,
      "sourceName": "Date",
      "targetName": "Link",
      "measureName": "SUM(ID)"
    },
    {
      "source": "12/03/2014",
      "target": "Link",
      "sourceDisplayName": "12/03/2014",
      "targetDisplayName": "Link",
      "value": 154.0,
      "sourceName": "Date",
      "targetName": "Link",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Link",
      "target": "Accueil",
      "sourceDisplayName": "Link",
      "targetDisplayName": "Accueil",
      "value": 241.0,
      "sourceName": "Link",
      "targetName": "Step 1",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "Services _2",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Services _2",
      "value": 5.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "Contact",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Contact",
      "value": 4.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "JobBoard",
      "target": "Accueil",
      "sourceDisplayName": "JobBoard",
      "targetDisplayName": "Accueil",
      "value": 66.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "Key Mess _1",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Key Mess _1",
      "value": 7.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "08/03/2014",
      "target": "Link",
      "sourceDisplayName": "08/03/2014",
      "targetDisplayName": "Link",
      "value": 7.0,
      "sourceName": "Date",
      "targetName": "Link",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "Company _1",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Company _1",
      "value": 20.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Key Mess _2",
      "target": "Key Mess _1",
      "sourceDisplayName": "Key Mess _2",
      "targetDisplayName": "Key Mess _1",
      "value": 52.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Link",
      "target": "Company _1",
      "sourceDisplayName": "Link",
      "targetDisplayName": "Company _1",
      "value": 47.0,
      "sourceName": "Link",
      "targetName": "Step 1",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "Blog",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Blog",
      "value": 15.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "Field _2",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Field _2",
      "value": 21.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "Fielld _1",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Fielld _1",
      "value": 38.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "Solutions",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Solutions",
      "value": 3.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Company _1",
      "target": "Key Mess _2",
      "sourceDisplayName": "Company _1",
      "targetDisplayName": "Key Mess _2",
      "value": 33.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Link",
      "target": "Key Mess _2",
      "sourceDisplayName": "Link",
      "targetDisplayName": "Key Mess _2",
      "value": 81.0,
      "sourceName": "Link",
      "targetName": "Step 1",
      "measureName": "SUM(ID)"
    },
    {
      "source": "Accueil",
      "target": "Legal",
      "sourceDisplayName": "Accueil",
      "targetDisplayName": "Legal",
      "value": 26.0,
      "sourceName": "Step 1",
      "targetName": "Step 2",
      "measureName": "SUM(ID)"
    }
  ],
  "lineStyle": {
    "normal": {
      "color": "source",
      "curveness": 0.5
    }
  },
  "itemStyle": {
    "normal": {
      "color": "#1f77b4",
      "borderColor": "#1f77b4"
    }
  }
}
]
}

@jarben

This comment has been minimized.

Contributor

jarben commented Aug 30, 2017

I'd say there is a bit of a recursion going on in links, not sure whether this could be prevented by echarts? An error thrown to console saying which link causes this would be awesome:)

@lisachristina1234

This comment has been minimized.

lisachristina1234 commented Sep 1, 2017

Hi @jarben,

Browser become inactive and shows nothing in browser console/log.

@Ovilia

This comment has been minimized.

Contributor

Ovilia commented Sep 1, 2017

@lisachristina1234 Here's how you can test it:

  1. Delete some data each time and check if it works
  2. If you find the data that may cause the difference, check if there's a circle or anything strange with that data
  3. Draw the relationship of the data if you can't find anything else.

You see, there's much you can do to debug it, rather than providing the whole data and hoping for someone to save your time.
Wish you good luck! :)

@lisachristina1234

This comment has been minimized.

lisachristina1234 commented Sep 5, 2017

Hi @Ovilia
Thanks for suggestion.
I have already tried this. I have almost 2500 records among which I have provided json/option for 30 records only for which chart is not generating too. FYI, I have another excel containing around 4000 records but sankey is getting generated properly for that data set.
See this file for which sankey chart is not generating :
SankeyNotGenerated.xlsx
Using above dataset I have formed option by having links in fields like Date --> Link --> Step 1 -->| Step 2 (Note that Date is truncated to Year only).

See following file for which chart is generating even the content of this file is more than SankeyNotGenerated.xlsx :
DMart.xlsx
Using above dataset I have formed option by having links in fields like City --> Country --> Region --> Segment

@Ovilia

This comment has been minimized.

Contributor

Ovilia commented Sep 5, 2017

@lisachristina1234 Hi, sorry I didn't quite understand what's your conclusion or observation here after these attempts?

@pissang pissang added the enhancement label Sep 6, 2017

@lisachristina1234

This comment has been minimized.

lisachristina1234 commented Sep 6, 2017

Hi @Ovilia,
Manually I am able to draw Sankey with 30 records of data, but not able to understand why echarts unable to draw it even if there are no direct cycles exist between nodes.

@deqingli deqingli self-assigned this Mar 7, 2018

@deqingli

This comment has been minimized.

Member

deqingli commented Apr 11, 2018

Hello @lisachristina1234, this problem is caused by the existence of cycles in the original input data. The sankey diagram theoretically only supports Directed Acyclic Graph (DAG), so the former layout algorithm treats input data as the directed acyclic graph as default, when there is a cycle, it fall into an infinite loop. The modified layout algorithm will traverse the node to calculate the layout in topological order. If the cycle is judged, it will report an error and will not be drawn.

@deqingli

This comment has been minimized.

Member

deqingli commented Apr 11, 2018

The revised function will be released with the next version, Welcome to verify, If you have any questions, you can reopen this issue. ~ with the best regard!

@deqingli deqingli closed this Apr 11, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment