How to achieve the below chart in superset 2.0.1 version? #29615
Replies: 1 comment 2 replies
-
To create a flowchart similar to the one depicted in the image using Apache Superset version 2.0.1, you can use the ECharts Graph Chart plugin. The ECharts Graph Chart is a good alternative for visualizing flows and relationships between nodes. Here is an example of how you can use the ECharts Graph Chart in Apache Superset: /**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { QueryFormData } from '@superset-ui/core';
import { GraphNodeItemOption } from 'echarts/types/src/chart/graph/GraphSeries';
import { SeriesTooltipOption } from 'echarts/types/src/util/types';
import {
BaseChartProps,
BaseTransformedProps,
ContextMenuTransformedProps,
LegendFormData,
LegendOrientation,
LegendType,
} from '../types';
import { DEFAULT_LEGEND_FORM_DATA } from '../constants';
export type EdgeSymbol = 'none' | 'circle' | 'arrow';
export type EchartsGraphFormData = QueryFormData &
LegendFormData & {
source: string;
target: string;
sourceCategory?: string;
targetCategory?: string;
colorScheme?: string;
metric?: string;
layout?: 'none' | 'circular' | 'force';
roam: boolean | 'scale' | 'move';
draggable: boolean;
selectedMode?: boolean | 'multiple' | 'single';
showSymbolThreshold: number;
repulsion: number;
gravity: number;
baseNodeSize: number;
baseEdgeWidth: number;
edgeLength: number;
edgeSymbol: string;
friction: number;
};
export type EChartGraphNode = Omit<GraphNodeItemOption, 'value'> & {
value: number;
col: string;
tooltip?: Pick<SeriesTooltipOption, 'formatter'>;
};
// @ts-ignore
export const DEFAULT_FORM_DATA: EchartsGraphFormData = {
...DEFAULT_LEGEND_FORM_DATA,
source: '',
target: '',
layout: 'force',
roam: true,
draggable: false,
selectedMode: 'single',
showSymbolThreshold: 0,
repulsion: 1000,
gravity: 0.3,
edgeSymbol: 'none,arrow',
edgeLength: 400,
baseEdgeWidth: 3,
baseNodeSize: 20,
friction: 0.2,
legendOrientation: LegendOrientation.Top,
legendType: LegendType.Scroll,
};
export type tooltipFormatParams = {
data: { [name: string]: string };
};
export interface EchartsGraphChartProps
extends BaseChartProps<EchartsGraphFormData> {
formData: EchartsGraphFormData;
}
export type GraphChartTransformedProps =
BaseTransformedProps<EchartsGraphFormData> & ContextMenuTransformedProps; This code defines the types and default form data for the ECharts Graph Chart plugin. You can configure the To use this in Apache Superset, you would need to ensure that your data is formatted correctly for a Graph Chart and then configure the chart options accordingly in the Superset UI [1][2][3][4]. |
Beta Was this translation helpful? Give feedback.
-
Hi,
Can anyone please let me know how to achieve the below chart. I am using 2.0.1 version. I thought of force directed graph but that chart plugin was removed in 2.0.0 version. Please let me know the alternate chart to implement the same.
Thanks in Advance.
Beta Was this translation helpful? Give feedback.
All reactions