Skip to main content
All CollectionsReports & visualizationCharts
Create an area/line chart
Create an area/line chart
Updated over 4 months ago

Charts are a type of Dashboard Widget in a Neara project. Other types of Dashboard Widgets include Metrics and Pivot Tables.

See also: Available chart styles

The chart to be created

In this tutorial, we'll create a mixed area/line chart plotting the Height and Number of Connected Spans for each Pole in our network model.

They will be plotted as a mixed area/line chart, like this, on separate vertical axes, with formatted axes and gridlines, and a custom chart title, axis titles, and legend:

About Chart.js versions

Neara projects use the Chart.js library to power Chart Dashboard widgets. This article includes examples of how to inspect and change Chart.js configuration JSON options to customize a default chart.

By default, Neara supports Chart.js version 2 options.

Neara includes support for the latest Chart.js version 4 options, at a project-wide level. However, charts configured with version 2 options may not display as expected if Chart.js version 4 is enabled in a project.

For this reason Chart.js version 2 is currently the default in Neara projects.

You can opt-in to use Chart.js version 4 if you would like to access the latest chart options in a project. You may need to update any existing chart configurations in the project.

To opt-in to use the newest Chart.js version 4 options in a project, contact us

This article includes separate configuration examples for both Chart.js version 2 and version 4

Add a chart widget to the project

Select the (+) to the right of any tab group, and select Create Dashboard Widget on the popup:

When prompted, select one of the chart styles and give the chart a name:

In this example, we'll create a Line Chart that plots heights of poles in our project. Click Create.

Configure the chart options

A new tab panel will open showing the chart options.

Data source

A chart can be based on a standard Table report, or a global Analytics report.

In this example we'll base the chart on data from a standard Table report in our project that lists all Poles in the network:

On the chart configuration panel, select the report that will provide the data for the chart:

You'll notice that you can change the chart style using the Widget Type option. You may lose existing settings if you convert an existing chart to a chart style that has different configuration options.

Format

Our final chart will have:

  • Pole labels on the x-axis

  • Height of each pole on the y-axis

  • A second series on the y-axis showing number of connected spans to each pole

x-axis labels ("Labels column")

Select Label from the Labels Column drop-down. In this example, the pole labels are in a report column called Label. You can select any available column from the source report:

Also select Label from the Sort by drop-down. This will sort the order of the x-axis items. Click the icon to the right of the Sort by drop-down to change the sort direction (ascending/descending):

y-axis data series

In the table below, select Height for the Source Column. This will plot the Height for each pole on the y-axis:

Preview the chart

Preview the chart with live data and its default configuration by clicking the gear icon in the upper-right corner of the panel:

This will switch the panel to chart display mode:

By default, it renders as an area style line chart, with placeholder axis and chart titles.

Your initial chart may look different to this if you have opted-in to use Chart.js version 4 in a project.

Add a second data series

Switch back to chart configuration using the gear icon, and under the table click Add series and in the new row select the Num connected spans column from the source report:

Switch back to preview the updated chart:

Customize the chart legend

To customize the text that appears in the chart's legend, see: Custom chart legend.

Configure each data series

Chart configuration options are in JSON format.

When making edits to the JSON text, take care to retain the structure and formatting otherwise your chart may not display.

In particular:

  • keys and string values must be enclosed in double-quotes e.g.
    ​"text" : "My chart"

  • number values are not enclosed in single or double-quotes

  • arrays are not enclosed in single or double-quotes e.g. [10, 5]

  • items are comma , separated

  • the last item in a group or array does not have a trailing comma

We'll make the following changes to improve the presentation of the chart:

  • Assign a unique ID to each y-axis, so that we can assign one of the data series to a second y-axis later

  • Style each data series with suitable colors

  • Remove the fill and change the line style of the Num connected spans data series, to distinguish it from the Height data series

  • Change the chart title to: Height and Connected Spans by Pole

  • Add titles to each axis

  • By default, charts will set the scale of each axis automatically based on the data in the underlying report. We'll change the scale of each y-axis by setting a fixed minimum and maximum value for each data series.

Since Height and Num Connected Spans are different data series with different scales and units of measurement, we'll plot them on two separate y-axes:

  • Height (m) will be plotted against the left hand side y-axis

  • Num Connected Spans will be plotted against a new, right hand side y-axis

To do this, we'll assign a unique axis ID to each data series.

In the same location, we'll also change the style (color, fill, border width, point style, etc.) of each data series:

  • Set the Height series color to cyan with translucent background, with a border slightly thicker at 2 pixels

  • Modify the No. of connected spans series:

    • Change the border thickness to 3px

    • Remove the fill color, so that only the line is displayed

    • Change the border (line) color to a complementary yet distinct teal color

    • Convert it from a solid line to a dashed line

    • Change the point markers from circles, to large triangles filled in a light teal color

    • Use straight segments, rather than a curved line, between data points

Click on the Options in the Height row in the data series table, to view its configuration in the table:

Modify the JSON for each of the Height and Num connected spans data series as follows, depending on the version of Chart.js that your project is using:

Chart.js version 2

Height data series options

