Highcharts Demo

by Umair Rafiq

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container"></div>

CSS

#container {
    min-width: 310px;
    height: 400px;
    margin: 0 auto;
}

JavaScript

var url = 'https://engine-dragon.s-factors.com/twitter-api?query=imran%20khan&start_date=2024-01-01T00:00:00Z&end_date=2024-03-01T00:00:00Z';

$.getJSON(url, function(data) {
    console.log(data);

    // Ensure data is structured correctly
    const results = data.results || [];
    const categories = results.map(item => new Date(item.start).toLocaleDateString());
    const tweetCounts = results.map(item => item.tweet_count);

    // Check if there's a valid container
    if (!document.getElementById('container')) {
        console.error('Container element not found!');
        return;
    }

    // Initialize the chart
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Tweet Count Over Time'
        },
        xAxis: {
            categories: categories,
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Tweet Count'
            }
        },
        series: [{
            name: 'Tweet Count',
            data: tweetCounts
        }],
        tooltip: {
            pointFormat: '<b>{point.y}</b> tweets'
        },
        credits: {
            enabled: false
        }
    });
}).fail(function(jqxhr, textStatus, error) {
    console.error("Request Failed: " + textStatus + ", " + error);
});