Highchart Demo

100%

Highchart Demo

✓ Published0🌍 Public

Last edited Apr 25, 2017

Created on Apr 25, 2017

This example shows the USD to EUR exchange rate over time as an area chart, with interactive zooming via click-and-drag or pinch gestures. It loads time-series data from a remote JSON file using jQuery’s `$.getJSON`, then renders the chart with Highcharts. The x-axis is datetime-based, and the area series uses a linear gradient fill that fades to transparency, with a subtle marker radius and hover state. The chart also enables the Highcharts exporting module for download or print options.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 89566fbfb20d81fd7fe9

This interactive line chart tracks the exchange rates of various global currencies against the euro, with a dropdown menu to switch between different currency selections. The visualization displays a time series of daily rates, augmented by a red exponential moving average line that reveals underlying trends, while a crosshair with a trackball follows the mouse to show precise values for any date and rate pair. The chart is rendered as an SVG using the D3.js library, with grid lines, axis labels, and a legend. The code also incorporates the d3fc framework for chart components and a custom area chart beneath the line to emphasize the rate’s magnitude over time.

BBenHeubl

75% match

Loading thumbnail…

exchange rates

A slider shows the daily USD-to-EUR exchange rate over time, with a draggable horizontal line that can be moved to inspect specific values. The visualization plots the data as a line chart, using a cubehelix color scale for a continuous gradient background. It is built with D3.js, including the custom brush, scale, and time-series slider APIs, and renders as SVG. The data comes from the eurofxref-hist.csv file, filtered to show dates from February 2015 onward.

SSpaceActuary

74% match

Loading thumbnail…

Gist 120adfd502e0b84875b5900b80ba9d6c

A line chart tracks the USD-to-EUR exchange rate from June to September 2013, plotting daily closing values as a continuous series. The data, stored in a JSON array of [date, value] pairs, is rendered with D3's time scale on the x-axis and a linear scale on the y-axis, likely using an SVG path or line generator. The visualization shows a slight downward trend over the period, with values fluctuating between roughly 0.745 and 0.782, highlighting short-term volatility around a generally declining exchange rate.

VVioletVivirand

73% match

Loading thumbnail…

Line chart from CSV using d3.js

This example visualizes the USD to RUB exchange rate over three selectable years (2018, 2019, 2020) as an animated line chart with a filled area. It uses d3.js v6 within a React-compatible structure, rendering to SVG. Data is loaded from CSV files using `d3.csv`, with the x-axis mapped via `d3.scaleTime` and the y-axis via `d3.scaleLinear`. The line and area paths are built with `d3.line` and `d3.area` using cardinal curves, while transitions (using `transition()`) animate the axis rescaling and stroke-dasharray drawing effect. A mouse hover reveals a crosshair and highlights the nearest data point via `d3.bisector`. The source is the Moscow Exchange, linked via an embedded anchor.

AAleOG

68% match

Loading thumbnail…

title

This visualization, built with D3.js and rendered as an SVG, shows a time-series area chart of bid data across multiple financial exchanges. The chart displays overlapping filled regions, with the x-axis representing time and the y-axis representing price or value, while a light gray rect at the top-right suggests a hover or selection area. The data, sourced from a gist by FergusDevelopmentLLC, is drawn using smooth path curves for each exchange, creating a dense, layered comparison of exchange activity over time.

WWill Carter

68% match

Loading thumbnail…

Gist e13df2ee55aa6c1117d5d6b6371e9b69

This example uses Yahoo Finance’s quote API to visualize live foreign-exchange data for the GBP/USD pair through D3.js. The JSON response is processed to display key metrics such as the current price, day’s high and low, and 52-week range, using D3’s scales and SVG paths to render a candlestick-style chart. Only the most recent quote is shown, with no time-series animation or historical data. The rendering logic draws on D3’s `forceSimulation` for layout and `geoPath` for styling, though the visual itself is a simple static chart of the currency pair’s market range.

RRobinL

67% match

Loading thumbnail…

Activity 9 q2

This area chart displays the exchange rate of USD over time, using a green filled area to emphasize the trend. The visualization is rendered as an SVG and built with D3 v7, which handles data parsing, time-based scaling on the x-axis, and linear scaling on the y-axis. The chart also includes labeled axes for "Year" and "USD", with the area path generated by `d3.area()`. The data is loaded from a remote CSV file, and the chart is styled with a green fill and black stroke.

Cchinnivikramnunna@gmail.com

67% match

Loading thumbnail…

Canvas area charts zoom on click using d3.interpolateString

This example displays two time-series area charts—solar photovoltaic and building load power—rendered on an HTML5 Canvas using d3.area with a step curve, while SVG axes and a zoom button sit atop. Clicking the button toggles zoom between the full domain and a defined date range using d3.zoom and interpolated scale transitions via interpolateString. The hybrid approach combines Canvas for efficient drawing and SVG for interactive elements, with data loaded from a CSV file and scales updated to animate the view.

FFrissAnalytics

66% match