Line Chart Control
Tabbed Line Chart With Assync Loading
This uses loading wheels. Clicking a tabl results in "new" data being loaded. The loading wheel reappears, and then disappears after
data is "loaded". In this case, the left chart always loads first after 1 second and the right chart loads after 1.5 seconds.
Line Chart Control
Single Line Chart
Use sme-line-chart to render a single line chart. To use it, you need to pass in a LineChartData object
LineChartData
title: string; ----> This is the title that will show up above the chart
chartData: LinearChartData; ----> This is the LinearChartData object that is actually passed to ChartJs
currentValueLabel?: string; ----> This is the at-a-glance value of the most recent data point. It is displayed under
the title
firstCurrentValueLabel?: string; ----> This is the at-a-glance value of the most recent data point for dataset 1 in SDDC. It is
displayed under
the title.
secondCurrentValueLabel?: string; ----> This is the at-a-glance value of the most recent data point for dataset 2 in SDDC (if 2
datasets). It is displayed under
the title
totalCurrentValueLabel?: string; ----> This is the at-a-glance value of the sum of the most recent data point from each dataset in
SDDC (if 2 datasets). It is displayed under
the title
yAxisMinLabel?: string; ----> This is the minimum label for the y-axis
yAxisMaxLabel?: string; ----> This is the maximum label for the y-axis
xAxisMaxLabel?: string; ----> This is the maximum label for the x-axis
xAxisMinLabel?: string; ----> This is the minimum label for the x-axis
ymaxValue?: number; ----> This should hold the maximum y-value for the chart. It is used to scale the size of the
chart. Without it, the scaling of the graph is done automatically
type?: LineChartType; ----> The LineChartType of the graph
LinearChartData
This is a data type native to chartjs. It takes in an array of datasets that can be used to render multiple lines on one
graph.
Please view the line-chart-example source code for an example of the default values to be used for the linear chart
data.
LineChartType
There are currently 3 types of line charts supported by sme-line-chart:
Line: linearChartData.datasets[i].data is of type number[]
This is a line chart that takes in an array of numbers representing y-values.
The x-axis is spaced evenly based on
the number of tick marks you specify for thegraph when initializing the data.
X-axis tick marks can be added by pushing
'' onto the linearChartData.labels array. See example component.
Tooltip labels in this chart will only show the
y-values when the user hovers over the point. This is
Scatter: linearChartData.datasets[i].data is of type ChartPoint[]
This is a line chart that takes in an array of ChartPoint objects, which have an x and y value. Points are charted according
to their x and y values, as opposed to the even spacing of a Line chart type. Tooltip labels in this chart will show
the x value and y value as given in the data set
Historical: linearChartData.datasets[i].data is of type ChartPoint[] with {x, y} where x
is a timestamp
This is a line chart that behaves exactly as a Scatter chart. The only difference is that it expects the x values in the
data set to be in the form of integer time stamps. Historical chart tooltips will parse these timestamps into readable
dates when the user hovers over a point.
If no LineChartType is specified, sme-line-chart will select the Line type
Single Line Chart Examples
To see these examples with real time data add ?gateway=[your gateway url]&connection=[your node name]
to url for this page. This is a single sme-line-chart. All sme-line charts take up the size of its parent div. To select
a fixed size, wrap the sme-line-chart object in a div with a fixed width.
With a gateway and node connected, the following graph shows live data with custom labels and sizing with the Historical
chart type. Hover over a point on the graph to see the tool tip with a date.
This chart uses a ymax value of 100.
With a gateway and node connected, the following graph shows live data with custom labels and sizing with the Scatter chart
type. Hover over a point on the graph to see the tool tip with the corresponding x and y value.
This chart uses a ymax value of 200, so the same data will appear shorter than the previous chart.
This chart has 2 series plotted and a hero value for each. The third hero value is the sum total of the 2 hero values in this case.
Your own code must determine this value - it is not automatically set to the sum.
This chart has 3 series plotted
Tabbed Line Chart Group
Use sme-tabbed-line-chart-group to create a group of line charts that share a layout and tab control
The control takes in a groupData object and a tabList object, with an optional chartsPerRow number
tabList:
The tabList is a list of strings that will be used to name the tabs in your tab control The order of strings in the tabList
will be the order that the tabs are shown in over the group of charts For example, ['Live', 'Hour', 'Day', 'Month,
'Year']
groupData:
The groupData object is a Map<string, LineChartData>[]. So, a list of mappings between the tab names and data
to show for each tab.
Each chart in the group gets 1 map that tells the control which set of data to show for each tab.
The key strings in the map must match the key strings in the tabsList.
chartsPerRow:
This is the number of charts you want in each row of the group of charts. It is used to space out the charts in the chart
group in a way that allows them to resive relative to the space they are given on the page The default value of this is 3.
Tabbed Line Chart Group Examples
This is a group of charts with the default number of charts per row and 5 tabs.
This is a group of charts with only 2 chartsPer row and 2 tabs.
This utilizes the onTabClick event to display the tab that was clicked. It also makes use of tooltipFormatters input.
Tab clicked: {{clickedTab}}