question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Define multiple series from dataset

See original GitHub issue

What problem does this feature solve?

I am not sure if this is possible at the moment, but I haven’t been able to find it in documentation and these Stack Overflow questions lead me to believe it’s not solved: https://stackoverflow.com/questions/69215766/echarts-separate-series-based-on-dataset-field https://stackoverflow.com/questions/65847643/how-to-display-multiple-lines-in-echarts-using-encode

This feature would allow you to pass in a single dataset and create multiple series from that dataset without having to transform, filter, or loop through the dataset. This is important for data stored in ‘tidy’ format, where one column contains the group that should be used to create the multiple series. This is a common data format for people using a data warehouse.

There are two workarounds I’ve found so far, but neither is ideal:

  1. Use VisualMap piecewise categories, but this is not ideal because the legend is different than the normal series legend, and setting this up is confusing
  2. Loop through the dataset and filter for each distinct item in the column containing the group names, then create a series for each

It seems like this might be the solution to this problem? https://github.com/apache/echarts/pull/15747

I’ve added some sample code below showing an additional option in encode, but it probably shouldn’t belong in series since that represents a single series.

What does the proposed API look like?

option = {
dataset: {
    source: 
    [
    {group: "A", product: 'Matcha Latte', count: 823, score: 95.8},
    {group: "A", product: 'Milk Tea', count: 235, score: 81.4},
    {group: "A", product: 'Cheese Cocoa', count: 1042, score: 91.2},
    {group: "A", product: 'Walnut Brownie', count: 988, score: 76.9},
    {group: "B", product: 'Matcha Latte', count: 23, score: 95.8},
    {group: "B", product: 'Milk Tea', count: 25, score: 81.4},
    {group: "B", product: 'Cheese Cocoa', count: 142, score: 91.2},
    {group: "B", product: 'Walnut Brownie', count: 98, score: 76.9}
    ]
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'value'
  },
  series: [
      {
           type: 'bar', 
           encode: 
                  {
                      x: 'product', 
                      y: 'count',
                      series: 'group'
                  }
      }
    ]
};

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Oviliacommented, Oct 29, 2021

I don’t think this is possible without defining multiple series. You may use dataset filter to create multiple dataset instance for different series to use.

0reactions
hughesscommented, Nov 2, 2021

Thanks - I’ll write some logic to define each series individually

Read more comments on GitHub >

github_iconTop Results From Across the Web

Multiple series charts - IBM
Lists dataset variables that are available for the chart's y-axes. Select the chart type (bar, line, or scatter) from the drop-down list. Click...
Read more >
c# - Multiple Series from DataSet - Stack Overflow
I basically just want to know how to seperate them so the second series gets the data from the second table of the...
Read more >
How to Create a Graph with Multiple Lines in Excel
Let's look at the ways that Excel can display multiple series of data to create clear, easy to understand charts without resorting to...
Read more >
Multiple Series in One Excel Chart - Peltier Tech
The first column (if series are plotted by column) is used for X values, the rest of the columns become the Y values,...
Read more >
Overview – Showing Multi Series Data in Chart - CanvasJS.com
Using “type” property of dataSeries, you can define how it should be rendered – column, line, area, bar, bubble, point, stackedArea, stackedColumn, etc....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found