some chart problem with 3.8 version - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: 3.8.0, Angular chart, chart, datafields, date, format, jquery chart, jqxChart, time zone, type

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

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

Author

some chart problem with 3.8 version Posts

June 3, 2015 at 4:48 am some chart problem with 3.8 version #71935

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
};

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)”

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

Thanks for your response!

June 3, 2015 at 4:55 am some chart problem with 3.8 version #71937

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″}]

June 3, 2015 at 5:01 am some chart problem with 3.8 version #71939

jayjay1215

Participant

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

Is there any difference between two versions?

June 3, 2015 at 6:40 am some chart problem with 3.8 version #71946

jayjay1215

Participant

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

June 3, 2015 at 7:05 am some chart problem with 3.8 version #71949

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/

June 3, 2015 at 7:14 am some chart problem with 3.8 version #71951

jayjay1215

Participant

Hi Dimitar

Thanks for your answer, it works ok now!

Author

Posts

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

You must be logged in to reply to this topic.