jQuery UI Widgets Forums Chart xAxis value problem on multiple data source

This topic contains 6 replies, has 2 voices, and was last updated by  sathiyaseelan8 2 years, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • sathiyaseelan8
    Participant

    i have created line chart with multiple data source. i having problem with the days value displayed at xAxis.

    This image shows full chart: https://drive.google.com/open?id=1mXUGnVn40gJVPVxZ9LpigD0b6zeFJFA5
    This image shows chart of countsSolvedTicket: https://drive.google.com/open?id=1lVAnqrvzDPOLISF7vqtsszz6xggzk3Bf

    why by default the chart days not starting from 9th to 30th?? Somebody please guide me. thanks in advance

    here is my code.

    var mydepartment = $('#myDepartment').val();
    
                var source =
                {
                    dataType: "json",
                    dataFields: [
                        { name: 'counts', type: 'int' },
                        { name: 'date', type: 'date' }
                    ],
                    url: '/ajax/ajaxTotalTicketCreatedByMonth',
                    data: {dept: mydepartment} 
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
                //console.log(dataAdapter.loadedData);
    
                var source2 =
                {
                    dataType: "json",
                    dataFields: [
                        { name: 'countsTicketSolved', type: 'int' },
                        { name: 'date', type: 'date' }
                    ],
                    url: '/ajax/ajaxTotalTicketSolvedByMonth',
                    data: {dept: mydepartment} 
                };
    
                var dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source2.url + '" : ' + error); } });
                console.log(dataAdapter2.loadedData);
    
                // prepare jqxChart settings
                var settings = {
                    title: "Ticket created vs ticket solved",
                    description: "",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 10, top: 10, right: 15, bottom: 10 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    //source: dataAdapter,
                    source: dataAdapter2,
                    colorScheme: 'scheme13',
                    xAxis: {
                        dataField: 'date',
                        type: 'date',
                        baseUnit: 'day',
                        description: 'Day',
                        valuesOnTicks: false,
                        labels:
                        {
                            formatFunction: function (value) {
                                return value.getDate();
                            }
                        },
                        toolTipFormatFunction: function (value) {
                            //return value.getDate() + '-' + value.getMonth() + '-' + value.getFullYear();
                        }
                    },
                    valueAxis: {
                        unitInterval: 10,
                        minValue: 0,
                        maxValue: 30,
                        title: { text: "ticket <br><br>" },
                        labels: { horizontalAlignment: 'left' }
                    },
                    seriesGroups:
                        [
                            {
                                type: 'line',
                                source: dataAdapter,
                                series:
                                [
                                    {
                                        dataField: 'counts',
                                        symbolType: 'square',
                                        emptyPointsDisplay: 'zero',
                                        displayText: 'Ticket Created',
    
                                        labels:
                                        {
                                            visible: true,
                                            backgroundColor: '#FEFEFE',
                                            backgroundOpacity: 0.2,
                                            borderColor: '#7FC4EF',
                                            borderOpacity: 0.7,
                                            padding: { left: 5, right: 5, top: 0, bottom: 0 }
                                        }
                                    }
                                ]
                            },
                            {
                            	type: 'line',
                            	source: dataAdapter2,
                            	series:
                            	[
                                    {
                                        dataField: 'countsTicketSolved',
                                        symbolType: 'square',
    
                                        labels:
                                        {
                                            visible: true,
                                            backgroundColor: '#FEFEFE',
                                            backgroundOpacity: 0.2,
                                            borderColor: '#7FC4EF',
                                            borderOpacity: 0.7,
                                            padding: { left: 5, right: 5, top: 0, bottom: 0 }
                                        }
                                    }
                            	]
                            }
                        ]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);

    Hristo
    Participant

    Hello sathiyaseelan8,

    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    sathiyaseelan8
    Participant

    thanks hristo. it works now.

    btw i have another question, the month of date for your data1 and data2 is 03 but why at the line chart the month is 02??


    Hristo
    Participant

    Hello sathiyaseelan8,

    I cannot understand what you mean?
    Could you clarify it?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    sathiyaseelan8
    Participant

    hi Hristo,

    var data1 = [
    { counts: 1, date: “03/09/2018” },
    { counts: 1, date: “03/12/2018” },
    { counts: 1, date: “03/22/2018” },
    { counts: 1, date: “03/24/2018” }
    ];

    var data2 = [
    { countsTicketSolved: 1, date: “03/21/2018” },
    { countsTicketSolved: 1, date: “03/22/2018” },
    { countsTicketSolved: 2, date: “03/26/2018” },
    { countsTicketSolved: 6, date: “03/27/2018” },
    { countsTicketSolved: 2, date: “03/28/2018” },
    { countsTicketSolved: 1, date: “03/30/2018” },
    ];

    if you see data1 and data2, the month in your date is ’03’. but why the tooltip at the chart, the month shows as ’02’?


    Hristo
    Participant

    Hello sathiyaseelan8,

    This case become from the tooltip function implementation. The .getMonth() method return the index of the month (they start from 0).
    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    sathiyaseelan8
    Participant

    hi Hristo,

    thanks for the help.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.