CODEWITHSUNDEEP
jqueryasp.net-mvchighcharts
user517406
user517406

Reputation: 13773

my first highchart

I am trying to build my first chart, I have got as far as pulling my y axis data in, but I am still not sure how to build my x axis from my data source. My current code hard codes the values in, but these values should come from result[i].Season. Here is my code, can somebody help?

var chart;

$(document).ready(function () {



    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'graphcontainer',
            defaultSeriesType: 'line',
            events: {
                load: requestData
            }
        },
        legend: {
            enabled: false
        },
        colors: [
            '#c9243f'
        ],
        credits: {
            enabled: false
        },
        title: {
            text: 'Regular Season Wins',

            style: {
                fontWeight: 'normal'
            }
        },
        xAxis: {
            categories: [
                        '92',
                        '93',
                        '94',
                        '09',
                        '10',
                        '11',
                        '12',
                        '13',
                        '14',
                        '15'
                    ],
            title: {
                text: 'Season'
            }
        },
        yAxis: {
            min: 0,
            max: 16,
            tickInterval: 2,
            title: {
                text: 'Games Won'
            }
        },
        tooltip: {
            formatter: function () {
                return '' +
                            this.x + ': ' + this.y + ' wins';
            }
        },
        series: [{ data: []}] 
    });
});

function requestData() 
{
    $.post('/Gameplan/Team/GetRegularSeasonWins', { strTeam: "Atlanta Falcons", strSeason: "2016" }, function (result) {

        $.each(result, function (i) {
            chart.series[0].addPoint(result[i].Wins, false);
        });

        chart.redraw();
    });
}

And my data access :

public List<RegularSeasonWins> GetRegularSeasonWins(string strTeam, string strSeason)
    {
        List<RegularSeasonWins> lstRegularSeasonWins = new List<RegularSeasonWins>();

        lstRegularSeasonWins = (from w in _database.RegularSeasonWins(strTeam, strSeason)

                                select new RegularSeasonWins
                                {
                                    Team = w.Team,
                                    Coach = w.coach,
                                    Season = w.seasonshort,
                                    Wins = w.won
                                }).ToList();

        return lstRegularSeasonWins;                                                     
    }

Upvotes: 0

Views: 4132

Answers (1)

NT3RP
NT3RP

Reputation: 15370

You should be able to set the series by modifying your code as follows:

function requestData() {
    $.post('/Gameplan/Team/GetRegularSeasonWins', {
        strTeam: "Atlanta Falcons",
        strSeason: "2016"
    }, function (result) {

        var categories = [];
        $.each(result, function (i) {
            chart.series[0].addPoint(result[i].Wins, false);

            categories.push(results[i].Season)
        });
        chart.xAxis[0].setCategories(categories);
        chart.redraw();
    });
}

But in general, if you ever have trouble with highcharts, they have great documentation which explains every config option and function available, along with JSFiddle examples.

Upvotes: 1

Related Questions