jQuery UI Widgets Forums Chart Auto width of X & Y axis

This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 10 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Auto width of X & Y axis #25401

    Hi,
    I am using chart widget for my current application. Data for chart is coming from database and can have any number of values.

    My problem is that, container div of the chart has fixed height & width. If the data returned is of 15 or 20 records, then labels in axes overlaps with one another.

    I have tried to calculate height & width of the container div as per the size of of the data and this is working fine and container div’s height & width is adjusting fine. But each grid has fixed height and that is causing the problem is length of the label is large.

    I have attached the sample code also (this is one of your example) :

    jqxChart Bar Series Example

    $(document).ready(function () {

    // prepare chart data
    var sampleData = [
    { Country: ‘China China China’, Population: 1347350000, Percent: 19.18},
    { Country: ‘India’, Population: 1210193422, Percent: 17.22},
    { Country: ‘USA’, Population: 313912000, Percent: 4.47},
    { Country: ‘Indonesia’, Population: 2000000000, Percent: 3.38},
    { Country: ‘Indonesia’, Population: 2100000000, Percent: 3.38},
    { Country: ‘Indonesia’, Population: 2200000000, Percent: 3.38},
    { Country: ‘Indonesia’, Population: 2300000000, Percent: 3.38},
    { Country: ‘Indonesia’, Population: 2400000000, Percent: 3.38},
    { Country: ‘Indonesia’, Population: 2500000000, Percent: 3.38},
    { Country: ‘Indonesia’, Population: 2600000000, Percent: 3.38},
    { Country: ‘Indonesia’, Population: 237641326, Percent: 3.38},
    { Country: ‘Indonesia’, Population: 237641326, Percent: 3.38},
    { Country: ‘Indonesia’, Population: 237641326, Percent: 3.38},
    { Country: ‘Indonesia’, Population: 237641326, Percent: 3.38},
    { Country: ‘Brazil’, Population: 192376496, Percent: 2.74}];

    // prepare jqxChart settings
    var settings = {
    title: “Top 5 most populated countries”,
    description: “Statistics for 2011″,
    showLegend: true,
    enableAnimations: true,
    padding: { left: 20, top: 5, right: 20, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    categoryAxis:
    {
    dataField: ‘Country’,
    showGridLines: true,
    flip: false
    },
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘column’,
    orientation: ‘horizontal’,
    columnsGapPercent: 100,
    toolTipFormatSettings: { thousandsSeparator: ‘,’ },
    valueAxis:
    {
    flip: true,
    unitInterval: 100000000,
    //maxValue: 1500000000,
    displayValueAxis: true,
    description: ”,
    formatFunction: function (value) {
    return parseInt(value / 1000000);
    }
    },
    series: [
    { dataField: ‘Population’, displayText: ‘Population (millions)’ }
    ]
    }
    ]
    };
    calculateTargetHeightWidth(sampleData,’Population’,’Country’,’jqxChart’);
    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);
    });

    function calculateTargetHeightWidth(data,xCol,yCol,target){
    var cnt = data.length;
    //console.log(data);
    if(!cnt){
    return false;
    }
    var width = height = 0;
    for(var i=0;i<cnt ;i++){
    height += parseFloat(data[i][yCol].length*11);
    width += parseFloat(data[i][xCol].toString().length*7);
    //console.log('V='+data[i][yCol]+'—L='+data[i][yCol].length);
    }
    //alert(width);
    $('#'+target).css('height',height);
    $('#'+target).css('width',width);
    }

    Any help will be much appreciated.

    Auto width of X & Y axis #25457

    Dimitar
    Participant

    Hello dbhattacharjee,

    We tested your sample code and did not encounter any issues. Please, update to the latest version of jQWidgets (2.9.3) and share your feedback.

    Best Regards,
    Dimitar

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

    Auto width of X & Y axis #56288

    thuyein03
    Participant

    Hello support team,

    I am trying for the dynamic height of my Jqwidget column chart. I couldn’t try with the above code (the code dbhattacharjee is using) as my dataAdapter is changing depend on the database query. So that I couldn’t pass the fixed value to xCol and yCol parameters of ‘calculateTargetHeightWidth’ function.

    I would be very appreciate if you could advice me how to make the dynamic width and heigh of Jqwidget charts.

    I am looking forward to hearing from you.

    Many Thanks
    Thu

    Here is my sample data and it is changing depend on the database query.

    [
    {“Dimension”:”Harlow Carr”,”Concessionary (P)”:25,”Concessionary Joint Life (LCJ)”:1,”Concessionary Life (LC)”:25,”Family associate – tied to FAM”:1,”Family Associate – tied to G (“:null,”Family Member G (FMG)”:268,”GA Individual Member (I)”:50039,”GA Joint Member 1 (J)”:5515,”GA Joint Member 2 (JA)”:53,”GA Life Member (NL)”:86,”GA New Joint Life (NJL)”:2,”GA Student Member (NS)”:12,”GA Student Member (NUS)”:381,”Garden Explorer Single Member “:4,”Honorary Fellow (H)”:1,”Individual (F)”:10646,”Individual (NH)”:3530,”Individual + 1 associate (FAM1″:144,”Joint Life Member (LJ)”:3,”Life Member (L)”:8,”Life Member (LN)”:356,”Member of Honour (HA)”:22,”Senior Life Member (SLM)”:25,”Under 25\u0027s membership (S)”:18},
    {“Dimension”:”Hyde Hall”,”Concessionary (P)”:41,”Concessionary Joint Life (LCJ)”:2,”Concessionary Life (LC)”:26,”Family associate – tied to FAM”:2,”Family Associate – tied to G (“:2,”Family Member G (FMG)”:197,”GA Individual Member (I)”:39301,”GA Joint Member 1 (J)”:3263,”GA Joint Member 2 (JA)”:38,”GA Life Member (NL)”:60,”GA New Joint Life (NJL)”:4,”GA Student Member (NS)”:13,”GA Student Member (NUS)”:252,”Garden Explorer Single Member “:3,”Honorary Fellow (H)”:7,”Individual (F)”:10303,”Individual (NH)”:37,”Individual + 1 associate (FAM1″:222,”Joint Life Member (LJ)”:null,”Life Member (L)”:11,”Life Member (LN)”:191,”Member of Honour (HA)”:15,”Senior Life Member (SLM)”:14,”Under 25\u0027s membership (S)”:12},
    {“Dimension”:”Rosemoor”,”Concessionary (P)”:23,”Concessionary Joint Life (LCJ)”:null,”Concessionary Life (LC)”:23,”Family associate – tied to FAM”:null,”Family Associate – tied to G (“:1,”Family Member G (FMG)”:104,”GA Individual Member (I)”:22512,”GA Joint Member 1 (J)”:1825,”GA Joint Member 2 (JA)”:15,”GA Life Member (NL)”:56,”GA New Joint Life (NJL)”:null,”GA Student Member (NS)”:6,”GA Student Member (NUS)”:152,”Garden Explorer Single Member “:3,”Honorary Fellow (H)”:1,”Individual (F)”:6537,”Individual (NH)”:27,”Individual + 1 associate (FAM1″:157,”Joint Life Member (LJ)”:2,”Life Member (L)”:14,”Life Member (LN)”:153,”Member of Honour (HA)”:14,”Senior Life Member (SLM)”:8,”Under 25\u0027s membership (S)”:2},
    {“Dimension”:”Wisley”,”Concessionary (P)”:192,”Concessionary Joint Life (LCJ)”:4,”Concessionary Life (LC)”:216,”Family associate – tied to FAM”:21,”Family Associate – tied to G (“:3,”Family Member G (FMG)”:1408,”GA Individual Member (I)”:129801,”GA Joint Member 1 (J)”:17560,”GA Joint Member 2 (JA)”:152,”GA Life Member (NL)”:252,”GA New Joint Life (NJL)”:11,”GA Student Member (NS)”:27,”GA Student Member (NUS)”:946,”Garden Explorer Single Member “:11,”Honorary Fellow (H)”:6,”Individual (F)”:43259,”Individual (NH)”:74,”Individual + 1 associate (FAM1″:2315,”Joint Life Member (LJ)”:7,”Life Member (L)”:27,”Life Member (LN)”:724,”Member of Honour (HA)”:34,”Senior Life Member (SLM)”:74,”Under 25\u0027s membership (S)”:26}]

    Auto width of X & Y axis #56296

    Dimitar
    Participant

    Hello thuyein03,

    We suggest you pass the calculateTargetHeightWidth function the values you pass to the categoryAxis dataField and the series dataField properties.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.