Labels not rolling off the left of the x-axis - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, horizontal cross, jqxChart, label, live update, series, update

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

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

Author

Labels not rolling off the left of the x-axis Posts

November 29, 2014 at 12:06 am Labels not rolling off the left of the x-axis #63530

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();
}

November 29, 2014 at 4:19 am Labels not rolling off the left of the x-axis #63531

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

December 2, 2014 at 6:30 am Labels not rolling off the left of the x-axis #63617

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/

December 3, 2014 at 10:14 pm Labels not rolling off the left of the x-axis #63745

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.

December 4, 2014 at 6:39 am Labels not rolling off the left of the x-axis #63762

Dimitar

Participant

Duplicate post: http://www.jqwidgets.com/community/topic/valueaxis-max-and-min/.

Author

Posts

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

You must be logged in to reply to this topic.