CODEWITHSUNDEEP
jqueryhighcharts
Stewart Alan
Stewart Alan

Reputation: 1643

Setting Highcharts Series and Category data dynamically

Im trying to update a chart via an AJAX call using the following code

$j(document).ready(function () {
    $j("#filter").click(function () {
        BuildReport();
    });

    $j("#container").highcharts({
        chart: {
            type: 'column',
            marginRight: 130,
            marginBottom: 100
        },
        title: {
            text: 'SEs open by Group',
            x: -20 //center
        },
        yAxis: {
            title: {
                text: ''
            },
            min: 0,
            allowDecimals: false
        },
        xAxis: {},
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>' +
                            'Total: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                cursor: 'pointer',
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: {}
    });

    BuildReport();
});

function SetChartSeries(series) {
    debugger;
    chart = $j("#container").highcharts();
    chart.xAxis[0].setCategories(getReportCategories(series));
    chart.series = $j.map(series, function (item) {
        return {
            name: item.Name,
            color: item.Colour,
            data: $j.map(item.Items, function (list) {
                return {
                    name: list.Category,
                    y: list.Value,
                    id: list.ID
                };
            })
        };
    });
}

function getReportCategories(data) {
    var catArray = [];
    $j.each(data, function (index, value) {
        $j.each(value.Items, function (index, value) {
            if ($j.inArray(value.Category, catArray)) {
                catArray.push(value.Category);
            }
        });
    });

    return catArray;
}

function BuildReport() {
    $j.ajax({
        url: "ChartDataHandler.ashx",
        dataType: "json",
        cache: false,
        success: function (data) {
            SetChartSeries(data.Series);
        }
    });
}

When the page loads or the filter button is clicked BuildReport calls the handler and passes the series data to SetChartSeries. From here I can see that the chart properties are set, but the chart is never drawn. Am I doing something obviously wrong?

Upvotes: 3

Views: 22541

Answers (3)

Edison Chang
Edison Chang

Reputation: 335

The following is what I did to dynamically update series. The default behavior will redraw the chart. Check https://api.highcharts.com/class-reference/Highcharts.Chart#update

$('#YourContainer').highcharts().update( {
    series:[{
      name: 'New Legend',
      data: [{
          name: 'New Category',
          y: data
      }]
    ]}
})

Upvotes: 0

Swetha
Swetha

Reputation: 746

If you want to set category data dynamically, you need to use Axis.update() method

chart.xAxis[0].update({categories:arrayname,tickInterval:20},true);

Upvotes: 0

Cihad Turhan
Cihad Turhan

Reputation: 2849

If you want to create new series you need to use Chart.addSeries() method

If you want to set new data in an existing series you need to use Series.setData() method.

As I see, you create new series for each request and use addSeries method

Upvotes: 2

Related Questions