CODEWITHSUNDEEP
javascriptjquerycsvhighcharts
Mariam Imran
Mariam Imran

Reputation: 23

Correct format of using csv data to plot highchart

I'm trying to create column chart using data imported from csv file. I have tried every possible solution on the Internet but couldn't figure out the solution to my problem. I'm trying to show Shop Name on x-axis and Sales on y-axis.

Here is my code:

      <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />

        <style>
        body{
            margin-top: 30px;
            margin-left:40px;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>      
        <script src="http://code.highcharts.com/highcharts.js"></script>
                <script src="http://code.highcharts.com/modules/data.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.5/papaparse.js"></script>
</head>
<body>



    </div>
    <div id="container" style="height: 400px"></div>
        <script type="text/javascript">
            $(function () {
                $.get('stores.csv', function(csvdata) {
                    var data = Papa.parse(csvdata);
                 $('#container').highcharts({
                            chart: {
                                type: "column"
                            },
                            title: {
                                text: "Sales Analysis"
                            },
                            xAxis: {
                                ShopName: []
                            },
                            yAxis: {
                                title: {
                                    text: "Sales"
                                }
                            },
                            data: {
                                csv: data

                            },
                            plotOptions: {
                                series: {
                                    marker: {
                                        enabled: false
                                    }
                                }
                            }
                    });
                });
            });
    </script>
</body>
</html>

csv file(stores.csv):

Longitude,Latitude,ShopName,ShopAddress,Sales
73.2350874,34.1990918,Abbotaqbad  Civic Shopping Center,Mansehra Road Mandian,29719
74.3062887,31.5673136,Anarkali 1  9 - Babar Market,Anarkali,14212
74.3040372,31.5643123,Anarkali 263 - Babar Market,Anarkali,35928
74.4559979,31.5931715,Baghbanpura   239 - G T Road,Baghbanpura,49901

Upvotes: 2

Views: 813

Answers (1)

Om Sao
Om Sao

Reputation: 7643

This is just to give you an example of how you can plot chart with Highchart while parsing .csv data. Code is simple and self explanatory.

<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>      


</head>
<body>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script type="text/javascript">
$.get('stores.csv', function(data) {

var lines = data.split('\n');
console.log(lines);
var shopNameData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
    {
    shopNameData[lineNo-1] = lineContent.split(',')[2];
    }
});

var salesData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
    {
    salesData[lineNo-1] = parseFloat(lineContent.substring(lineContent.lastIndexOf(",")+1) );
    }
});

console.log(shopNameData);
console.log(salesData);

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Sales Analysis'
    },
    subtitle: {
        text: 'put subtitle here'
    },
    xAxis: {
        categories: shopNameData,
        crosshair: false
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Sales (in Rupees)'
        }
    },
   tooltip: {
        headerFormat: '<b>Shopname:</b> {point.x}<br/>',
        pointFormat: '<b>{series.name}:</b> {point.y}<br/>'
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Sales',
        data: salesData

    } ]
});

});


</script>
</body>
</html>

.csv file used is:

Longitude,Latitude, ShopName,ShopAddress,Sales
73.2350874,34.1990918,Abbotaqbad  Civic Shopping Center,Mansehra Road Mandian,29719
74.3062887,31.5673136,Anarkali 1  9 - Babar Market,Anarkali,14212
74.3040372,31.5643123,Anarkali 263 - Babar Market,Anarkali,35928
74.4559979,31.5931715,Baghbanpura   239 - G T Road,Baghbanpura,49901

Points to be noted

  1. Note that in .csv there are no space after comma, so .csv must follow that or you have to edit the logic to form shopNameData and salesData

  2. Host both .html and .csv at one place in some server. Otherwise, in Google Chrome, you will get CrossOrigin error.

Here is the snapshot of Chart if you will copy the html and name the .csv as stores.csv in same directory of html and host in some server.

enter image description here

Upvotes: 2

Related Questions