jQuery UI Widgets Forums Chart some chart problem with 3.8 version

This topic contains 5 replies, has 2 voices, and was last updated by  jayjay1215 9 years ago.

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

  • jayjay1215
    Participant

    Dear Develpoer,

    Our company has buy the license for 3.8 version.But there is some problems with chart setting.

    var trendsource =
    {
    datatype: “json”,
    datafields: [
    { name: ‘time’ },
    { name: ‘instance’ }
    ],
    url:url
    };

    var trenddataAdapter = new $.jqx.dataAdapter(
    trendsource, { async: false,
    loadComplete: function (records) {
    },autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
    var months = [’01’, ’02’, ’03’, ’04’, ’05’, ’06’, ’07’, ’08’, ’09’, ’10’, ’11’, ’12’];
    var settings = {
    title: “”,
    description: “”,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 11, bottom: 5 },
    titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
    source: trenddataAdapter,
    xAxis:
    {
    dataField: ‘time’,

    formatFunction: function (value, itemIndex, serie, group) {
    return months[value.getMonth()] + ‘-‘ + value.getDate()+’ ‘+value.getHours()+’:’+value.getMinutes()+’:’+value.getSeconds();
    },
    toolTipFormatFunction: function (value, itemIndex, serie, group, xAxisValue, xAxis) {
    return value.getFullYear() + ‘-‘ + months[value.getMonth()] + ‘-‘ + value.getDate()+’ ‘+value.getHours()+’:’+value.getMinutes()+’:’+value.getSeconds();
    },
    showTickMarks: true,
    type: ‘date’,
    baseUnit: baseUnit,
    tickMarksInterval: 1,
    tickMarksColor: ‘#888888’,
    unitInterval: 1,
    showGridLines: false,
    gridLinesInterval: 1,
    gridLinesColor: ‘#888888’,

    valuesOnTicks: true
    },
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘line’,
    valueAxis:
    {

    minValue: 0,
    description: yAxis,

    tickMarksColor: ‘#888888’
    },
    series: [
    { dataField: ‘instance’, displayText: ‘kpi trend’ }
    ]

    }
    ]
    };

    $(‘#chart’).jqxChart(settings);`

    when i use 3.6 version it works ok. but last month we upgrade it with 3.8 version.

    the problem is in 3.8 version.

    the formatFunction value return “Sat Jun 06 2015 00:00:00 GMT+0800 (China Standard Time)” but today is “Wes Jun 03 2015 00:00:00 GMT+0800 (China Standard Time)”

    bug in 3.8 version
    Is it a bug in 3.8 version or I missed any setting there?

    Thanks for your response!

    • This topic was modified 9 years ago by  jayjay1215.

    jayjay1215
    Participant

    The json data is:

    [{“instance”:8.0000,”time”:”2015-06-03 00:00″},{“instance”:8.0000,”time”:”2015-06-03 00:05″},{“instance”:8.0000,”time”:”2015-06-03 00:10″},{“instance”:8.0000,”time”:”2015-06-03 00:15″},{“instance”:8.0000,”time”:”2015-06-03 00:20″},{“instance”:8.0000,”time”:”2015-06-03 00:25″},{“instance”:8.0000,”time”:”2015-06-03 00:30″},{“instance”:8.0000,”time”:”2015-06-03 00:35″},{“instance”:8.0000,”time”:”2015-06-03 00:40″},{“instance”:8.0000,”time”:”2015-06-03 00:45″},{“instance”:8.0000,”time”:”2015-06-03 00:50″}]


    jayjay1215
    Participant

    the below pic is using 3.6 version, it works good:

    Is there any difference between two versions?


    jayjay1215
    Participant

    AnyBody can help me to check this problem????


    Dimitar
    Participant

    Hello jayjay1215,

    I modified your example and it now works fine (note the additional datafields settings):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = '[{"instance":8.0000,"time":"2015-06-03 00:00"},{"instance":8.0000,"time":"2015-06-03 00:05"},{"instance":8.0000,"time":"2015-06-03 00:10"},{"instance":8.0000,"time":"2015-06-03 00:15"},{"instance":8.0000,"time":"2015-06-03 00:20"},{"instance":8.0000,"time":"2015-06-03 00:25"},{"instance":8.0000,"time":"2015-06-03 00:30"},{"instance":8.0000,"time":"2015-06-03 00:35"},{"instance":8.0000,"time":"2015-06-03 00:40"},{"instance":8.0000,"time":"2015-06-03 00:45"},{"instance":8.0000,"time":"2015-06-03 00:50"}]';
    
                var trendsource = {
                    datatype: "json",
                    datafields: [{
                        name: 'time', type: 'date', format: 'yyyy-MM-dd HH:mm'
                    }, {
                        name: 'instance', type: 'float'
                    }],
                    localdata: data
                };
    
                var trenddataAdapter = new $.jqx.dataAdapter(trendsource, {
                    async: false,
                    loadComplete: function (records) { },
                    autoBind: true,
                    loadError: function (xhr, status, error) {
                        alert('Error loading "' + source.url + '" : ' + error);
                    }
                });
                var months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
                var settings = {
                    title: "",
                    description: "",
                    enableAnimations: true,
                    showLegend: true,
                    padding: {
                        left: 5,
                        top: 5,
                        right: 11,
                        bottom: 5
                    },
                    titlePadding: {
                        left: 10,
                        top: 0,
                        right: 0,
                        bottom: 10
                    },
                    source: trenddataAdapter,
                    xAxis: {
                        dataField: 'time',
    
                        formatFunction: function (value, itemIndex, serie, group) {
                            return months[value.getMonth()] + '-' + value.getDate() + ' ' + value.getHours() + ':' + value.getMinutes() + ':' + value.getSeconds();
                        },
                        toolTipFormatFunction: function (value, itemIndex, serie, group, xAxisValue, xAxis) {
                            return value.getFullYear() + '-' + months[value.getMonth()] + '-' + value.getDate() + ' ' + value.getHours() + ':' + value.getMinutes() + ':' + value.getSeconds();
                        },
                        showTickMarks: true,
                        type: 'date',
                        baseUnit: 'minute',
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 5,
                        showGridLines: false,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
    
                        valuesOnTicks: true
                    },
                    colorScheme: 'scheme01',
                    seriesGroups: [{
                        type: 'line',
                        valueAxis: {
    
                            minValue: 0,
                            description: 'Desc',
    
                            tickMarksColor: '#888888'
                        },
                        series: [{
                            dataField: 'instance',
                            displayText: 'kpi trend'
                        }]
    
                    }]
                };
    
                $('#chart').jqxChart(settings);
    
            });
        </script>
    </head>
    <body class='default'>
        <div id='chart' style="width: 850px; height: 500px;">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    jayjay1215
    Participant

    Hi Dimitar

    Thanks for your answer, it works ok now!

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

You must be logged in to reply to this topic.