html - javascript chart not displaying

Question

the system did go into the script but not displaying the chart. I'm not sure why. Because for other graphs I've been using the same method with this one. but other graphs are displayed well on the same page. Just this graph is not displaying. Also, I had tried using canvas and so on but still not working. would like someone to help me within, please?

this is the html code :

  <div class="col-md-6" style="padding:10px;background-color:greenyellow;height:500px;">
                            AQI
                            <div id="containeraqi" style="height:250px;"></div>
                        </div>

javascript

<script>
    anychart.onDocumentReady(function () {
        var data = [
            { x: 'Food is tasteless', value: 65 },
            { x: 'Wait time', value: 109 },
            { x: 'Unfriendly staff', value: 12.5 },
            { x: 'Not clean', value: 45 },
            { x: 'Overpriced', value: 250 },
            { x: 'To noisy', value: 27 },
            { x: 'Food not fresh', value: 35 },
            { x: 'Small portions', value: 170 },
            { x: 'Not atmosphere', value: 35 },
            { x: 'Food is to salty', value: 35 }
        ];
        
        // create pareto chart with data
        var chart = anychart.pareto(data);
        // set chart title text settings
        chart.title('Graf Berdasarkan AQI, Bilangan Pokok dan Tahun');
        // set measure y axis title
        chart.yAxis(0).title('Defect frequency');
        // cumulative percentage y axis title
        chart.yAxis(1).title('Cumulative Percentage');
        // turn on chart animation
        chart.animation(true);

        // create horizontal line marker
        chart
            .lineMarker()
            .value(80)
            .axis(chart.yAxis(1))
            .stroke('#A5B3B3', 1, '5 2', 'round'); // sets stroke

        // get pareto column series and set settings
        var column = chart.getSeriesAt(0);
        column.tooltip().format('Value: {%Value}');

        // get pareto line series and set settings
        var line = chart.getSeriesAt(1);
        line.seriesType('spline').markers(true);
        line.yScale().ticks().interval(10);
        line.labels().enabled(true).anchor('right-bottom').format('{%CF}%');
        line
            .tooltip()
            .format('Cumulative Frequency: {%CF}% 
 Relative Frequency: {%RF}%');

        // turn on the crosshair and set settings
        chart.crosshair().enabled(true).xLabel(false);

        // set container id for the chart
        chart.container('containeraqi');
        // initiate chart drawing
        chart.draw();
    });
</script>

anyone can help me? please??

question from:https://stackoverflow.com/questions/65945677/javascript-chart-not-displaying

Answer 1

It works for me... you can even run it here (click on: run conde snippet).

The only thing I have added is to load anychart... maybe you have the wrong script src, or maybe a problem with the rest of the html.

    anychart.onDocumentReady(function () {
        var data = [
            { x: 'Food is tasteless', value: 65 },
            { x: 'Wait time', value: 109 },
            { x: 'Unfriendly staff', value: 12.5 },
            { x: 'Not clean', value: 45 },
            { x: 'Overpriced', value: 250 },
            { x: 'To noisy', value: 27 },
            { x: 'Food not fresh', value: 35 },
            { x: 'Small portions', value: 170 },
            { x: 'Not atmosphere', value: 35 },
            { x: 'Food is to salty', value: 35 }
        ];
        
        // create pareto chart with data
        var chart = anychart.pareto(data);
        // set chart title text settings
        chart.title('Graf Berdasarkan AQI, Bilangan Pokok dan Tahun');
        // set measure y axis title
        chart.yAxis(0).title('Defect frequency');
        // cumulative percentage y axis title
        chart.yAxis(1).title('Cumulative Percentage');
        // turn on chart animation
        chart.animation(true);

        // create horizontal line marker
        chart
            .lineMarker()
            .value(80)
            .axis(chart.yAxis(1))
            .stroke('#A5B3B3', 1, '5 2', 'round'); // sets stroke

        // get pareto column series and set settings
        var column = chart.getSeriesAt(0);
        column.tooltip().format('Value: {%Value}');

        // get pareto line series and set settings
        var line = chart.getSeriesAt(1);
        line.seriesType('spline').markers(true);
        line.yScale().ticks().interval(10);
        line.labels().enabled(true).anchor('right-bottom').format('{%CF}%');
        line
            .tooltip()
            .format('Cumulative Frequency: {%CF}% 
 Relative Frequency: {%RF}%');

        // turn on the crosshair and set settings
        chart.crosshair().enabled(true).xLabel(false);

        // set container id for the chart
        chart.container('containeraqi');
        // initiate chart drawing
        chart.draw();
    });

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-bundle.min.js"></script>
  <div class="col-md-6" style="padding:10px;background-color:greenyellow;height:500px;">
                            AQI
                            <div id="containeraqi" style="height:250px;"></div>
                        </div>