You must be logged in to post your query.
Home › Forums › Report Bugs › x axis labels not displaying from csv file
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
@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
You must be logged in to reply to this topic. Login/Register