{
  "backgroundColor": "#33b1ff33",
  "borderColor": "#33b1ff",
  "borderWidth": 2,
  "yAxisID": "y1"
}

Num connected spans data series options

{
  "backgroundColor": "transparent",
  "borderColor": "#08bdba",
  "borderWidth": 3,
  "pointStyle": "triangle",
  "pointRadius": 10,
  "pointBackgroundColor": "#FFFFFF",
  "pointBorderWidth": 1,
  "pointHitRadius": 10,
  "borderDash": [10,7],
  "borderCapStyle": "round",
  "lineTension": 0,
  "yAxisID": "y2"
}

You can use any text for an axis ID, provided each is unique. You'll refer to it when configuring each axis the Chart options below.

Chart.js version 4

Height data series options

{
  "fill": "origin",
  "backgroundColor": "#33b1ff33",
  "borderColor": "#33b1ff",
  "borderWidth": 2,
  "tension": 0.2,
  "yAxisID": "y1"
}

In version 4, line Bezier curve line tension defaults to 0 unless specified. Area plots require the fill option set.

Num connected spans data series options

{
  "backgroundColor": "transparent",
  "borderColor": "#08bdba",
  "borderWidth": 3,
  "pointStyle": "triangle",
  "pointRadius": 10,
  "pointBackgroundColor": "#FFFFFF",
  "pointBorderWidth": 1,
  "pointHitRadius": 10,
  "borderDash": [10,7],
  "borderCapStyle": "round",
  "tension": 0,
  "yAxisID": "y2"
}

You can use any text for an axis ID, provided each is unique. You'll refer to it when configuring each axis the Chart options below.

Click anywhere outside the options popup to dismiss it. Your changes are saved automatically.

The two data series' should now look like this:

pointStyle options:

  • "circle"

  • "cross"

  • "crossRot"

  • "dash"

  • "line"

  • "rect"

  • "rectRounded"

  • "rectRot"

  • "star"

  • "triangle"

For a reference of available options, click the Documentation icon in the Options column header:

Color in charts

You can specify chart colors in variety of formats in the data series options. See: Supported color formats

Data vizualisations in charts benefit from carefully selected color palettes to aid interpretation and clarity. See: Effective color palettes for data visualization

Modify chart options

Switch back to chart configuration using the gear icon, and stretch the Chart options input area -- using the resize control in the lower left corner -- so that you can see all the options:

We'll make the following changes heret:

  • Add a more descriptive chart title

  • Add a second y-axis on the right, and plot the Num connected spans data series on that axis

  • Add axis titles

  • By default Neara charts will autoscale the axes to accommodate the underlying report data. We'll demonstrate how to set a fixed axis scale for each y-axis, which may be useful in some cases.

  • Change the color of the gridlines to a light grey for clarity

  • Turn off the grid for the the second y-axis to avoid confusion

Chart.js version 2

{
  "title": {
    "display": true,
    "text": "Height and Connected Spans by Pole"
  },
  "scales": {
    "xAxes": [
      {
        "scaleLabel": {
          "labelString": "Pole label",
          "display": true,
          "gridLines": {
            "color": "#808080"
          }
        }
      }
    ],
    "yAxes": [
      {
        "id": "y1",
        "scaleLabel": {
          "labelString": "Height (m)",
          "display": true
        },
        "ticks": {
          "beginAtZero": true,
          "stepSize": 5,
          "suggestedMin": 0,
          "suggestedMax": 15
        },
        "position": "left",
        "gridLines": {
          "color": "#808080"
        }
      },
      {
        "id": "y2",
        "scaleLabel": {
          "labelString": "Connected spans",
          "display": true
        },
        "ticks": {
          "beginAtZero": true,
          "stepSize": 1,
          "suggestedMin": 0,
          "suggestedMax": 5
        },
        "position": "right",
        "gridLines": {
          "display": false
        }
      }
    ]
  }
}

Chart.js version 4

{
  "plugins": {
    "title": {
      "display": true,
      "text": "Height and Connected Spans by Pole"
    }
  },
  "scales": {
    "x": {
      "title": {
        "display": true,
        "text": "Pole label"
      },
      "grid": {
        "color": "#808080"
      }
    },
    "y1": {
      "type": "linear",
      "position": "left",
      "title": {
        "display": true,
        "text": "Height (m)"
      },
      "min": 0,
      "max": 15,
      "ticks": {
        "beginAtZero": true,
        "stepSize": 5
      },
      "grid": {
        "color": "#808080"
      }
    },
    "y2": {
      "type": "linear",
      "position": "right",
      "title": {
        "display": true,
        "text": "Connected spans"
      },
      "min": 0,
      "max": 5,
      "ticks": {
        "beginAtZero": true,
        "stepSize": 1
      },
      "grid": {
        "drawOnChartArea": false
      }
    }
  }
}

View the final chart

Switch back to the chart view. Your chart should now look similar to this:

Related Articles
M(z,cat) Gust Wind Speed Multiplier
Wind and Weight Spans
CSV structure and feature codes for Survey import
Creating custom reports
Create Volumes around objects, and making Point Cloud selections
Did this answer your question?