I am using the following code for creating chart by highcharts. It’s fine for

Question

0

Asked: June 12, 20262026-06-12T04:17:28+00:00 2026-06-12T04:17:28+00:00

I am using the following code for creating chart by highcharts. It’s fine for

0

I am using the following code for creating chart by highcharts. It’s fine for two div but I want these two type of chart in one div when I will use same data though I have used different data here…. the code is

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Csv Chart</title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/highcharts-more.js" type="text/javascript"></script>
<script src="js/modules/exporting.js" type="text/javascript"></script>
</head>
<body>
<script>
var csvChart;
var chartArea;
$(document).ready(function(){
    var options = {
    chart: {
        renderTo: 'csv-chart',
        type: 'line'
    },
    title: {
        text: 'Fruit Consumption Line Chart'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Units'
        }
    },
    series: []
  };
  $.get('data.csv', function(data) {
    // Split the lines
    var lines = data.split('\n');
    console.log(data);

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        // header line containes categories
        if (lineNo == 0) {
            $.each(items, function(itemNo, item) {
                if (itemNo > 0) options.xAxis.categories.push(item);
            });
        }

        // the rest of the lines contain data with their name in the first position
        else {
            var series = {
                data: []
            };
            $.each(items, function(itemNo, item) {
                if (itemNo == 0) {
                    series.name = item;
                } else {
                    series.data.push(parseFloat(item));
                }
            });

            options.series.push(series);

        }

    });

    // Create the chart
    csvChart = new Highcharts.Chart(options);
});

chartArea = new Highcharts.Chart({

            chart: {
                renderTo: 'area-chart',
                type: 'arearange'
            },

            title: {
                text: 'Temperature variation by day'
            },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {
                title: {
                    text: null
                }
            },

            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: '°C'
            },

            legend: {
                enabled: false
            },

            series: [{
                name: 'Temperatures',
                data: [
/* 2009-01-01 */
[1230771600000, -5.8, 0.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1231549200000, 3.1, 6.8],
[1231635600000, 0.0, 7.6],
[1231722000000, 5.6, 9.4],
[1231808400000, 3.6, 6.5],
[1231894800000, -3.6, 3.8],
[1231981200000, -6.0, -1.5],
[1232067600000, -3.8, 2.4],
[1232154000000, 1.5, 4.2],
[1232240400000, 0.0, 4.5],
[1232326800000, -1.1, 3.6],
[1232413200000, 0.5, 5.1],
[1232499600000, 0.0, 2.5],
[1232586000000, -0.6, 2.1],
[1232672400000, 0.8, 4.7],
[1232758800000, 0.6, 4.4],
[1232845200000, -3.9, 1.4],
[1232931600000, -4.3, 2.0],
[1233018000000, -6.1, -0.4],
[1233104400000, -0.3, 1.9],
[1233190800000, -2.9, 2.7],
[1233277200000, -4.0, -1.0],
[1233363600000, -4.4, -1.9],
/* 2009-12-01 */
[1259629200000, -3.3, 1.7],
[1259715600000, -2.8, -0.7],
[1259802000000, -2.7, 3.8],
[1259888400000, -0.7, 4.2],
[1259974800000, 0.3, 6.1],
[1260061200000, 2.9, 9.8],
[1260147600000, 0.0, 6.8],
[1260234000000, 0.6, 2.8],
[1260320400000, 0.1, 5.1],
[1260406800000, 2.8, 3.9],
[1260493200000, -1.2, 2.2],
[1260579600000, -4.0, -0.4],
[1260666000000, -0.7, 0.7],
[1260752400000, 0.5, 1.6],
[1260838800000, -1.0, 1.5],
[1260925200000, -7.8, -1.0],
[1261011600000, -11.9, -7.9],
[1261098000000, -13.5, -7.9],
[1261184400000, -7.8, -1.7],
[1261270800000, -11.2, -0.6],
[1261357200000, -13.1, -7.2],
[1261443600000, -13.2, -5.2],
[1261530000000, -10.9, -7.7],
[1261616400000, -8.4, -1.5],
[1261702800000, -6.1, -1.2],
[1261789200000, -2.6, -1.2],
[1261875600000, -2.9, 0.7],
[1261962000000, -2.7, 0.7],
[1262048400000, -10.8, -1.3],
[1262134800000, -11.1, -8.0],
[1262221200000, -12.2, -6.5]
]
            }]

        });
});

</script>
<div id="csv-chart"></div>
<div id="area-chart"></div>
</body>
</html>

Now I want the above two chart in one div so that it look like the following image. Is it possible?
enter image description here