Charts - Line

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

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

<script>
  var name = 'Monthly Average Temperature';
  var lineChartSample = [{
      // sets the Name of the Line
      name: "Australia",

      // sets the data of the Line Chart
      data: [
        ["2018-01-10", 23],
        ["2018-01-11", 4],
        ["2018-01-12", 11],
        ["2018-01-13", 8],
        ["2018-01-14", 18],
        ["2018-01-15", 5],
        ["2018-01-16", 12],
        ["2018-01-17", 0],
        ["2018-01-18", 2],
        ["2018-03-29", 12],
        ["2018-03-30", 4],
        ["2018-03-31", 2]
      ],
      // sets the Color of the Line
      color: "#3EB98C"
    },
    {
      name: "Philippines",
      data: [
        ["2018-05-29", 5],
        ["2018-06-05", 22],
        ["2018-06-12", 18],
        ["2018-06-19", 3],
        ["2018-06-26", 15],
        ["2018-07-03", 03],
        ["2018-07-10", 8],
        ["2018-07-24", 45],
        ["2018-07-31", 10],
        ["2018-08-07", 14],
        ["2018-08-14", 27],
        ["2018-09-07", 14]
      ],
      color: "#2BBAD9"
    }
  ]
  // sets the categories for the chart
  var lineChartCat = [
    'Jan 18', 'Feb 18', 'Mar 18', 'Apr 18', 'May 18', 'Jun 18',
    'Jul 18', 'Aug 18', 'Sep 18', 'Oct 18', 'Nov 18', 'Dec 18'
  ]

  var lineChartID = document.getElementById('lineChartID');
  Insites.addMethods({
    renderCompleteEg: function(e) {
      lineChartID.name = name;
      lineChartID.chartData = lineChartSample;
      lineChartID.categories = lineChartCat;
    }
  });
</script>

<ins-line-chart></ins-line-chart>

<ins-line-chart 
  id="directSetDataLine" 
  has-load="renderDirectSetEg">
</ins-line-chart>

<script>
  var name = 'Direct Set Data';
  var lineChartData = [
    {
      name: "Visitor Sessions",
      data: [
        ["2018-01-10", 23],
        ["2018-01-11", 4],
        ["2018-01-12", 11],
        ["2018-01-13", 8],
        ["2018-01-14", 18],
        ["2018-01-15", 5],
        ["2018-01-16", 12],
        ["2018-01-17", 0],
        ["2018-01-18", 2],
        ["2018-03-29", 12],
        ["2018-03-30", 4],
        ["2018-03-31", 2]
      ],
      color: "#3EB98C"
    },
    {
      name: "Events",
      data: [
        ["2018-05-29", 5],
        ["2018-06-05", 22],
        ["2018-06-12", 18],
        ["2018-06-19", 3],
        ["2018-06-26", 15],
        ["2018-07-03", 03],
        ["2018-07-10", 8],
        ["2018-07-24", 45],
        ["2018-07-31", 10],
        ["2018-08-07", 14],
        ["2018-08-14", 27],
        ["2018-09-07", 14]
      ],
      color: "#2BBAD9"
    }
  ]

  var lineChartCategories = ['Jan 18', 'Feb 18', 'Mar 18', 'Apr 18', 'May 18', 'Jun 18', 'Jul 18', 'Aug 18', 'Sep 18', 'Oct 18', 'Nov 18', 'Dec 18']
  var directSetDataLine = document.getElementById('directSetDataLine');
  Insites.addMethods({
    renderDirectSetEg: function(e) {
      directSetDataLine.name = name;
      directSetDataLine.chartData = lineChartData;
      directSetDataLine.categories = lineChartCategories;
    }
  });
</script>