CODEWITHSUNDEEP
javascriptjquerychartsamcharts
Jyothish
Jyothish

Reputation: 561

AM chart not showing the date axis correctly

I am totally new to AM chart, trying to build bar chart and line chart with provided datasource with category axis as date and set parseDates= true. While rendering chart, months appears to be shifting. For the given data, when drilled down to months, say April bar is sitting on May grid line (as in fig), how do I shift it back in the right order, when in yearly view Dec sits on next year grid line ( Dec 2004 sits on on year 2005). Is there anyway to fix it?

I have my category axis as follow

            "categoryAxis": {
                "minPeriod": "hh",
                "parseDates": true,
                "labelRotation": 45,
               "labelOffset": 0,
              "centerLabelOnFullPeriod": false,
               "dateFormats": [ 
                               {period:'hh',format:'JJ:NN'},
                                {period:'DD',format:'MMM DD'},
                               {period:'WW',format:'MMM DD'},
                               {period:'MM',format:'MMM YYYY'},
                               { period: 'YYYY', format: 'YYYY' }],

Any help on this greatly appreciated,

JSFiddle is provided

enter image description here

Upvotes: 1

Views: 2293

Answers (3)

whatAboutJohn
whatAboutJohn

Reputation: 773

Try adding equalSpacing property

categoryAxis: {
  parseDates: true,
  equalSpacing: true,
}

To manually adjust the size, use columnWidth

graphs: [{
  type: 'column',
  columnWidth: .5 // Half of a full column
}]

Upvotes: 0

Jyothish
Jyothish

Reputation: 561

I changed the column width to "columnWidth": 0.5, set "minPeriod": "MM", and "dateFormats": [ 

                                {period:'MM',format:'MMM YYYY'},
                                { period: 'YYYY', format: 'YYYY' }],

It worked for me, Thanks for helping me Simon, you gave me the insight,

Upvotes: 0

Simon
Simon

Reputation: 708

Having looked at your data I can see that when you are adding into your graph you are placing a value on the last day of the month. If you could put the value as the first of every month instead then you will get the data to show as you are wanting.

For example, instead of using...

{ "DateField": "2009-05-31T00:00:00", "Value1": 126.00, "Value2": -46.00, "Value3": 80.00, "Value4": 172.00 }
{ "DateField": "2009-06-30T00:00:00", "Value1": 132.00, "Value2": -49.00, "Value3": 83.00, "Value4": 181.00 }

use this instead...

{ "DateField": "2009-05-01T00:00:00", "Value1": 126.00, "Value2": -46.00, "Value3": 80.00, "Value4": 172.00 }
{ "DateField": "2009-06-01T00:00:00", "Value1": 132.00, "Value2": -49.00, "Value3": 83.00, "Value4": 181.00 }

I have also spotted that you have an error in your graph components. You have spelt lineThickness as liValue3hickness

            {
                "balloonText": "[[title]]: [[value]]% ([[category]])",
                "liValue3hickness": 3,     /*SHOULD BE "lineThickness" : 3,*/
                "title": "Value3",
                "valueField": "Value3",
                "lineColor": "#FFC000"
            }

Upvotes: 1

Related Questions