Use Events on Chart
Currently, the chart component does not support events. However, you can use the Custom Component to create a chart using a third-party library that supports events. Plotly is one of the libraries that supports events. In this tutorial, we will build a chart using Plotly and add events to it.
Step 1: Add a Custom Component
Open the App Builder and add a Custom Component to the page. Then, click on the Custom Component to open the Properties panel.
Note: If you are not familiar with the Custom Component, please read the Custom Component doc.
Step 2: Add the code to the Custom Component
import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core';
import Plotly from 'https://cdn.skypack.dev/plotly.js-basic-dist-min';
import createPlotlyComponent from 'https://cdn.skypack.dev/react-plotly.js/factory';
const MyCustomComponent = ({data, updateData, runQuery}) => {
const Plot = createPlotlyComponent(Plotly);
const barOnClick = ({points}) => {
alert('A bar is clicked')
}
return (
<Container>
<Plot data={[
{
"name": "Inbound",
"type": "bar",
"x": [
20,
14,
23,
22,
30,
12,
15,
26,
31,
16,
18,
29
],
"y": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"marker": {
"line": {
"color": "rgba(55, 128, 191, 1.0)",
"width": 1
},
"color": "rgba(55, 128, 191, 0.6)"
},
"orientation": "h"
},
{
"name": "Outbound",
"type": "bar",
"x": [
12,
18,
29,
22,
14,
23,
15,
23,
26,
13,
27,
12
],
"y": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"marker": {
"line": {
"color": "rgba(255, 153, 51, 1.0)",
"width": 1
},
"color": "rgba(255, 153, 51, 0.6)"
},
"orientation": "h"
}
]}
layout={{
width: 840,
height: 800,
title: "Tickets Resolved: Inbound & Outbound",
showlegend: false,
}}
onClick={barOnClick}
/>
</Container>
)}
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.body);
Let's understand the code above in detail. First, we imported the required libraries.
import React from 'https://cdn.skypack.dev/react'; // React library
import ReactDOM from 'https://cdn.skypack.dev/react-dom'; // React DOM library
import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core'; // Material UI library
import Plotly from 'https://cdn.skypack.dev/plotly.js-basic-dist-min'; // Plotly library
import createPlotlyComponent from 'https://cdn.skypack.dev/react-plotly.js/factory'; // Plotly React library
Then, we created a function component called MyCustomComponent
. This component will render the chart. We use the createPlotlyComponent
function to create a Plotly component. Then, we create a function called barOnClick
that will be called when the user clicks on the bar. This function will display an alert message.
const MyCustomComponent = ({data, updateData, runQuery}) => { // function component
const Plot = createPlotlyComponent(Plotly); // create a Plotly component
const barOnClick = ({points}) => { // function that will be called when the user clicks on the bar
alert('A bar is clicked') // display an alert message
}
Next, we render the chart using the Plot
component. We pass the data and layout to the Plot
component. We also pass the barOnClick
function to the onClick
prop of the Plot
component.
return ( // return the Plot component
<Container> // Material UI Container component
<Plot data={[ // Plot component
{ // data for the first bar
"name": "Inbound",
"type": "bar",
"x": [
20,
14,
23,
22,
30,
12,
15,
26,
31,
16,
18,
29
],
"y": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"marker": {
"line": {
"color": "rgba(55, 128, 191, 1.0)",
"width": 1
},
"color": "rgba(55, 128, 191, 0.6)"
},
"orientation": "h"
},
{ // data for the second bar
"name": "Outbound",
"type": "bar",
"x": [
12,
18,
29,
22,
14,
23,
15,
23,
26,
13,
27,
12
],
"y": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"marker": {
"line": {
"color": "rgba(255, 153, 51, 1.0)",
"width": 1
},
"color": "rgba(255, 153, 51, 0.6)"
},
"orientation": "h"
}
]}
layout={{ // layout for the chart
width: 840,
height: 800,
title: "Tickets Resolved: Inbound & Outbound",
showlegend: false,
}}
onClick={barOnClick} // pass the barOnClick function to the onClick prop
/>
</Container>
)}
Finally, we render the MyCustomComponent
component using the ReactDOM.render
function.
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent); // connect the component to the Tooljet store
ReactDOM.render(<ConnectedComponent />, document.body); // render the component
Step 3: Using events from the Custom Component
In the code above, we created a function called barOnClick
that will be called when the user clicks on the bar. This function holds the code that will be executed when the user clicks on the bar.
const barOnClick = ({points}) => {
alert('A bar is clicked')
}
Instead of displaying an alert message, you can use the runQuery
function to run a query.
const barOnClick = ({points}) => {
runQuery('queryName')
}
runQuery
is a function which accepts a query name as a string used to run the query from the custom component. Learn more about the custom component here.