Jquery ile grafik oluşturma ( Highcharts )

SanalData’yı Google’da tercih edilen kaynak olarak ekleyin

Merhabalar,

Sizlere de lazım olabilir diye jquery ( highcharts ) ile kopyala yapıştır şeklinde kodu sizlerle paylaşıyorum

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="container" style="width:100%; height:400px;"></div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const chart = Highcharts.chart('container', {
                    chart: {
                        type: 'line'
                    },
                    title: {
                        text: 'Aylar'
                    },
                    xAxis: {
                        categories: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık']
                    },
                    yAxis: {
                        title: {
                            text: 'Sipariş Sayısı'
                        }
                    },
                    series: [{
                        name: 'Aylara Göre Sipariş Rakamları',
                        data: [1, 0, 4]
                    } ]
                });
            });
            let chart; // globally available
            document.addEventListener('DOMContentLoaded', function () {
                chart = Highcharts.stockChart('container', {
                    rangeSelector: {
                        selected: 1
                    },
                    series: [{
                        name: 'USD to EUR',
                        data: usdtoeur // predefined JavaScript array
                    }]
                });
            });
        </script>
    </div>
    </form>
</body>
</html>

<!DOCTYPE html>

</head>

<body>

<div>

document.addEventListener('DOMContentLoaded', function () {

const chart = Highcharts.chart('container', {

chart: {

type: 'line'

title: {

text: 'Aylar'

xAxis: {

categories: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık']

yAxis: {

title: {

text: 'Sipariş Sayısı'

}

series: [{

name: 'Aylara Göre Sipariş Rakamları',

data: [1, 0, 4]

} ]

});

let chart; // globally available

document.addEventListener('DOMContentLoaded', function () {

chart = Highcharts.stockChart('container', {

rangeSelector: {

selected: 1

series: [{

name: 'USD to EUR',

data: usdtoeur // predefined JavaScript array

}]

});

</script>

</div>

</form>

</body>

</html>

Siz kendinize göre özelleştirebilirsiniz. Grafik çıktısı ise aşağıdaki gibidir.

Jquery ile grafik oluşturma ( Highcharts )

Yazar

Harun Kılıçlar

Kurucu / Teknoloji Editörü

Harun, yazılım geliştirme, web teknolojileri, mobil uygulamalar, veritabanı sistemleri ve yapay zekâ üzerine çalışan bir teknoloji editörüdür. SanalData’nın kurucusu olarak yazılım, yapay zekâ, mobil teknolojiler ve teknoloji sektöründeki gelişmeleri izler ve değerlendirir.

Harun Kılıçlar’ın tüm yazıları