Home Forums Report Bugs x axis labels not displaying from csv file

x axis labels not displaying from csv file

Viewing 2 posts - 1 through 2 (of 2 total)
  • #20989

    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

    #20996

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.