100%

dex.js : ECharts Line Chart

✓ Published0🌍 Public

Last edited Aug 13, 2017

Created on Aug 13, 2017

This interactive 3D visualization renders a line chart using the ECharts-GL library, displaying synthetic sales and revenue data generated with the Faker library. The chart plots five employees' monthly performance across x, y, and z axes within a browser via dex.js, which integrates the ECharts-GL engine and jQuery UI for configuration. Users can filter data and adjust appearance options, including chart type, colormap, and axis styling, through a configuration pane built with dex.js components.

AI-generated description

ECharts Bar Chart/Line Chart/Scatter Plot 3D

This is a dex.js visual based upon the impressive ECharts-GL project which provides a configurable and filterable 3D bar chart, scatter plot and line chart.

The chart expects data of the form:

x:any, y:any, z:numeric [,z2:numeric, ...]

and will visualize the data across the x,y,z axis in the form of a bar chart, line chart or scatter plot depending on configuration options.

The configuration menu offers the following main sections:

Configuration
- Data Filters - Allows the user to control the data which will be visualized as well as their order.
- GUI Configuration - Controls the appearance of the visualization.
  - General Options - Controls general appearance such as colormap, chart type, shading, etc...
    - Add a title
    - Grid - adds a grid
    - Tooltip - Controls tooltips
  - Item Style - Controls the appearance of items such as bars or scatter points.
  - Label Style - Controls label appearance
  - Axis - Controls axis appearance.

References

dex.js - Website

mit Licensed

Similar vizzes

Loading thumbnail…

dex.js : ECharts Line Chart

This example demonstrates a 3D bar chart with dex.js and ECharts, visualizing randomly generated sales and revenue data across twelve months for five fictional employees. The data is created using Faker, and the chart is embedded in an HTML page with a layout system. The code uses dex.js’s ECharts BarChart3D component, along with jQuery UI for layout management and a configuration pane that allows interactive chart customization.

Yyudhi115

92% match

Loading thumbnail…

Line Chart

This line chart visualizes three randomly generated data series over thirty samples, rendered with the dex.js charting library. The chart uses the C3 library’s line chart implementation, which is configured through a dex.charts.c3.LineChart instance. Data is generated on the fly via dex.datagen.randomIndexedMatrix, producing numeric values between 1 and 100 for columns A, B, and C. The visualization is embedded in a full-page HTML layout, with styling from Twitter Bootstrap and jQuery UI, and dependencies like Faker and Underscore loaded from CDNs.

663anp3ca

80% match

Loading thumbnail…

Line Chart

This example demonstrates a line chart generated using the dex.js library, which leverages the C3 charting library for rendering. The visualization plots four data series (A, B, C, and SAMPLE) across 30 data points, with values randomly generated between 1 and 100 using the `dex.datagen.randomIndexedMatrix` API. The chart is initialized via the `dex.charts.c3.LineChart` constructor, which accepts a `parent` element and a `csv` data object. The data is generated algorithmically, producing a randomized dataset for demonstration purposes.

PPatMartin

77% match

Loading thumbnail…

Line Chart

This example demonstrates a line chart visualization that displays multiple data series over a series of samples. The chart is rendered using the dex.js library, which leverages the C3 charting framework and D3 for its underlying SVG rendering. The visualization plots three distinct lines—labeled A, B, and C—with each data point generated randomly by the `dex.datagen.randomIndexedMatrix` utility. The entire chart fills the browser window, with styling applied through Bootstrap and jQuery UI components. The code instantiates the chart via `dex.charts.c3.LineChart`, configuring it with a CSV dataset and specifying the parent container element.

663anp3ca

76% match

Loading thumbnail…

dex.js : Clustered Force

A clustered force-directed layout shows 2015 baseball salaries by team and position from a CSV file. Using the dex.js library, this visualization places each player as a node, grouping them by team while position serves as a secondary clustering attribute. The chart is interactive, with a legend that highlights nodes on mouseover, and users can adjust the visualization through a configuration pane built with dex.ui.ConfigurationPane. This example effectively combines data filters with GUI controls for exploring the salary dataset.

PPatMartin

74% match

Loading thumbnail…

Elegans 3D ScatterPlot

This interactive 3D scatterplot visualizes four series of randomly generated data points across X, Y, and Z coordinates, each series distinguished by a unique shape and color and toggled via the legend. The WebGL rendering relies on Three.js, while the chart configuration uses the dex.js library, specifically the `dex.charts.elegans.ScatterPlot` component with custom series definitions for shape and coordinate mapping. The plot supports mouse-wheel zoom, pan, and rotation with dampened inertia, but lacks tooltips and drop lines.

PPatMartin

73% match

Loading thumbnail…

NVD3 Stacked Area Chart

This NVD3 Stacked Area Chart, built through the dex.js framework, visualizes 12 months of fake sales data for ten people, using 1,728 tuples of name, date, and sales values. It offers three interactive views—traditional stacked areas, a streamgraph, and an expanded percentage view—with smooth transitions preserving object constancy. Users can toggle series via the interactive legend, and the styled, semi-transparent labels keep underlying data visible. The chart leverages the NVD3 library, D3 version 3, and Faker for generating the dataset.

PPatMartin

72% match

Loading thumbnail…

Stacked Bar Chart

This example shows a stacked bar chart created with dex.js and the C3 charting library, displaying 30 rows of randomized numeric data across five series (A through E). The chart renders inside an HTML page using the `dex.charts.c3.StackedBarChart` API, which binds to a `dex.csv` dataset generated by `dex.datagen.randomIndexedMatrix`. The visualization uses C3’s rendering engine, with styling and layout handled by Bootstrap, jQuery UI, and custom dex CSS, all loaded from CDNs.

PPatMartin

71% match