JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

jQuery(document).ready(function() { 
 
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'pie'
                },
                title: {
                    text: 'Vechicle Sales'                 
                },
            
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Sales'
                    }
                },
                series: []
            };
    
            // prepare csv file dummy
              var csvData = "Year,Bikes,Scooters,Cars\n2010,40,50,100\n2011,50,20,90\n2012,70,80,60";    
    
    
            // JQuery function to process the csv data
           
                var seriesData = [];
                var lines = csvData.split('\n');
                $.each(lines, function(lineNo, line) {
                    var items = line.split(',');
                     
                    if (lineNo == 0) {
                        $.each(items, function(itemNo, item) {
                            //skip first item of first line
                            if (itemNo > 0){
                                seriesData.push({name: item, y: 0});
                            }
                        });
                    } else {

                        $.each(items, function(itemNo, item) {
                            if (itemNo > 0) {
                                seriesData[itemNo - 1]['y'] += parseFloat(item);
                            }
                        });
                    }
                });
                     
    options.series.push({data: seriesData, name: 'Vechiles'});
           
            var chart = new Highcharts.Chart(options);
             
        });