CODEWITHSUNDEEP
javascripthighcharts
Grug
Grug

Reputation: 1890

Highcharts not displaying chart from csv file

I have only a single series of data that I want shown on a column chart. A number for the days of the week.

data.csv 1,6,7,3,6,15,9

I want to display as a bar chart:

$(document).ready(function() {

$.get('data.csv', function (csv) { 
    $('#container').highcharts({
        title: {
            text: 'Daily Usage'
        },
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            title: {
                text: 'Hours'
            }
        },
        labels: {
            items: [{
                style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{
            type: 'column',
            name: 'Day',
            data: {
                csv: csv
            }
        }, {
            type: 'spline',
            name: 'Average',
            data: [1, 16, 3, 6.33, 10, 3, 5],
            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        }
        ]
    });
});

});

The graph doesn't render. It's blank. The title is there though.

Upvotes: 0

Views: 357

Answers (2)

Swetha
Swetha

Reputation: 746

You can put the csv values in an array and parse the values using JSON. Example,

        series: [{
           name: 'Day',
           data: JSON.parse("[" + s1 + "]")  // s1 contains the csv values
        ]}

Upvotes: 1

Strikers
Strikers

Reputation: 4776

in general CSV holds values separated by commas, these values will be in string format.

While Highcharts accept data to be present as comma separated array of numbers.

please check if they are strings or numbers and parse the values to numbers if required.

Hope this will help you to solve the issue.

Upvotes: 0

Related Questions