CODEWITHSUNDEEP
javascripthighcharts
Someone Special
Someone Special

Reputation: 13588

Highcharts Ajax Json not displaying Chart

I am trying to use the ajax line chart and I've created the following but it's not displaying anything.

What i am trying to achieve is to display the page views for the last 30 days. Hence my Json encode shows [date,page views]

I want the dates to display at the bottom horizontally, and the number of page counts on the vertical axis.

When i load the page, there's no error but it displays blank.

Update: I've updated the JSON data but I do not understand what kind of order it needs to be sorted by, since the data now is [A,B] and I sorted it ascending order of A.

{"data":[[1476374400000,143],[1476288000000,190],[1476201600000,108],[1476115200000,145],[1476028800000,125],[1475942400000,15],[1475856000000,18],[1475769600000,26],[1475683200000,31],[1475596800000,42],[1475510400000,19],[1475424000000,34],[1475337600000,46],[1475251200000,34],[1475164800000,46],[1475078400000,34],[1474992000000,33],[1474905600000,39],[1474819200000,52],[1474732800000,47],[1474646400000,60],[1474560000000,40],[1474473600000,52],[1474387200000,51],[1474300800000,70],[1474214400000,69],[1474128000000,64],[1474041600000,45],[1473955200000,47],[1473868800000,44]],"name":"www.example.com"}

And then by following the codes on highcharts website I got this.

<head>

    <script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.src.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <!-- Additional files for the Highslide popup effect -->
    <!-- Additional files for the Highslide popup effect -->
    <script src="https://www.highcharts.com/samples/static/highslide-full.min.js"></script>
    <script src="https://www.highcharts.com/samples/static/highslide.config.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="https://www.highcharts.com/samples/static/highslide.css"/>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


<script type="text/javascript">
    $(document).ready(function () {

// Get the CSV and create the chart
        $.getJSON('https://www.micro.sg/json/', function (data) {

            $('#container').highcharts({

                data: {
                    json: data
                },

                title: {
                    text: 'Daily visits at www.highcharts.com'
                },

                subtitle: {
                    text: 'Source: Google Analytics'
                },

                xAxis: {
                    tickInterval: 24 * 3600 * 1000, // one week
                    tickWidth: 0,
                    gridLineWidth: 1,
                    labels: {
                        align: 'left',
                        x: 3,
                        y: -3
                    }
                },

                yAxis: [{ // left y axis
                    title: {
                        text: null
                    },
                    labels: {
                        align: 'left',
                        x: 3,
                        y: 16,
                        format: '{value:.,0f}'
                    },
                    showFirstLabel: false
                }, { // right y axis
                    linkedTo: 0,
                    gridLineWidth: 0,
                    opposite: true,
                    title: {
                        text: null
                    },
                    labels: {
                        align: 'right',
                        x: -3,
                        y: 16,
                        format: '{value:.,0f}'
                    },
                    showFirstLabel: false
                }],

                legend: {
                    align: 'left',
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    borderWidth: 0
                },

                tooltip: {
                    shared: true,
                    crosshairs: true
                },

                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function (e) {
                                    hs.htmlExpand(null, {
                                        pageOrigin: {
                                            x: e.pageX || e.clientX,
                                            y: e.pageY || e.clientY
                                        },
                                        headingText: this.series.name,
                                        maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
                                        this.y + ' visits',
                                        width: 200
                                    });
                                }
                            }
                        },
                        marker: {
                            lineWidth: 1
                        }
                    }
                },

                series: [{
                    name: 'All visits',
                    lineWidth: 4,
                    marker: {
                        radius: 4
                    }
                }, {
                    name: 'New visitors'
                }]
            });
        });

    });
</script>
</body>

Upvotes: 0

Views: 236

Answers (1)

morganfree
morganfree

Reputation: 12472

You have two issues in your code. The first thing is you do not have to use data module to load json - actually it does nothing with the data - so your chart is empty. You should put the data into series property - remember one thing that it requires array, not an object, so in this case it should be like this (such options include 3 series, which 2 of them have no data):

series: [series, {
      name: 'All visits',
      lineWidth: 4,
      marker: {
        radius: 4
      },
    }, {
      name: 'New visitors'
    }]

The other problem is that the data needs to be sorted. Preferable way is to do this on server side but, of course, you can sort this in the browser.

  series.data.sort(function (a, b) {
    return a[0]-b[0];
  });

Example: http://jsfiddle.net/ojg90mmg/1/

Upvotes: 1

Related Questions