Date in category work inproperly - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: categoryAxis, chart, jqxChart, labels

This topic contains 7 replies, has 2 voices, and was last updated by Magicloud 11 years, 8 months ago.

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

Author

Date in category work inproperly Posts

January 15, 2013 at 5:22 am Date in category work inproperly #13607

Member

Say I have javascript like following, I write only one record of localdata here. The chart seems correct, except the category axis labels. There are only first two (14/1/2013, 13/1/2013) shown. What should I do?

$(document).ready(function () {
    var da = new $.jqx.dataAdapter({
        datatype: "json",
        datafields: [{
            name: 'day',
            type: 'date'
        }, {
            name: 'ib',
            type: 'number'
        }],
        localdata: '[{"po":0.7133616847895287,"ti":0.9530058769948716,"ib":1.1032704469283396,"day":"14/1/2013","fud":7.0}]'
    });
    $("#ib_pct_to_plan").jqxChart({
        title: 'IB % to plan',
        source: da,
        showLegend: false,
        categoryAxis: {
            dataField: 'day',
            textRotationAngle: 60,
            showGridLines: false
        },
        enableAnimations: true,
        seriesGroups: [{
            type: 'line',
            valueAxis: {
                unitInterval: 0.1,
                showGridLines: false,
                formatFunction: function (value) {
                    return (Math.round(value * 100)) + '%'
                }
            },
            columnsGapPercent: 50,
            series: [{
                dataField: 'ib',
                showLabels: true,
                formatFunction: function (value) {
                    return (Math.round(value * 100)) + '%'
                }
            }]
        }]
    })
})

January 15, 2013 at 8:20 am Date in category work inproperly #13620

Dimitar

Participant

Hello Magicloud,

Labels on the categoryAxis would not show if there is not enough space available for them. In that case, some of the last labels may be hidden. A possible solution is to format the labels using formatFunction.

Best Regards,
Dimitar

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

January 15, 2013 at 8:31 am Date in category work inproperly #13622

Magicloud

Member

Thank you for the reply.
It does not seem like a space problem. I have 14 days, only 14 and 13 are shown. So there are plenty space. The chart line and grid line and value axis labels are all OK.
I’ve tried to use formatFunction, which did not seem to effect anything.

January 15, 2013 at 8:44 am Date in category work inproperly #13623

Dimitar

Participant

Hi Magicloud,

Could you, please, provide us with your entire page source code and JSON string/file so that we may further contemplate on the issue?

Best Regards,
Dimitar

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

January 15, 2013 at 10:00 am Date in category work inproperly #13634

Magicloud

Member

OK. I will provide later. Kind of ruined a little right now.

January 16, 2013 at 3:02 am Date in category work inproperly #13673

Magicloud

Member

Sorry for so late. Seems like it cannot detect date like 12/1/2013 (Jan 12, or Dec 1).

HTML:

<!doctype html><!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--><!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]--><!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" lang="en"> <!--<![endif]--><head><meta charset="UTF-8"><title></title><meta name="description" content=""><meta name="author" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="http://10.9.97.238:3000/static/css/bootstrap.css?etag=nyE417Xw"><link rel="stylesheet" href="http://10.9.97.238:3000/static/js/jqwidgets/styles/jqx.base.css?etag=fOuo2eVf"><link rel="stylesheet" href="http://10.9.97.238:3000/static/tmp/x0PsQ9Am.css"><script src="http://10.9.97.238:3000/static/js/jquery-1.8.3.min.js?etag=4SiBFjEu"></script><script src="http://10.9.97.238:3000/static/js/jqwidgets/jqx-all.js?etag=cShGFJys"></script><script src="http://10.9.97.238:3000/static/js/scripts/gettheme.js?etag=sJ8e4DSv"></script><script src="http://10.9.97.238:3000/static/tmp/_XD4SuCL.js"></script><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');</script></head><body><div class="container"><header></header><div id="main" role="main"><h1>ctu1 Stow PPR Report</h1>
<div style="width: 50%; height: 300px; float: left"><div id="scheme1" style="float: left"></div>
<div id="ib_pct_to_plan" style="width: 100%; height: 275px"></div>
</div>
<div style="width: 50%; height: 300px; float: right"><div id="scheme2" style="float: left"></div>
<div id="trans_in_pct_to_plan" style="width: 100%; height: 275px"></div>
</div>
<div style="width: 50%; height: 300px; float: left"><div id="scheme3" style="float: left"></div>
<div id="po_stow_pct_to_plan" style="width: 100%; height: 275px"></div>
</div>
<div style="width: 50%; height: 300px; float: right"><div id="scheme4" style="float: left"></div>
<div id="fud" style="width: 100%; height: 275px"></div>
</div>
</div><footer>shida@amazon.com</footer></div><!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.  chromium.org/developers/how-tos/chrome-frame-getting-started --><!--[if lt IE 7 ]><script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script><script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script><![endif]--></body></html>

JS:

