Charts - Sparkline

<ins-sparkline 
  id="sparkLineChartID" 
  icon="icon-analytic-1" 
  name="Profits" 
  value="370"
  percentage="26" 
  description="From previous year" 
  movement="0
  tooltip="This is a sample tooltip content. It also support html content."">

<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>

<ins-sparkline></ins-sparkline>

<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>

<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>