x axis labels not displaying from csv file

[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

[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