x axis labels not displaying from csv file

• June 6, 2018 at 6:38 pm #20989
  
  faulduff

  Hello,

  Am encountering problems trying to display the x axis labels from data retrieved from csv file. The 0 column (X axis) are names not values or dates. Unsure of how to retrieve text, as the chart is displaying each X axis item as a number 1, 2, 3, 4, 5, 6, 7, 8, 9.

  CSV file:
  Application Transaction Success Rate Transaction Success Rate Bench Mark
  ATO Online 0.1883 0.9795
  TAP 0.295 0.9919
  BP 0.3959 0.9905
  ICP 0.4837 0.9972
  Siebel 0.5996 0.9999
  ABR 0.6442 0.9941
  ABR1 1 0.9999
  ABR2 0.716 0.9744
  ATO.GOV 0.8632 0.9614

  <script type=”text/javascript”>
  $(window).load(function() {
  function getDataPointsFromCSV(csv) {
  var dataPoints, csvLines, points;

  dataPoints = csvLines = points = [];

  csvLines = csv.split(/[\r?\n|\r|\n]+/);
  for (var i = 0; i < csvLines.length; i++)
  if (csvLines[i].length > 0) {
  points = csvLines[i].split(“,”);

  chart01.options.data[0].dataPoints.push({y: parseFloat(points[1])});
  chart01.options.data[1].dataPoints.push({y: parseFloat(points[2])});
  chart01.options.data[2].dataPoints.push({y: parseFloat(points[3])});
  chart01.options.data[3].dataPoints.push({y: parseFloat(points[4])});
  chart01.options.data[4].dataPoints.push({y: parseFloat(points[5])});
  chart01.options.data[5].dataPoints.push({y: parseFloat(points[6])});
  chart01.options.data[6].dataPoints.push({y: parseFloat(points[7])});
  chart01.options.data[7].dataPoints.push({y: parseFloat(points[8])});
  chart01.options.data[8].dataPoints.push({y: parseFloat(points[9])});
  }
  }

  var chart01 = new CanvasJS.Chart(“chart01Container”, {
  title: {
  text: “Today’s Transaction Success Rate from CSV”,
  },

  axisY: {
  title: “Transaction Success Rate”,
  },
  data: [
  {
  type: “line”,
  name: “Transaction Success Rate”,
  indexLabel: “{y}”,
  showInLegend: true,
  dataPoints: []
  },
  {
  type: “line”,
  percentFormatString: “#0.##”,
  name: “ATO Online”,
  showInLegend: true,
  dataPoints: []
  },
  {
  type: “line”,
  name: “TAP”,
  showInLegend: true,
  dataPoints: []
  },
  {
  type: “line”,
  name: “BP”,
  showInLegend: true,
  dataPoints: []
  },
  {
  type: “line”,
  name: “ICP”,
  showInLegend: true,
  dataPoints: []
  },
  {
  type: “line”,
  name: “Siebel”,
  showInLegend: true,
  dataPoints: []
  },
  {
  type: “line”,
  name: “ABR”,
  showInLegend: true,
  dataPoints: []
  },
  {
  type: “line”,
  name: “SBR1”,
  showInLegend: true,
  dataPoints: []
  },
  {
  type: “line”,
  name: “SBR2”,
  showInLegend: true,
  dataPoints: []
  },
  {
  type: “line”,
  name: “ATOGOV”,
  showInLegend: true,
  dataPoints: []
  },
  ]
  });

  $.get(“../data/statistics/performance/2018/daily/system_performance_daily_transaction_success_rate_2018_06_01.csv”, function(data) {
  getDataPointsFromCSV(data);
  chart01.render();
  });
  }); //closes window load

  </script>

  Thankyou in advance.

  Warren Faulkner

  June 7, 2018 at 10:47 am #20996
  
  Priyanka M S

  @faulduff,

  You can display the x axis labels from data retrieved from CSV file by pushing the dataPoints with labels along with y-values to chart. Please take a look at this jsfiddle.
  If this doesn’t solve your requirement, please share a jsfiddle, so that we can understand your requirement better and help you out.

  __
  Priyanka M S
  Team CanvasJS