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 accountId is deprecated, use accountIds instead 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. |