Insites Docs Web Components V1Data DisplayCharts - Sparkline

Charts - Sparkline

Last updated on August 02, 2024.

Element: <ins-sparkline>

Defines a Sparkline Chart.

Complete Example

Code Snippet

<ins-sparkline id="sparkLineChartID" icon="icon-analytic-1" name="Profits" value="370"
percentage="26" description="From previous year" movement="0">

<script>
  var data = [
    ["2017-12-18", 13],
    ["2017-12-25", 0],
    ["2018-01-01", 6],
    ["2018-01-08", 8],
    ["2018-03-12", 4],
    ["2018-06-01", 2],
    ["2018-08-08", 0]
  ]

  var sparklineChartEl = document.getElementById('sparkLineChartID');
  sparklineChartEl.addEventListener('didLoad', function(e){
    sparklineChartEl.chartData = data;
  });
</script>
Default State

Code Snippet

<ins-sparkline></ins-sparkline>
Direct Set Data

Code Snippet

<ins-sparkline id="directDataSourceSpark"
    name="Direct Data Source"
    icon="icon-user-1"
    value="720"
    percentage="7"
    description="From previous year"
    movement="1">
  </ins-sparkline>

  <script>
    var data = [
      ["2017-12-18", 13],
      ["2017-12-25", 0],
      ["2018-01-01", 0],
      ["2018-01-08", 8]
    ]

    var directDataSourceSpark = document.getElementById('directDataSourceSpark');
    directDataSourceSpark.addEventListener('didLoad', function(e){
      directDataSourceSpark.chartData = data;
    });

  </script>
Static Data Source

Code Snippet

<ins-sparkline
  id="staticDataSource"
  icon="icon-analytic-1"
  name="Static Data Source"
  value="720"
  percentage="7"
  description="From previous year"
  movement="increase">
</ins-sparkline>

<script>
  var data = [
    ["2017-12-18", 13],
    ["2017-12-25", 0],
    ["2018-01-01", 0],
    ["2018-01-08", 8]
  ]

  var staticDataSource = document.getElementById('staticDataSource');
  staticDataSource.addEventListener('didLoad', function(e){
    staticDataSource.chartData = data;
  });
</script>
Dynamic Data Source

Code Snippet

<ins-sparkline
  data-src="https://8podbzvdw2.execute-api.us-east-2.amazonaws.com/insites-dummy-sparkline-deployment/insites-dummy-get-sparkline">
</ins-sparkline>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
icon string "icon-user-1" icon-close-1, icon-utilities, icon-lock-1 ... Defines icon of chart
name string "Sparkline" any Defines name of chart
value string "0" any Defines value of chart
chart-data any any value separated by comma Defines chart data
percentage any "0" any Defines percentage of chart data
description string "N/A" any Defines description of chart
movement any "none" increase, decrease, none Defines movement of chartdata either up or down
data-src string "" any Calls api for data

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.