Skip to main content
SimilarExport ZIP
100%

My first chart using FusionCharts Suite XT

✓ Published0🌍 Public
BBhavyatulasi
Last edited Jul 17, 2020
Created on Jul 17, 2020

A horizontal linear gauge displays server CPU utilization for food.hsm.com at 80 percent, with a color-coded range from low (0–35) to moderate (35–70) and high (70–100). Dashed trend lines mark thresholds at 70 and 85 percent, while a semi-transparent trend zone highlights the region between them. The chart is rendered using FusionCharts Suite XT, configured via the `FusionCharts` constructor with a JSON data source and the “fusion” theme. A blue annotation rectangle with white text appears at the bottom, indicating completed QNLIs.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A horizontal linear gauge displays server CPU utilization, with a color-coded range from low to high and a pointer indicating the current value at 75%. The visualization uses the AnyChart library via its core, base, and linear-gauge modules to render the gauge, while FusionCharts handles the chart configuration and rendering. The data source is embedded inline as JSON, defining the gauge’s limits, color ranges, pointer, trend points, and annotations, which include a recommended utilization range highlighted as a shaded zone.

BBhavyatulasi
83% match
Loading thumbnail…

Untitled

This radial bar chart displays the distribution of sea surface temperatures across different climate classes, with each colored band extending outward from a central donut. The chart uses D3.js v6 with SVG rendering and React, loading CSV data from a GitHub gist. The code employs d3.scaleBand for angular positioning and d3.scaleRadial for radius values, while d3.arc constructs the annular bars with padded gaps. Labels are rotated and positioned around the perimeter, with text anchors adjusted to maintain readability. The inner radius is fixed at 90, and the outer radius scales up to the maximum data value of 39,999.

Yyungchiau
65% match
Loading thumbnail…

Fifth D3 demo

A line chart displays CPU utilization percentages per minute for a single server, plotted over time. The y-axis lists timestamps, while the x-axis shows CPU load on a fixed 0–100% scale. The visualization uses D3.js version 6, specifically the `select`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, `line`, and `curveBasis` APIs, to render the SVG path. Data is loaded from a CSV file with `d3.csv`, and the code comments indicate an earlier bar-chart version was replaced by this line representation.

Bbalaszol
64% match
Loading thumbnail…

Gist 7251163

This donut chart visualizes the distribution of CPU usage ranges, such as “< 50%” and “70-80%,” with each segment’s arc length proportional to the count in the accompanying CSV data. Built with d3.v3, the SVG graphic uses `d3.layout.pie` to compute the pie slices, `d3.svg.arc` to define the ring geometry, and `d3.scale.ordinal` to assign categorical colors. Labels are placed at each arc’s centroid, and the data is loaded asynchronously via `d3.csv`.

JJaapSuter
64% match
Loading thumbnail…

Fork of Fork of Chart redesign

This chart visualizes daily humidity data as a smooth, curved line over time, with seasonal background bands and mean lines for each season. It uses D3.js v5 within a React framework, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` with a basis curve for rendering. The data is loaded from a GitHub-hosted JSON file, downsampled before plotting. The SVG output includes a linear gradient defs, season-specific rectangles, and small circular dots for each data point, with a custom CSS-styled y-axis.

NNikithakatta30
64% match
Loading thumbnail…

Failed 4th attempt to multiline with hover

This example shows CPU utilization over time for multiple servers, with each server represented as a separate line. The visualization aggregates data from a CSV file containing per-minute CPU readings for eight server instances. Built with D3 v6, the code uses `scaleUtc` and `scaleLinear` to map the temporal and numerical dimensions, while `axisBottom` and `axisLeft` produce the axes. The multi-line chart is rendered as SVG paths, styled with a stroke and `mix-blend-mode`, though the attempted hover interaction is not implemented in the provided code.

Bbalaszol
63% match
Loading thumbnail…

Untitled

A bar chart displays the percentage of survey respondents ranking emerging technologies as most important, with values from 38% for Big Data Analytics down to 1% for 3D Printing. Built with D3 v5 in a React application, the SVG uses `scaleBand` and `scaleLinear` to position bars, a `scaleOrdinal` color range for hue variety, and text labels above each bar showing the percentage. Data loads from a CSV file, and bar heights derive from the `max` domain.

Hhireign
63% match
Loading thumbnail…

Food

This example shows a horizontal bar chart of nutritional data for the top ten foods, using a bar’s length to encode each item’s 2019 nutrient value. The chart renders as an SVG using React, with the `d3.csv` loader fetching data from a GitHub Gist. Scales from `d3.scaleBand` and `d3.scaleLinear` position the bars and axes, while D3’s `axisBottom` and `axisLeft` are manually replaced by custom tick rendering. The visualization highlights the relative nutrient amounts across food categories.

KKeerthipriyaBankuru
63% match