README.md 11.0 KB
Newer Older
Evan Pezent's avatar
Evan Pezent 已提交
1
# ImPlot
epezent's avatar
epezent 已提交
2
ImPlot is an immediate mode, GPU accelerated plotting library for [Dear ImGui](https://github.com/ocornut/imgui). It aims to provide a first-class API that ImGui fans will love. ImPlot is well suited for visualizing program data in real-time or creating interactive plots, and requires minimal code to integrate. Just like ImGui, it does not burden the end user with GUI state management, avoids STL containers and C++ headers, and has no external dependencies except for ImGui itself.
Evan Pezent's avatar
Evan Pezent 已提交
3

Evan Pezent's avatar
Evan Pezent 已提交
4
<img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/controls.gif" width="270"> <img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/dnd.gif" width="270"> <img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/pie.gif" width="270">
Evan Pezent's avatar
Evan Pezent 已提交
5

epezent's avatar
epezent 已提交
6
7
<img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/query.gif" width="270"> <img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/bars.gif" width="270">
<img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/rt.gif" width="270">
Evan Pezent's avatar
Evan Pezent 已提交
8

epezent's avatar
epezent 已提交
9
<img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/stem.gif" width="270"> <img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/markers.gif" width="270">
Evan Pezent's avatar
Evan Pezent 已提交
10
<img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/shaded.gif" width="270">
Evan Pezent's avatar
Evan Pezent 已提交
11

Evan Pezent's avatar
Evan Pezent 已提交
12
<img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/candle.gif" width="270"> <img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/heat.gif" width="270">
epezent's avatar
epezent 已提交
13
<img src="https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/tables.gif" width="270">
Evan Pezent's avatar
Evan Pezent 已提交
14

Evan Pezent's avatar
Evan Pezent 已提交
15
## Features
Evan Pezent's avatar
Evan Pezent 已提交
16

Evan Pezent's avatar
Evan Pezent 已提交
17
- GPU accelerated rendering
18
- multiple plot types:
Evan Pezent's avatar
Evan Pezent 已提交
19
    - line plots
Evan Pezent's avatar
Evan Pezent 已提交
20
    - shaded plots
Evan Pezent's avatar
Evan Pezent 已提交
21
    - scatter plots
Evan Pezent's avatar
Evan Pezent 已提交
22
    - vertical/horizontal/stacked bars graphs
Evan Pezent's avatar
Evan Pezent 已提交
23
    - vertical/horizontal error bars
Evan Pezent's avatar
Evan Pezent 已提交
24
    - stem plots
Evan Pezent's avatar
Evan Pezent 已提交
25
    - stair plots
Evan Pezent's avatar
Evan Pezent 已提交
26
    - pie charts
Evan Pezent's avatar
Evan Pezent 已提交
27
    - heatmap charts
Evan Pezent's avatar
Evan Pezent 已提交
28
    - 1D/2D histograms
Evan Pezent's avatar
Evan Pezent 已提交
29
    - images
Evan Pezent's avatar
Evan Pezent 已提交
30
    - and more likely to come
Evan Pezent's avatar
Evan Pezent 已提交
31
- mix/match multiple plot items on a single plot
Evan Pezent's avatar
Evan Pezent 已提交
32
- configurable axes ranges and scaling (linear/log)
Evan Pezent's avatar
Evan Pezent 已提交
33
- subplots
epezent's avatar
epezent 已提交
34
- time formatted x-axes (US formatted or ISO 8601)
Evan Pezent's avatar
Evan Pezent 已提交
35
- reversible and lockable axes
Evan Pezent's avatar
Evan Pezent 已提交
36
- multiple x-axes and y-axes
Evan Pezent's avatar
Evan Pezent 已提交
37
- controls for zooming, panning, box selection, and auto-fitting data
Evan Pezent's avatar
Evan Pezent 已提交
38
- controls for creating persistent query ranges (see demo)
Evan Pezent's avatar
Evan Pezent 已提交
39
- several plot styling options: 10 marker types, adjustable marker sizes, line weights, outline colors, fill colors, etc.
Evan Pezent's avatar
Evan Pezent 已提交
40
- 16 built-in colormaps and support for and user-added colormaps
Evan Pezent's avatar
Evan Pezent 已提交
41
- optional plot titles, axis labels, and grid labels
epezent's avatar
epezent 已提交
42
- optional and configurable legends with toggle buttons to quickly show/hide plot items
Evan Pezent's avatar
Evan Pezent 已提交
43
- default styling based on current ImGui theme, or completely custom plot styles
44
- customizable data getters and data striding (just like ImGui:PlotLine)
Evan Pezent's avatar
Evan Pezent 已提交
45
- accepts data as float, double, and 8, 16, 32, and 64-bit signed/unsigned integral types
Evan Pezent's avatar
Evan Pezent 已提交
46
- and more! (see Announcements [2020](https://github.com/epezent/implot/issues/48)/[2021](https://github.com/epezent/implot/issues/168))
Evan Pezent's avatar
Evan Pezent 已提交
47

Evan Pezent's avatar
Evan Pezent 已提交
48
49
## Usage

epezent's avatar
epezent 已提交
50
The API is used just like any other ImGui `BeginX`/`EndX` pair. First, start a new plot with `ImPlot::BeginPlot()`. Next, plot as many items as you want with the provided `PlotX` functions (e.g. `PlotLine()`, `PlotBars()`, `PlotScatter()`, etc). Finally, wrap things up with a call to `ImPlot::EndPlot()`. That's it!
Evan Pezent's avatar
Evan Pezent 已提交
51

Evan Pezent's avatar
Evan Pezent 已提交
52
```cpp
Evan Pezent's avatar
Evan Pezent 已提交
53
54
55
int   bar_data[11] = ...;
float x_data[1000] = ...;
float y_data[1000] = ...;
Evan Pezent's avatar
Evan Pezent 已提交
56
57

ImGui::Begin("My Window");
58
if (ImPlot::BeginPlot("My Plot")) {
Evan Pezent's avatar
Evan Pezent 已提交
59
    ImPlot::PlotBars("My Bar Plot", bar_data, 11);
Evan Pezent's avatar
Evan Pezent 已提交
60
    ImPlot::PlotLine("My Line Plot", x_data, y_data, 1000);
Evan Pezent's avatar
Evan Pezent 已提交
61
    ...
62
    ImPlot::EndPlot();
Evan Pezent's avatar
Evan Pezent 已提交
63
}
Evan Pezent's avatar
Evan Pezent 已提交
64
ImGui::End();
Evan Pezent's avatar
Evan Pezent 已提交
65
66
```

Evan Pezent's avatar
Evan Pezent 已提交
67
68
69
![Usage](https://raw.githubusercontent.com/wiki/epezent/implot/screenshots3/example.PNG)


Evan Pezent's avatar
Evan Pezent 已提交
70
Of course, there's much more you can do with ImPlot... 
Evan Pezent's avatar
Evan Pezent 已提交
71

Evan Pezent's avatar
Evan Pezent 已提交
72
73
74
## Demos

A comprehensive example of ImPlot's features can be found in `implot_demo.h`. Add this file to your sources and call `ImPlot::ShowDemoWindow()` somewhere in your update loop. You are encouraged to use this file as a reference when needing to implement various plot types. The demo is always updated to show new plot types and features as they are added, so check back with each release!
Evan Pezent's avatar
Evan Pezent 已提交
75
76
77

An online version of the demo is hosted [here](https://traineq.org/implot_demo/src/implot_demo.html). You can view the plots and the source code that generated them. Note that this demo may not always be up to date and is not as performant as a desktop implementation, but it should give you a general taste of what's possible with ImPlot. Special thanks to [pthom](https://github.com/pthom) for creating and hosting this!

Evan Pezent's avatar
Evan Pezent 已提交
78
79
More sophisticated demos requiring lengthier code and/or third-party libraries can be found in a separate repository: [implot_demos](https://github.com/epezent/implot_demos). Here, you will find advanced signal processing and ImPlot usage in action. Please read the `Contributing` section of that repository if you have an idea for a new demo!

Evan Pezent's avatar
Evan Pezent 已提交
80
81
## Integration

epezent's avatar
epezent 已提交
82
83
0) Set up an [ImGui](https://github.com/ocornut/imgui) environment if you don't already have one.
1) Add `implot.h`, `implot_internal.h`, `implot.cpp`, `implot_items.cpp` and optionally `implot_demo.cpp` to your sources. Alternatively, you can get ImPlot using [vcpkg](https://github.com/microsoft/vcpkg/tree/master/ports/implot).
Evan Pezent's avatar
Evan Pezent 已提交
84
2) Create and destroy an `ImPlotContext` wherever you do so for your `ImGuiContext`:
85
86
87
88
89
90
91
92
93

```cpp
ImGui::CreateContext();
ImPlot::CreateContext();
...
ImPlot::DestroyContext();
ImGui::DestroyContext();
```

epezent's avatar
epezent 已提交
94
You should be good to go!
Evan Pezent's avatar
Evan Pezent 已提交
95
96

If you want to test ImPlot quickly, consider trying [mahi-gui](https://github.com/mahilab/mahi-gui), which bundles ImGui, ImPlot, and several other packages for you.
Evan Pezent's avatar
Evan Pezent 已提交
97

Evan Pezent's avatar
Evan Pezent 已提交
98
## Extremely Important Note
Evan Pezent's avatar
Evan Pezent 已提交
99

100
Dear ImGui uses **16-bit indexing by default**, so high-density ImPlot widgets like `ImPlot::PlotHeatmap()` may produce too many vertices into `ImDrawList`, which causes an assertion failure and will result in data truncation and/or visual glitches. Therefore, it is **HIGHLY** recommended that you EITHER:
Evan Pezent's avatar
Evan Pezent 已提交
101
102

- **Option 1:** Enable 32-bit indices by uncommenting `#define ImDrawIdx unsigned int` in your ImGui [`imconfig.h`](https://github.com/ocornut/imgui/blob/master/imconfig.h#L89) file.
103
- **Option 2:** Handle the `ImGuiBackendFlags_RendererHasVtxOffset` flag in your renderer if you must use 16-bit indices. Many of the default ImGui rendering backends already support `ImGuiBackendFlags_RendererHasVtxOffset`. Refer to [this issue](https://github.com/ocornut/imgui/issues/2591) for more information.
Evan Pezent's avatar
Evan Pezent 已提交
104

Evan Pezent's avatar
Evan Pezent 已提交
105
106
107
108
## FAQ

**Q: Why?**

Evan Pezent's avatar
Evan Pezent 已提交
109
A: ImGui is an incredibly powerful tool for rapid prototyping and development, but provides only limited mechanisms for data visualization. Two dimensional plots are ubiquitous and useful to almost any application. Being able to visualize your data in real-time will give you insight and better understanding of your application.
Evan Pezent's avatar
Evan Pezent 已提交
110

Evan Pezent's avatar
Evan Pezent 已提交
111
112
**Q: Is ImPlot the right plotting library for me?**

Evan Pezent's avatar
Evan Pezent 已提交
113
A: If you're looking to generate publication quality plots and/or export plots to a file, ImPlot is NOT the library for you! ImPlot is geared toward plotting application data at realtime speeds with high levels of interactivity. ImPlot does its best to create pretty plots (indeed, there are quite a few styling options available), but it will always favor function over form.
Evan Pezent's avatar
Evan Pezent 已提交
114

epezent's avatar
epezent 已提交
115
116
**Q: Where is the documentation?**

Evan Pezent's avatar
Evan Pezent 已提交
117
A: The API is thoroughly commented in `implot.h`, and the demo in `implot_demo.cpp` should be more than enough to get you started. Also take a look at the [implot_demos](https://github.com/epezent/implot_demos) repository.
epezent's avatar
epezent 已提交
118

Evan Pezent's avatar
Evan Pezent 已提交
119
**Q: Is ImPlot suitable for plotting large datasets?**
Evan Pezent's avatar
Evan Pezent 已提交
120

Evan Pezent's avatar
Evan Pezent 已提交
121
A: Yes, within reason. You can plot tens to hundreds of thousands of points without issue, but don't expect millions to be a buttery smooth experience. That said, you can always downsample extremely large datasets by telling ImPlot to stride your data at larger intervals if needed. Also try the experimental `backends` branch which aims to provide GPU acceleration support.
Evan Pezent's avatar
Evan Pezent 已提交
122

Evan Pezent's avatar
Evan Pezent 已提交
123
124
125
**Q: What data types can I plot?**

A: ImPlot plotting functions accept most scalar types:
Evan Pezent's avatar
Evan Pezent 已提交
126
`float`, `double`, `int8`, `uint8`, `int16`, `uint16`, `int32`, `uint32`, `int64`, `uint64`. Arrays of custom structs or classes (e.g. `Vector2f` or similar) are easily passed to ImPlot functions using the built in striding features (see `implot.h` for documentation), and many plotters provide a "getter" overload which accepts data generating callbacks.
Evan Pezent's avatar
Evan Pezent 已提交
127

Evan Pezent's avatar
Evan Pezent 已提交
128
129
**Q: Can plot styles be modified?**

epezent's avatar
epezent 已提交
130
A: Yes. Data colormaps and various styling colors and variables can be pushed/popped or modified permanently on startup. Three default styles are available, as well as an automatic style that attempts to match you ImGui style.
Evan Pezent's avatar
Evan Pezent 已提交
131

Evan Pezent's avatar
Evan Pezent 已提交
132
**Q: Does ImPlot support logarithmic scaling or time formatting?**
Evan Pezent's avatar
Evan Pezent 已提交
133

Evan Pezent's avatar
Evan Pezent 已提交
134
A: Yep! Both logscale and timescale are supported.
Evan Pezent's avatar
Evan Pezent 已提交
135

Evan Pezent's avatar
Evan Pezent 已提交
136
137
**Q: Does ImPlot support multiple y-axes? x-axes?**

Evan Pezent's avatar
Evan Pezent 已提交
138
A: Yes. Up to three x-axes and three y-axes can be enabled.
Evan Pezent's avatar
Evan Pezent 已提交
139

Evan Pezent's avatar
Evan Pezent 已提交
140
**Q: Does ImPlot support [insert plot type]?**
Evan Pezent's avatar
Evan Pezent 已提交
141

Evan Pezent's avatar
Evan Pezent 已提交
142
A: Maybe. Check the demo, gallery, or Announcements ([2020](https://github.com/epezent/implot/issues/48)/[2021](https://github.com/epezent/implot/issues/168))to see if your desired plot type is shown. If not, consider submitting an issue or better yet, a PR!
Evan Pezent's avatar
Evan Pezent 已提交
143
144
145
146
147

**Q: Does ImPlot support 3D plots?**

A: No, and likely never will since ImGui only deals in 2D rendering.

Evan Pezent's avatar
Evan Pezent 已提交
148
149
**Q: My plot lines look like crap!**

Evan Pezent's avatar
Evan Pezent 已提交
150
A: By default, no anti-aliasing is done on line plots for performance gains. If you use at least 4x MSAA, then you likely won't even notice. However, you can enable software AA per-plot with the `ImPlotFlags_AntiAliased` flag, or globally with `ImPlot::GetStyle().AntiAliasedLines = true;`.
Evan Pezent's avatar
Evan Pezent 已提交
151

Evan Pezent's avatar
Evan Pezent 已提交
152
153
**Q: Does ImPlot provide analytic tools?**

154
A: Not exactly, but it does give you the ability to query plot sub-ranges, with which you can process your data however you like.
Evan Pezent's avatar
Evan Pezent 已提交
155
156
157

**Q: Can plots be exported/saved to image?**

epezent's avatar
epezent 已提交
158
A: Not currently. Use your OS's screen capturing mechanisms if you need to capture a plot. ImPlot is not suitable for rendering publication quality plots; it is only intended to be used as a visualization tool. Post-process your data with MATLAB or matplotlib for these purposes.
Evan Pezent's avatar
Evan Pezent 已提交
159

Evan Pezent's avatar
Evan Pezent 已提交
160
**Q: Can I compile ImPlot as a dynamic library?**
Evan Pezent's avatar
Evan Pezent 已提交
161

Evan Pezent's avatar
Evan Pezent 已提交
162
A: Like ImGui, it is recommended that you compile and link ImPlot as a *static* library or directly as a part of your sources. However, if you must and are compiling ImPlot and ImGui as separate DLLs, make sure you set the current *ImGui* context with `ImPlot::SetImGuiContext(ImGuiContext* ctx)`. This ensures that global ImGui variables are correctly shared across the DLL boundary.
Evan Pezent's avatar
Evan Pezent 已提交
163

Evan Pezent's avatar
Evan Pezent 已提交
164
**Q: Can ImPlot be used with other languages/bindings?**
Evan Pezent's avatar
Evan Pezent 已提交
165

166
A: Yes, you can use the generated C binding, [cimplot](https://github.com/cimgui/cimplot) with most high level languages. [DearPyGui](https://github.com/hoffstadt/DearPyGui) provides a Python wrapper, among other things. [imgui-java](https://github.com/SpaiR/imgui-java) provides bindings for Java. A Rust binding, [implot-rs](https://github.com/4bb4/implot-rs), is currently in the works. An example using Emscripten can be found [here](https://github.com/pthom/implot_demo).