Creates a json chart. Data can either be obtained by performing a NRQL query against a particular account, or it can be passed through the data prop.
The data format is a series of objects, each containing metadata and data. Each data contains both values from this point, and x and y keys used to plot the chart.
Usage
import { JsonChart } from 'nr1';Examples
Basic
<JsonChart accountIds={[1]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"/>;With multiple accounts
<JsonChart accountIds={[1, 1067061]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"/>;Fill container
<JsonChart accountIds={[1]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType" fullWidth fullHeight/>;With custom data
function render() { const data = { id: 1, name: 'Foo', price: 123, tags: ['Bar', 'Eek'], stock: { warehouse: 300, retail: 20, }, };
return <JsonChart data={data} fullWidth />;}Props
DEPRECATEDnumber | Due November 1st, 2022The Sets the account ID to perform the query. |
number[] | Sets the account IDs to perform the query. |
string | Appends class names to the component. |
object[] | Data is an array of objects where each object represents a series to be drawn. Each series comprises visualization metadata and an array of data points. |
boolean | Expands the chart to occupy all available height. |
boolean | Expands the chart to occupy all available width. |
string | NRQL query used for fetching data. The query is performed against the provided |
object | Inline style for custom styling. |