jQuery UI Widgets Forums Chart Labels not rolling off the left of the x-axis

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • Al
    Participant

    I was trying to use the live updates demo and modified the update function (that was originally auto update timer driven) to feed from backtesting engine, that essentially send several time sequential messages timestamps from the past as follows 2 hours from a certain date in the past, everything works fine but the labels are not rolling off to the left of the x axis as I would expect, so at the end of the run the x-axis labels are all overlapped. Please advice:

    var chart = $(‘#chartContainer’).jqxChart(‘getInstance’);
    function (message) {

    var data = chart.source;

    if (data.length >= 60)
    data.splice(0, 1);

    data.push({ timestamp: message.LastUpdate, value: message.Price });
    //$(‘#chartContainer’).jqxChart(‘update’);
    chart.xAxis.minValue = data[0].timestamp;
    chart.xAxis.maxValue = data[data.length-1].timestamp;
    chart.update();
    }


    Al
    Participant

    It was my bad. I was just too many labels into the x axis. changing unitInterval in chart setting did it for me. I would now love to be able to horizontal cross a real-time chart (timeseries). Any pointers there, I will be very grateful.

    thanks


    Dimitar
    Participant

    Hello Al,

    Please check out the following example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>jqxChart Column Series Example</title>
        <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 () {
                // prepare chart data as an array            
                var source =
                {
                    datatype: "csv",
                    datafields: [
                        { name: 'Country' },
                        { name: 'GDP' },
                        { name: 'DebtPercent' },
                        { name: 'Debt' }
                    ],
                    url: '../sampledata/gdp_dept_2010.txt'
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    
                labelsFormatFunction = function (value, itemIndex, serie, group) {
                    if (value < 50000)
                        serie.labelClass = 'redLabel';
                    else
                        serie.labelClass = 'blueLabel';
    
                    return value;
                }
    
                // prepare jqxChart settings
                var settings = {
                    title: "Economic comparison",
                    description: "GDP and Debt in 2010",
                    showLegend: true,
                    enableAnimations: false,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                    //  legendLayout: { top: 150, left: 720 },
                    source: dataAdapter,
                    xAxis:
                        {
                            //  position: 'top',
                            dataField: 'Country',
                            showGridLines: true,
                            valuesOnTicks: false
                        },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 50,
                                showLabels: true,
                                labelsAngle: 90,
                                valueAxis:
                                {
                                    //  unitInterval: 5000,
                                    displayValueAxis: true,
                                    descriptionClass: 'redLabel',
                                    description: 'GDP & Debt per Capita(cash)'
                                },
                                series: [
                                        { dataField: 'GDP', displayText: 'GDP per Capita', formatFunction: labelsFormatFunction },
                                        { dataField: 'Debt', displayText: 'Debt per Capita' }
                                    ]
                            },
                            {
                                type: 'line',
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    displayValueAxis: false,
                                    description: 'Debt (% of GDP)'
                                },
                                series: [
                                        { linesUnselectMode: 'click',
                                            dataField: 'DebtPercent', displayText: 'Debt (% of GDP)'
                                        }
                                    ]
                            }
    
                        ]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
    
            });
        </script>
        <style type="text/css">
            .redLabel
            {
                fill: #FF0000;
                color: #FF0000;
                font-size: 11px;
                font-family: Verdana;
            }
            
            .blueLabel
            {
                fill: #0000FF;
                color: #0000FF;
                font-size: 11px;
                font-family: Verdana;
            }
        </style>
    </head>
    <body class='default'>
        <div id='chartContainer' style="width: 850px; height: 500px;">
        </div>
    </body>
    </html>

    Is this what you require?

    Best Regards,
    Dimitar

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


    Al
    Participant

    Thanks Dimitar. I am confused as to how the value axis displays. I have the following setting:

    type: ‘line’,
    columnsGapPercent: 50,
    alignEndPointsWithIntervals: true,
    valueAxis:
    {
    minValue: 2065.25,
    maxValue: 2075.25,
    unitInterval: 0.25,
    formatSettings:
    {
    decimalPlaces: 2
    },
    description: ‘Index Value’
    },

    I would expect the axis to be 2075.25 – 2065.25 = 10 points long but it isn’t It seems to be sizing base don the data points int eh source array. Can I change that behavior and explicitly set the Value Axis height?

    Thanks again.


    Dimitar
    Participant
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.