Updating the chart with new data

[rayernParticipant]

At first I’m displaying the chart with fixed data but then depending on the selection of the drop down list,the chart should be updated with new source.I’m not sure how exactly to update the source of the chart.The code which I’ve come up is:

 var fbCat=new Array();

    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var baseUnit_xAxis='day';
    var interval=5;       
    $.getJSON("index_php.php",function(data){
        
        $.each(data,function(i,item){
            $('#fbCategory').append($('<option>', { 
                value: item.fbCat,
                text : item.fbCat
            }));
        });
        
    })
    $.getJSON("admin_php.php",{choice:$("#valueAxis").prop('selectedIndex'),id:$("#fbCategory").prop('selectedIndex')+1},function(data){
    var settings = {
            title: "Feedback Analysis",
            description: "Details of feedback entries",
            padding: { left: 20, top: 5, right: 20, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: data,
            xAxis:{
                dataField: 'date',
                formatFunction: function (value) {
                                    if(baseUnit_xAxis=='month'){
                                        return months[value.getMonth()] + '-' + value.getFullYear();
                                    }
                                    else if(baseUnit_xAxis=='day'){
                                        return value.getDate() + '-' +   months[value.getMonth()] + '-' + value.getFullYear();
                                    }
                                 },
                type: 'date',
                baseUnit: baseUnit_xAxis,
                valuesOnTicks: true,
                minValue: data[0].date,
                maxValue: data[data.length-1].date,
                tickMarks: {
                    visible: true,
                    interval: 1,
                    color: '#BCBCBC'
                },
                unitInterval: interval,
                gridLines: {
                    visible: true,
                    interval: 3,
                    color: '#BCBCBC'
                },
                labels: {
                    angle: -45,
                    rotationPoint: 'topright',
                    offset: { x: 0, y: -25 }
                }
            },
            valueAxis:{
                minValue: 0,
                maxValue: 5,
                unitInterval: 1,
                title: {text: $("#valueAxis").val()}
            },
            colorScheme: 'scheme01',
            seriesGroups:[{
                type: 'line',
                series: [{dataField: 'yaxis', displayText:$("#valueAxis").val()}]
            }]
        };
                   
        $('#chartContainer').jqxChart(settings); 
    }) 
    $("#valueAxis,#dayMonthSelector,#fbCategory").on("change",function(){
        
        if($("#valueAxis").prop('selectedIndex')<2)
                $("#fbCategory").slideDown();
            else
                $("#fbCategory").slideUp();  
        
        $.getJSON("admin_php.php",{choice:$("#valueAxis").prop('selectedIndex'),id:$("#fbCategory").prop('selectedIndex')+1},function(data){
        console.log(data);   
        if($("#dayMonthSelector").prop('selectedIndex')==0){
            interval=5;
            baseUnit_xAxis='day';
        }
        else if($("#dayMonthSelector").prop('selectedIndex')==1){
            $.each(data,function(i,item){
                item.date=item.date.substring(0,7);
                item.date=new Date(item.date);
            })
            interval=1;
            baseUnit_xAxis='month';
        }
        settings.source=data;
         $('#chart').jqxChart('update');
        })
    });

I’m not sure if it should be “settings.source=data;” or something else.Please tell me what it should be

[HristoParticipant]

Hello rayern,

You could set new information in old variable ‘data’ or could change the source of the Chart.
And finish with update method.

...
var chart = $('#chart').jqxChart('getInstance');
// Use own code settings to set data - "$.getJSON("admin_php.php"..."
chart.source = data
chart.update(); // or $('#chart').jqxChart('update');

Please take a look this article it could be useful:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts