jQuery UI Widgets Forums Chart Chat not rendering properly

Tagged: 

This topic contains 1 reply, has 1 voice, and was last updated by  nitrags 13 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Chat not rendering properly #6205

    nitrags
    Member

    Here is the data that I am using to render chart. Basically if the data has more than 13-14 lines the axis stars skipping. Any help is appreciated.

    .jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-tooltip-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
    {
    fill: #ffffff;
    color: #ffffff;
    }

    $(document).ready(function () {
    var theme = getTheme();
    var parentsLength = $(“#jqxgrid”).parents().length;
    var PortfolioSummarySimpleDAta =
    [
    { “Region”: “NA1”, “Peril”: “WS”, “Perspective”: “Re Net”, “StdDev”: 7144852.28766816, “ExpectedLoss”: 5164902.46431122, “CV”: 4059.3833469919 },
    { “Region”: “NA2”, “Peril”: “WS”, “Perspective”: “Re Ceded”, “StdDev”: 19904.2917181813, “ExpectedLoss”: 4059.3990633445, “CV”: 95467381.903260657 },
    { “Region”: “NA3”, “Peril”: “WS”, “Perspective”: “Re 100%”, “StdDev”: 196321650.289551, “ExpectedLoss”: 95467381.52120249, “CV”: 7144852.056426469 },
    { “Region”: “NA4”, “Peril”: “WS”, “Perspective”: “Re Gross”, “StdDev”: 7158717.5120722707, “ExpectedLoss”: 5168961.86337456, “CV”: 19904.3849429927},

    { “Region”: “NA5”, “Peril”: “EQ”, “Perspective”: “Re Net”, “StdDev”: 7144852.28766816, “ExpectedLoss”: 5164902.46431122, “CV”: 4059.3833469919 },
    { “Region”: “NA6”, “Peril”: “EQ”, “Perspective”: “Re Ceded”, “StdDev”: 19904.2917181813, “ExpectedLoss”: 4059.3990633445, “CV”: 95467381.903260657 },
    { “Region”: “NA7”, “Peril”: “EQ”, “Perspective”: “Re 100%”, “StdDev”: 196321650.289551, “ExpectedLoss”: 95467381.52120249, “CV”: 7144852.056426469 },
    { “Region”: “NA8”, “Peril”: “EQ”, “Perspective”: “Re Gross”, “StdDev”: 7158717.5120722707, “ExpectedLoss”: 5168961.86337456, “CV”: 19904.3849429927 },

    { “Region”: “AU9”, “Peril”: “WS”, “Perspective”: “Re Net”, “StdDev”: 7144852.28766816, “ExpectedLoss”: 5164902.46431122, “CV”: 4059.3833469919 },
    { “Region”: “AU10”, “Peril”: “WS”, “Perspective”: “Re Ceded”, “StdDev”: 19904.2917181813, “ExpectedLoss”: 4059.3990633445, “CV”: 95467381.903260657 },
    { “Region”: “AU11”, “Peril”: “WS”, “Perspective”: “Re 100%”, “StdDev”: 196321650.289551, “ExpectedLoss”: 95467381.52120249, “CV”: 7144852.056426469 },
    { “Region”: “AU12”, “Peril”: “WS”, “Perspective”: “Re Gross”, “StdDev”: 7158717.5120722707, “ExpectedLoss”: 5168961.86337456, “CV”: 19904.3849429927},

    { “Region”: “NA14”, “Peril”: “EQ”, “Perspective”: “Re Net”, “StdDev”: 7144852.28766816, “ExpectedLoss”: 5164902.46431122, “CV”: 4059.3833469919 },
    { “Region”: “NA15”, “Peril”: “EQ”, “Perspective”: “Re Ceded”, “StdDev”: 19904.2917181813, “ExpectedLoss”: 4059.3990633445, “CV”: 95467381.903260657 },
    { “Region”: “NA16”, “Peril”: “EQ”, “Perspective”: “Re 100%”, “StdDev”: 196321650.289551, “ExpectedLoss”: 95467381.52120249, “CV”: 7144852.056426469 },
    { “Region”: “NA17”, “Peril”: “EQ”, “Perspective”: “Re Gross”, “StdDev”: 7158717.5120722707, “ExpectedLoss”: 5168961.86337456, “CV”: 19904.3849429927 },

    ];

    var PortfolioSummarySimpleDAta2 =
    [{ “Region”: “CB”, “Peril”: “EQ”, “Perspective”: “Re Net”, “StdDev”: 1644603.97272874, “ExpectedLoss”: 581778.29854372, “CV”: 2.8268568574 },
    { “Region”: “CB”, “Peril”: “EQ”, “Perspective”: “Re Ceded”, “StdDev”: 2972.1155932359, “ExpectedLoss”: 121.9865951096, “CV”: 24.3642802766 },
    { “Region”: “CB”, “Peril”: “EQ”, “Perspective”: “Re 100%”, “StdDev”: 44302101.6917414, “ExpectedLoss”: 9517849.9252033513, “CV”: 4.654633351 },
    { “Region”: “CB”, “Peril”: “EQ”, “Perspective”: “Re Gross”, “StdDev”: 1645268.14612124, “ExpectedLoss”: 581900.285138829, “CV”: 2.8274056366 }
    ];

    // prepare jqxChart settings
    var settings = {
    title: “TEST HEADING”,
    description: “TEST DESC”,
    axisSize: ‘auto’,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: PortfolioSummarySimpleDAta,
    backgroundColor: ‘Gray’,

    enableAnimations: true,
    categoryAxis:
    {
    dataField: ‘Region’,
    showGridLines: false
    },
    colorScheme: ‘scheme09’,
    seriesGroups:
    [
    {
    type: ‘column’,
    columnsGapPercent: 30,
    seriesGapPercent: 0,
    valueAxis:
    {
    minValue: 0,
    maxValue: 10000000,
    unitInterval: 1000000,
    description: ‘TestDESC’
    },
    series: [
    { dataField: ‘StdDev’, displayText: ‘StdDev’ },
    { dataField: ‘ExpectedLoss’, displayText: ‘StdDev’ },
    { dataField: ‘CV’, displayText: ‘CV’ },

    ]
    }
    ,
    {
    type: ‘line’,
    valueAxis:
    {
    unitInterval: 10000,
    displayValueAxis: false,
    description: ‘StdDev’
    },
    series: [
    { dataField: ‘StdDev’, displayText: ‘-StdDev-‘, opacity: 0.3 }
    ]
    }
    ]
    };

    // prepare jqxChart settings
    var settings2 = {
    title: “Fitness & exercise weekly scorecard”,
    description: “Time spent in vigorous exercise”,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: PortfolioSummarySimpleDAta2,
    enableAnimations: true,
    categoryAxis:
    {
    dataField: ‘Region’,
    showGridLines: false
    },
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘column’,
    columnsGapPercent: 30,
    seriesGapPercent: 0,
    valueAxis:
    {
    minValue: 0,
    maxValue: 10000000,
    unitInterval: 1000000,
    description: ‘Time in minutes’
    },
    series: [
    { dataField: ‘StdDev’, displayText: ‘StdDev’ },
    { dataField: ‘ExpectedLoss’, displayText: ‘StdDev’ },

    ]
    }
    ,
    {
    type: ‘line’,
    valueAxis:
    {
    unitInterval: 10000,
    displayValueAxis: false,
    description: ‘StdDev’
    },
    series: [
    { dataField: ‘StdDev’, displayText: ‘-StdDev-‘, opacity: 0.3 }
    ]
    }
    ]
    };

    // select the chartContainer DIV element and render the chart.
    $(‘#chartContainer’).jqxChart(settings);
    $(‘#chartContainer2’).jqxChart(settings2);
    $(‘#chartContainer2’).jqxChart({ backgroundColor: ‘Gray’ });

    //Document ready function close

    });

    Chat not rendering properly #6206

    nitrags
    Member

    This has already answered in http://www.jqwidgets.com/community/topic/x-axis-labeling-for-chart-column-are-not-correctly-labeled/

    Sorry for a duplicate post. This works!!! Thank you

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

You must be logged in to reply to this topic.