Thanks to visit codestin.com
Credit goes to chartplay.jui.io
Themes
Jennifer
Dark
Pastel
Gradient
Pattern
Custom
Leave a comment
Basic
Set brush events
Set brush events (with HTML)
Set brush colors (Array)
Set brush colors (Callback)
Set theme styles
Set chart padding
Update axis data
Update axis grid
Set chart brushes
Using SVG icons
Using dashboard-style
3D Chart
Basic 3D Bar
Stacked 3D Bar
Full Stacked 3D Bar
Clustered 3D Bar
Basic 3D Column
Stacked 3D Column
Full Stacked 3D Column
Clustered 3D Column
Basic 3D Cylinder
Stacked 3D Cylinder
Full Stacked 3D Cylinder
Clustered 3D Cylinder
3D Bubble
Area Chart
Basic Area
Stacked Area
Split Area
Split Area (Advanced)
Reverse Area
Range Area
Bar Chart
Basic Bar
Fixed-Size Bar
Active Stacked Bar
Full Stacked Bar
Inner Bar
Overlap Bar
Active Bar (+Focus)
Range Bar
Fixed Image Bar
Pattern Bar
Bubble Chart
Basic Bubble
Active Bubble
Range Bubble
Candle Stick Chart
Candle Stick
Candle Stick with scroll
Candle Stick with zoom
OHLC
Column Chart
Basic Column
Fixed-Size Column
Active Stacked Column
Full Stacked Column
Inner Column
Overlap Column
Active Column (+Focus)
Range Column
Waterfall
Image Column
Fixed Image Column
Pattern Column
Combination Chart
Multi Axis
Compare Data
Mixed daily and intra-day
Sales Comparison
Dashboard
Stock Dashboard
Candle Stick Dashboard
Candle Stick Dashboard (+Scroll)
Beautiful Dashboard
Company Performance
Sales Overview
Charts in the World Map
Equalizer Chart
Equalizer Bar
Equalizer Column
Arc Equalizer
Full 3D Chart
Full 3D Scatter
Full 3D Column
Full 3D Line
Real 3D model drawing
Gauge Chart
Circle Gauge
Full Gauge
Full Gauge (Round)
Arc Gauge
Bar Gauge
Grid Basic
Set domain
Set domain as data
Set domain as callback
Set domain format
Set axis colors
Use axis text with image
Grid Style
Solid + Tick style
Solid + Gradient
Solid + Rect
Dashed Line
Dashed + Gradient
Dashed + Rect
Rotated Text + Tick style
Grid Type
Date Block + Range
Date + Range
Block + Log
Line Chart
Basic Line
Active Line
Range Line
Stacked Line
Multi Line
Split Line
Split Line (Advanced)
Continuous Line
Map Chart
Population Status
Population growth rate
Population growth rate (Mini Map)
Airplane Routes
Use External Markup
Market growth comparison
Today's Weather
More Chart
Sales Pyramid
Sales Pyramid (Reverse)
HUD Bar
HUD Column
Requests done to load page
Weekly attendance (%)
Fruit consumption (Tree Map)
Pie & Donut Chart
Basic Pie
Active Pie
Basic Donut
Active Donut
Radar Chart
Basic Radar
Circle Radar
Realtime Chart
TPS & Memory Monitor
Transaction View
3D Transaction View
Transaction View (Canvas)
3D Transaction View (Canvas)
Heat-Map Transaction View
Scatter Chart
Basic Scatter
Scatter with cross
Scatter with zoom
Scatter with drag-select
Stacked Scatter
Active Scatter
High-performance Scatter
Image symbol in Scatter
Topology Map
Server Topologies
Server Topologies with image
Server Topologies (Advanced)
Code
Data
Style
Clear
Clear All
var chart = jui.include("chart.builder"); var data = [ { quarter : "1Q", sales : 50, profit : 35 }, { quarter : "2Q", sales : -20, profit : -30 }, { quarter : "3Q", sales : 10, profit : -5 }, { quarter : "4Q", sales : 30, profit : 25 } ]; var showEventMessage = function(obj) { alert("[" + obj.dataIndex + "] " + obj.dataKey + "=" + obj.data[obj.dataKey]); } var c = chart("#result", { axis : [{ x : { type : "block", domain : "quarter", line : true }, y : { type : "range", domain : [ -40, 40 ], step : 10, line : true }, data : data }], brush : [{ type : "column", target : [ "sales", "profit" ] }], event : { click : function(obj, e) { showEventMessage(obj); } } }); // Events defined by the method c.on("rclick", function(obj, e) { showEventMessage(obj); });
Key
Value
Result
API
Edit Colors
Color
Leave a comment
Please enable JavaScript to view the
comments powered by Disqus.
comments powered by
Disqus
