Bar Chart
Create a bar chart in ESP-DASH v4 and update its X-axis and Y-axis data with updateX() and updateY().
A bar chart plots a series of values as vertical bars against labeled categories, for example energy usage per day of the week.
BAR_CHART is the only chart type available in ESP-DASH Lite. Line, area and pie charts are available in ESP-DASH Pro.
Constructor
Chart chart1(&dashboard, BAR_CHART, "Chart Name");Prop
Type
Methods
Declare the axis arrays in global scope, or otherwise keep them in memory for the lifetime of the chart. The chart references the arrays you pass to updateX() and updateY(); they must not be freed or go out of scope.
updateX()
Sets the X-axis data (labels) of the chart.
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};
chart1.updateX(XAxis, 7);The following overloads are available:
void updateX(int arr_x[], size_t x_size);
void updateX(float arr_x[], size_t x_size);
void updateX(String arr_x[], size_t x_size);
void updateX(const char* arr_x[], size_t x_size);Prop
Type
updateY()
Sets the Y-axis data (values) of the chart.
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};
chart1.updateY(YAxis, 7);The following overloads are available:
void updateY(int arr_y[], size_t y_size);
void updateY(float arr_y[], size_t y_size);Prop
Type
Example
The X-axis labels usually change rarely, so set them once in setup(). Update the Y-axis values whenever new data is available, then call dashboard.sendUpdates().
// ...
AsyncWebServer server(80);
ESPDash dashboard(&server);
/* Axis data in global scope */
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};
Chart power(&dashboard, BAR_CHART, "Power Usage (kWh)");
void setup() {
// ...
/* Set the X-axis once */
power.updateX(XAxis, 7);
server.begin();
}
void loop() {
/* Example data */
for (int i = 0; i < 7; i++) {
YAxis[i] = (int)random(0, 200);
}
power.updateY(YAxis, 7);
dashboard.sendUpdates();
delay(3000);
}