Charts - Bar

<ins-bar-chart 
  id="barChartID" 
  has-load="renderCompleteEg"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-bar-chart>

<script src="https://components.insites.io/insites-config.min.js"></script>

<script>
  var name = 'Sessions';
  var barChartSample = [{
    name: "Direct Set Column 1",
    data: [["2018-01-10", 8], ["2018-01-11", 14], ["2018-01-12", 18], ["2018-01-13", 35]],
    color: "#3EB98C"
  },
  {
    name: "Direct Set Column 2",
    data: [["2017-05-29", 55], ["2017-06-05", 12], ["2017-06-12", 8], ["2017-06-19", 3]],
    color: "#2BBAD9"
  }]

  var barChartCat = ["Jan - Apr 18", "May - Jul 18", "Aug - Oct 18", "Sept - Dec 18"]
  var barChartID = document.getElementById('barChartID');

  Insites.addMethods({
    renderCompleteEg: function(e) {
      barChartID.name = name;
      barChartID.chartData = barChartSample;
      barChartID.categories = barChartCat;
    }
  });
</script>

<ins-bar-chart></ins-bar-chart>

<ins-bar-chart 
  id="barChartDS" 
  has-load="renderDirectSetEg">
</ins-bar-chart>

<script>
  var name = 'Direct Set Data';
  var barChartSampledata = [
    {
      name: "Direct Set Column 1",
      data: [
        ["2018-01-10", 8],
        ["2018-01-11", 14],
        ["2018-01-12", 18],
        ["2018-01-13", 35]
      ],
      color: "#3EB98C"
    },
    {
      name: "Direct Set Column 2",
      data: [
        ["2017-05-29", 55],
        ["2017-06-05", 12],
        ["2017-06-12", 8],
        ["2017-06-19", 3]
      ],
      color: "#2BBAD9"
    }
  ]

  var barChartCategories = ["Jan - Apr 18", "May - Jul 18", "Aug - Oct 18", "Sept - Dec 18"]
  var barChartDS = document.getElementById('barChartDS');

  Insites.addMethods({
    renderDirectSetEg: function(e) {
      barChartDS.name = name;
      barChartDS.chartData = barChartSampledata;
      barChartDS.categories = barChartCategories;
    }
  });
</script>