This is my csv file:

I am taking the csv link submitted from another page and stored in sessionStorage.

This chart is from highcharts.com and I've been trying to take the csv data and populate it in the d3 chart. But the data displays perfectly in the console. But it wont populate the chart . Could you guys please tell me where I am wrong.

My code:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<figure >
    <div id="container"></div>
  
</figure>
<style>
    .highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

    
</style>
<Script>
    var a='year';
    var b='value';
    var c='month';
    var CSVurl=sessionStorage.getItem("Miracle");
       console.log(CSVurl);
     d3.csv(CSVurl).then(makeChart);
            function makeChart(days) {
                 var dayLabel = days.map(function(d){return d[a]});
                var dayTemp = days.map(function(d) {return d[b]});
                var dayBoy= days.map(function(d) {return d[c]});
                 console.log(dayLabel);
                 console.log(dayTemp);
                console.log(dayBoy);
    Highcharts.chart('container', {
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Multi Axes chart'
    },
//    subtitle: {
//        text: 'Source: WorldClimate.com'
//   },
    xAxis: [{
         categories: dayLabel,
//        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
//            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'December'],
        crosshair: true
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: b,
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: c,
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} mm',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 100,
        floating: true,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || // theme
            'rgba(255,255,255,0.25)'
    },
    series: [{
        name: b,
        type: 'column',
        yAxis: 1,
        data: dayTemp,
       // data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        tooltip: {
           
        }

    }, {
        name: c,
        type: 'spline',
         data:dayBoy,
//        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
        tooltip: {
           
        }
    }]
});
            }
    </script>

instead of the hard coded data I've been trying to use the csv data dynamically. So I have commented those part.

CodePudding user response：

The problem is that values in your dayTemp and dayBoy arrays are of type string, whereas Highcharts expects them to be an array of numbers.

Simply parsing those values in your map using parseFlaot() should solve the problem.

var dayTemp = days.map(function(d) {
  return parseFloat(d[b])
});
var dayBoy = days.map(function(d) {
  return parseFloat(d[c])
});