function connectScheme(s,c){$('#'+s).bind('select',function(event){$('#'+c).jqxChart({colorScheme:args.item.label});$('#'+c).jqxChart('refresh')})}
function pct(value){return(Math.round(value*100))+'%'};$(document).ready(function(){var da=new $.jqx.dataAdapter({datatype:"json",datafields:[{name:'day',type:'date'},{name:'ib',type:'number'},{name:'ti',type:'number'},{name:'po',type:'number'},{name:'fud',type:'number'}],localdata:'[{"po":0.0,"ti":0.0,"ib":0.0,"day":"15/1/2013","fud":0.0},{"po":0.7133616847895287,"ti":0.9530058769948716,"ib":1.1032704469283396,"day":"14/1/2013","fud":7.0},{"po":1.0787518140543313,"ti":1.0667512050996315,"ib":1.0808437890889646,"day":"13/1/2013","fud":10.0},{"po":1.3793869861563863,"ti":1.0729337757046187,"ib":1.2560967965571033,"day":"12/1/2013","fud":18.0},{"po":1.1310638128738648,"ti":0.9874907419662796,"ib":0.9327351239429442,"day":"11/1/2013","fud":21.0},{"po":1.061481701326347,"ti":1.194420261006138,"ib":1.1700044089876216,"day":"10/1/2013","fud":9.0},{"po":1.18170730571926,"ti":1.054206708857463,"ib":1.640558785618785,"day":"9/1/2013","fud":5.0},{"po":1.177010369685469,"ti":1.3363932933768303,"ib":1.9492835533868067,"day":"8/1/2013","fud":27.0},{"po":1.5515669172932331,"ti":1.2888583218707015,"ib":2.6429013320363666,"day":"7/1/2013","fud":19.0},{"po":1.1100477723138789,"ti":1.051738946878048,"ib":2.6776077964220524,"day":"6/1/2013","fud":1.0},{"po":1.0712161948442196,"ti":1.0191429899580513,"ib":2.400560366082305,"day":"5/1/2013","fud":11.0},{"po":0.9662921348314608,"ti":1.2076028752358472,"ib":2.6371979222400572,"day":"4/1/2013","fud":7.0},{"po":1.121200030399757,"ti":1.2751653967240042,"ib":2.8732062219569188,"day":"3/1/2013","fud":3.0},{"po":0.0,"ti":0.0,"ib":0.0,"day":"2/1/2013","fud":0.0}]'}),colorScheme=['scheme01','scheme02','scheme03','scheme04','scheme05','scheme06','scheme07','scheme08','scheme09','scheme10','scheme11'],theme=getTheme(),schemeSetting={source:colorScheme,selectedIndex:0,theme:theme,width:200,height:25},chartSetting={source:da,showToolTips:false,showLegend:false,categoryAxis:{dataField:'day',textRotationAngle:60,showGridLines:false},enableAnimations:true,seriesGroups:[{type:'line',valueAxis:{showGridLines:false},columnsGapPercent:50,series:[{showLabels:true}]}]},ib={};$.extend(true,ib,chartSetting);ib.title='IB % to plan';ib.seriesGroups[0].valueAxis.formatFunction=pct;ib.seriesGroups[0].series[0].dataField='ib';ib.seriesGroups[0].series[0].formatFunction=pct;$("#ib_pct_to_plan").jqxChart(ib);$("#scheme1").jqxDropDownList(schemeSetting);connectScheme('scheme1','ib_pct_to_plan');var ti={};$.extend(true,ti,chartSetting);ti.title='Trans in % to plan';ti.seriesGroups[0].valueAxis.formatFunction=pct;ti.seriesGroups[0].series[0].dataField='ti';ti.seriesGroups[0].series[0].formatFunction=pct;$("#trans_in_pct_to_plan").jqxChart(ti);$("#scheme2").jqxDropDownList(schemeSetting);connectScheme('scheme2','trans_in_pct_to_plan');var po={};$.extend(true,po,chartSetting);po.title='PO stow % to plan';po.seriesGroups[0].valueAxis.formatFunction=pct;po.seriesGroups[0].series[0].dataField='po';po.seriesGroups[0].series[0].formatFunction=pct;$("#po_stow_pct_to_plan").jqxChart(po);$("#scheme3").jqxDropDownList(schemeSetting);connectScheme('scheme3','po_stow_pct_to_plan');var fud={};$.extend(true,fud,chartSetting);fud.title='Fud';fud.seriesGroups[0].series[0].dataField='fud';$("#fud").jqxChart(fud);$("#scheme4").jqxDropDownList(schemeSetting);connectScheme('scheme4','fud')})

January 16, 2013 at 2:51 pm Date in category work inproperly #13705

Dimitar

Participant

Hi Magicloud,

Here is a solution – set the formatFunction property of the categoryAxis, i.e.:

                categoryAxis: {
                    dataField: 'day',
                    textRotationAngle: 0,
                    showGridLines: false,
                    formatFunction: function (value) {
                        return value.getUTCDate() + "." + (value.getUTCMonth() + 1) + "." + value.getUTCFullYear();
                    }
                },

Now all the labels display. You can, of course, modify the formatFunction itself.

Best Regards,
Dimitar

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

January 17, 2013 at 2:37 am Date in category work inproperly #13731

Magicloud

Member

Finally make it work.
I followed demos that transfered my date to jqwidgets by the format of 25/3/2013. This actually cannot work here (locale problem? I do not know). After I changed it to 3/25/2013, every value now is date object.

Author

Posts

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

You must be logged in to reply to this topic.