Spline & Column Charts within table - Sparkline Charts - CanvasJS JavaScript Charts

Spline & Column Charts within table - Sparkline Charts - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<table>
    <tr>
        <th>Chart Type</th>
        <th>Graphical Representation</th>
    </tr>
    <tr>
        <td>
            Spline Chart
        </td>
        <td>
            <div id="splineChartContainer" style="height: 40px; width: 100%;"></div>
        </td>
    </tr>
    <tr>
        <td>
            Column Chart
        </td>
        <td>
            <div id="columnChartContainer" style="height: 40px; width: 100%;"></div>
        </td>
    </tr>
</table>

CSS

table, th, td{
  border: 1px solid black;
}

JavaScript

var splineChart = new CanvasJS.Chart("splineChartContainer", {
	axisX : {
  		labelFormatter:  function(e) {return ""},
      lineThickness: 0,
      gridThickness: 0,
      tickLength: 0
  },
  axisY : {
  		labelFormatter:  function(e) {return ""},
      lineThickness: 0,
      gridThickness: 0,
      tickLength: 0
  },
  data: [{
		type: "spline",
    markerSize: 0,
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}]
});

var columnChart = new CanvasJS.Chart("columnChartContainer", {
	axisX : {
  		labelFormatter:  function(e) {return ""},
      lineThickness: 0,
      gridThickness: 0,
      tickLength: 0
  },
  axisY : {
  		labelFormatter:  function(e) {return ""},
      lineThickness: 0,
      gridThickness: 0,
      tickLength: 0
  },
	data: [{
		type: "column",
    markerSize: 0,
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}]
});

splineChart.render();
columnChart.render();