jQWidgets Forums

jQuery UI Widgets Forums Angular jqxchart valueAxis User Defined

This topic contains 6 replies, has 3 voices, and was last updated by  Ivo Zhulev 7 years, 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • jqxchart valueAxis User Defined #97806

    mdaslamknl
    Participant

    Hello

    I am using line, i use other charts like highcharts, i can able to change the values, but in jqxchart i am not able to do below is the images 1. working other charts 2. jqxcharts

    1. 1.Other Chart.png
    2. 2.jqxchart line series.png

    Other Charts
    jqxcharts

    Below Images
    other charts working

    jqxCharts line series

    looking forward, hoping to get the solutions ASAP

    Best Regards

    below is my angular component code

       LowNew=this.Low;
            HighNew=this.High;
            this.categoryAxis =
                {
                    dataField: 'Month',
                    // minValue:LowNew,
                    // maxValue:HighNew, 
                },
                this.xAxis =
                {
                    // source:this.MonthNames,
                    // dataField:'Month',
                    //     source:this.MonthNames.sort,
                    //     dataField: 'Month',
                    //   formatFunction: (value: any) => {
                    //      return  this.MonthNames[value.getMonth()];
                    //   },
                    //     // formatFunction: (value: any) => {
                    //     //     return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                    //     // },
                    //    type: 'date',
                    //    baseUnit: 'month',
                    //     valuesOnTicks: true,
                    //    minValue: this.MonthNames[0],
                    //    maxValue: 'Nov',   
        
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    unitInterval: 1,
                    gridLines: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    labels: {
                        angle: 0,
                        rotationPoint: 'topright',
                        offset: { x: 0, y: 0 }
                    }
                };
    
            this.valueAxis =
                {
                    minValue: 0,
                    maxValue: 100,
                    unitInterval: 10,
                    title: { text: 'Time in minutes' },
                    tickMarks: { color: '#CACACA' },
                    gridLines: { color: '#CACACA' }
                };
            // this.yAxis={
            //     // minValue:0,
            //     // maxValue:8000,
    
            // }
    
            this.seriesGroups =
                [
                    {
                        type: 'line',
                        valueAxis:
                        {
                            visible: true,
                            minValue:LowNew,
                            maxValue:HighNew,
                            // unitInterval: 20,
                            //title: { text: 'Index Value' },
                            labels: {
                                horizontalAlignment: 'right',
                                //formatSettings: { decimalPlaces: 0 }
                                formatFunction: (value: any) => {
                                    //return Math.round(value / 1000) + 'K';
                                    if (lastChar == '#') {
                                        if (value > 1000000000) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000000000)) + 'B';
                                        }
                                        else if (value > 1000000) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000000)) + 'M';
                                        }
                                        else if (value >= 1000) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000)) + 'K';
                                        }
                                        else {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value));
                                        }
                                    }
                                    else if (lastChar == '$') {
                                        // return '$'+Intl.NumberFormat('en-US').format(Math.round(this.value));
                                        if (value > 1000000000) {
                                            return '$' + Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value / 1000000000) + 'B';
                                        }
                                        else if (value > 1000000) {
                                            return '$' + Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value / 1000000) + 'M';
                                        }
                                        else if (value >= 1000) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000)) + 'K';
                                        }
                                        else {
                                            return '$' + Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Math.round(value));
                                        }
                                    }
                                    else {
                                        //console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
                                        //return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2,maximumFractionDigits:2}).format(this.value) +'%';
                                        if (mWidgetName.toLowerCase() == "average term") {
                                            return new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(value);
                                        }
                                        else {
                                            return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value) + '%';
                                        }
                                    }
                                }
                            }
                        },
                        series: [
                            { DataSource: this.objTrendDataArr, dataField: 'MarketAvgVal', displayText: 'Market average value' },
                            { DataSource: this.objTrendDataArr, dataField: 'MediumAvgVal', displayText: 'Medium average value' },
                            // {DataSource:this.chartData,dataField: 'NASDAQ', displayText: 'NASDAQ' }
                            // { dataField: 'S&P 500', displayText: 'S&P 500' },
                            // { dataField: 'NASDAQ', displayText: 'NASDAQ' }
                        ]
                    }
                ];
    jqxchart valueAxis User Defined #97810

    Peter Stoev
    Keymaster

    Hi mdaslamknl,

    The lastChar is undefined in the code. Most probably that is the reason it does not format the valueAxis labels in your case.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    jqxchart valueAxis User Defined #97946

    mdaslamknl
    Participant

    Hello

    I have defined the lastChar also but the debugger is not hitting below is the code

    what i need is # this is count, $ amount, % is percentage as per the chart type it should display in front of that
    # it should display 100,00
    $ it should be $ 123,123
    % 10%

    and low and high value as the user defined, from data i am getting low and high so that only should display not from 0

    and formatting i am using formatFunction as the code below

        LoadLineSeries() {
    
            //let grouped = groupBy(this.SampleDataList, SingleChart => SingleChart.Month);
            this.objTrendDataArr = new Array<TrendTypesDataModel>();
            this.SampleDataList = JSON.parse(this.chartData.SampleData);
            $(".chartcontainer").addClass("showTrend");
            var groupBy = function (array, predicate) {
                var grouped = {};
                for (var i = 0; i < array.length; i++) {
                    var groupKey = predicate(array[i]);
                    if (typeof (grouped[groupKey]) === "undefined")
                        grouped[groupKey] = [];
                    grouped[groupKey].push(array[i]);
                }
    
                return grouped;
            }
    
            var groupData = groupBy(this.SampleDataList, function (obj) {
                return obj.Month;
            });
    
            // function MyClientID(element, index, array) { 
            //    return (1); 
            // } 
    
            var optGroups = [];
            this.MediumArr = [];
            this.MarketAverage = [];
            for (var key in groupData) {
                if (groupData.hasOwnProperty(key)) {
    
                    var objTrendData = new TrendTypesDataModel();
    
                    //var optGroup = $("<optgroup></optgroup>");
                    //optGroup.attr("label", key);
                    let currentGroup = groupData[key];
                    this.MonthNames.push(key);
    
                    objTrendData.Month = key;
    
                    var total = 0;
                    let subtotal = 0;
                    for (var i = 0; i < currentGroup.length; i++) {
                        //$("<option />").attr("value", currentGroup[i].id).html(currentGroup[i].name).appendTo(optGroup);
    
                        //console.log("Value  " + currentGroup[i].LowHigh);
                        if (currentGroup[i].ClientID == 1) {
                            subtotal += currentGroup[i].LowHigh;
                            //this.MediumArr.push(currentGroup[i].LowHigh);                 
                        }
                        total += currentGroup[i].LowHigh;
                        //this.center=(this.Low+this.High)/2;           
                    }
                    this.MediumArr.push(subtotal);
                    objTrendData.MediumAvgVal = Number(subtotal);
                    subtotal = 0;
                    this.MarketAverage.push(total / currentGroup.length);
    
                    objTrendData.MarketAvgVal = Number(total / currentGroup.length);
                    this.objTrendDataArr.push(objTrendData);
                    //optGroups.push(optGroup);
                }
    
            }
    
            this.LowNMediumAverage = (this.Low + this.center) / 2;
            this.MediumNHighAverage = (this.center + this.High) / 2;
    
            this.Middle = this.chartData.Middle;
            this.Value.push(this.chartData.Middle);
            this.WidgetName = this.chartData.WidgetName;
            this.mWidgetName=this.WidgetName;
    
            //Widget Type
            this.WidgetType = this.chartData.WidgetType;
            this.TotalValue = (this.chartData.Low + this.chartData.High + this.Middle);
            this.Low = this.chartData.Low;
            this.High = this.chartData.High;
            this.ValueP = this.chartData.Middle;
    
            this.center = (this.Low + this.High) / 2;
    
            this.LowNMediumAverage = (this.Low + this.center) / 2;
            this.MediumNHighAverage = (this.center + this.High) / 2;
    
            //To get last char from widget name
            var lastChar = this.WidgetName.charAt(this.WidgetName.length - 1);
            this.mWidgetName=this.WidgetName;
            if (this.mWidgetName == "AVERAGE DISCOUNT") {
                debugger;
            }
    
            switch (this.WidgetType) {
                case "COUNT":
                    {
                        lastChar = "#"
                        break;
                    }
                case "SUM":
                    {
                        lastChar = "$"
                        break;
                    }
                case "PERCENTAGE":
                    {
                        lastChar = "%"
                        break;
                    }
                default:
                    lastChar = "#"
                    break;
            }
            
            this.widgetSettings = JSON.parse(this.ChartSettings)
    
            var NewLowValue;
            var LowNew;
            var HighNew;
    
            if (this.mWidgetName.toLocaleLowerCase() == "average ltv" || this.mWidgetName.toLocaleLowerCase() == "average pti"
                || this.mWidgetName.toLocaleLowerCase() == "average term" || this.mWidgetName.toLocaleLowerCase() == "average apr") {
    
                //NewLowValue=(this.Low-(this.Low*10)/100);
                NewLowValue = this.Low;
            }
            else {
                NewLowValue = 0;
            }
            this.source =
                {
                    /*datatype: "csv",
                    datafields: [
                        { name: 'Date' },
                        { name: 'S&P 500' },
                        { name: 'NASDAQ' }
                    ],
                    url: '../sampledata/nasdaq_vs_sp500.txt'*/
                };
    
            this.dataAdapter = new jqx.dataAdapter(this.objTrendDataArr, { async: false, autoBind: true, loadError: (xhr: any, status: any, error: any) => { alert('Error loading "' + this.source.url + '" : ' + error); } });
    
            //  this.padding = { left: 10, top: 5, right: 10, bottom: 5 };
    
            //   this.titlePadding = { left: 50, top: 0, right: 0, bottom: 10 };
    
            LowNew=this.Low;
            HighNew=this.High;
            this.categoryAxis =
                {
                    dataField: 'Month',
                    // minValue:LowNew,
                    // maxValue:HighNew, 
                },
                this.xAxis =
                {
                    // source:this.MonthNames,
                    // dataField:'Month',
                    //     source:this.MonthNames.sort,
                    //     dataField: 'Month',
                    //   formatFunction: (value: any) => {
                    //      return  this.MonthNames[value.getMonth()];
                    //   },
                    //     // formatFunction: (value: any) => {
                    //     //     return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                    //     // },
                    //    type: 'date',
                    //    baseUnit: 'month',
                    //     valuesOnTicks: true,
                    //    minValue: this.MonthNames[0],
                    //    maxValue: 'Nov',   
        
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    unitInterval: 1,
                    gridLines: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    labels: {
                        angle: 0,
                        rotationPoint: 'topright',
                        offset: { x: 0, y: 0 }
                    },
                    formatFunction: (value: any) => {
                        debugger;
                        if (this.mWidgetName == "AVERAGE DISCOUNT") {
                            debugger;
                        }
                    },
                };
    
            this.valueAxis =
                {
                minValue: LowNew,
                maxValue: HighNew,
                unitInterval: this.LowNMediumAverage,
                    title: { text: 'Time in minutes' },
                    tickMarks: { color: '#CACACA' },
                    gridLines: { color: '#CACACA' }
                },
              
            // this.yAxis={
            //     // minValue:0,
            //     // maxValue:8000,
    
            // }
    
            this.seriesGroups =
                [
                    {
                        type: 'line',
                        valueAxis:
                        {
                            visible: true,
                            minValue:LowNew,
                            maxValue:HighNew,
                            unitInterval: this.LowNMediumAverage,
                            //title: { text: 'Index Value' },
                            labels: {
                                horizontalAlignment: 'right',
                                // formatSettings: { decimalPlaces: 0, sufix: '%' },
                                formatFunction: (value: any) => {
                                    //Old Code
                                    // if (lastChar == '#') {
                                    //     if (value > 1000000000) {
                                    //         return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000000000)) + 'B';
                                    //     }
                                    //     else if (value > 1000000) {
                                    //         return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000000)) + 'M';
                                    //     }
                                    //     else if (value >= 1000) {
                                    //         return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000)) + 'K';
                                    //     }
                                    //     else {
                                    //         return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value));
                                    //     }
                                    // }
                                    // else if (lastChar == '$') {
                                    //     // return '$'+Intl.NumberFormat('en-US').format(Math.round(this.value));
                                    //     if (value > 1000000000) {
                                    //         return '$' + Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value / 1000000000) + 'B';
                                    //     }
                                    //     else if (value > 1000000) {
                                    //         return '$' + Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value / 1000000) + 'M';
                                    //     }
                                    //     else if (value >= 1000) {
                                    //         return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000)) + 'K';
                                    //     }
                                    //     else {
                                    //         return '$' + Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Math.round(value));
                                    //     }
                                    // }
                                    // else {
                                    //     //console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
                                    //     //return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2,maximumFractionDigits:2}).format(this.value) +'%';
                                    //     if (mWidgetName.toLowerCase() == "average term") {
                                    //         return new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(value);
                                    //     }
                                    //     else {
                                    //         return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value) + '%';
                                    //     }
                                    // }
    
                                    //New Code Starts Here
                                    debugger;
                                    this.SolidGaugeDataLabel = Number(value);
                                    //this.FormatedValue = Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel);
                                    if (lastChar == '#') {
                                        if (this.mWidgetName == "BOOKED AVERAGE TERM") {
                                            debugger;
                                        }
                                        if (this.SolidGaugeDataLabel > 1 && this.SolidGaugeDataLabel <= 999) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel);
                                        }
                                        if (this.SolidGaugeDataLabel > 999 && this.SolidGaugeDataLabel <= 9999) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel / 1000) + 'K';
                                        }
                                        if (this.SolidGaugeDataLabel > 9999 && this.SolidGaugeDataLabel <= 999999) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel / 10000) + 'K';
                                        }
                                        else if (this.SolidGaugeDataLabel > 999999 && this.SolidGaugeDataLabel <= 9999999) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel / 1000000) + 'M';
                                        }
                                        else if (this.SolidGaugeDataLabel > 9999999) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel / 10000000) + 'M';
                                        }
                                        else {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel);
                                        }
                                    }
                                    else if (lastChar == '$') {
                                        if (this.mWidgetName == "APPROVAL$") {
                                            debugger;
                                        }
    
                                        if (this.SolidGaugeDataLabel > 1 && this.SolidGaugeDataLabel <= 999) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel);
                                        }
                                        if (this.SolidGaugeDataLabel > 999 && this.SolidGaugeDataLabel <= 9999) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel / 1000) + 'K';
                                        }
                                        else if (this.SolidGaugeDataLabel > 9999 && this.SolidGaugeDataLabel <= 999999) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel / 100000) + 'K';
                                        }
                                        else if (this.SolidGaugeDataLabel > 999999 && this.SolidGaugeDataLabel < 9999999) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel / 1000000) + 'M';
                                        }
                                        else if (this.SolidGaugeDataLabel > 9999999) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel / 10000000) + 'M';
                                        }
                                        else {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel);
                                        }
                                    }
                                    else if (lastChar == '%') {
                                        if (this.mWidgetName == "AVERAGE DISCOUNT") {
                                            debugger;
                                        }
                              
                                        // if (this.SolidGaugeDataLabel > 1 && this.SolidGaugeDataLabel <= 999) {
                                        //     return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        // }
                                        // if (this.SolidGaugeDataLabel > 999 && this.SolidGaugeDataLabel <= 9999) {
                                        //     return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        // }
                                        // else if (this.SolidGaugeDataLabel > 1000 && this.SolidGaugeDataLabel <= 999999) {
                                        //     return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        // }
                                        // else if (this.SolidGaugeDataLabel > 999999 && this.SolidGaugeDataLabel < 9999999) {
                                        //     return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        // }
                                        // else if (this.SolidGaugeDataLabel > 9999999) {
                                        //     return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        // }
                                        // else {
                                        //     return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        // }
                                        return "aa";
                                    }
                                    //New Code Ends Here
                                }
                            }
                        },
                        series: [
                            { DataSource: this.objTrendDataArr, dataField: 'MarketAvgVal', displayText: 'Market average value' },
                            { DataSource: this.objTrendDataArr, dataField: 'MediumAvgVal', displayText: 'Medium average value' },
                            // {DataSource:this.chartData,dataField: 'NASDAQ', displayText: 'NASDAQ' }
                            // { dataField: 'S&P 500', displayText: 'S&P 500' },
                            // { dataField: 'NASDAQ', displayText: 'NASDAQ' }
                        ]
                    }
                ];   
                
            LowNew=this.Low;
            HighNew=this.High;
            this.categoryAxis =
                {
                    dataField: 'Month',
                    // minValue:LowNew,
                    // maxValue:HighNew, 
                },
                this.xAxis =
                {
                    // source:this.MonthNames,
                    // dataField:'Month',
                    //     source:this.MonthNames.sort,
                    //     dataField: 'Month',
                    //   formatFunction: (value: any) => {
                    //      return  this.MonthNames[value.getMonth()];
                    //   },
                    //     // formatFunction: (value: any) => {
                    //     //     return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                    //     // },
                    //    type: 'date',
                    //    baseUnit: 'month',
                    //     valuesOnTicks: true,
                    //    minValue: this.MonthNames[0],
                    //    maxValue: 'Nov',   
        
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    unitInterval: 1,
                    gridLines: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    labels: {
                        angle: 0,
                        rotationPoint: 'topright',
                        offset: { x: 0, y: 0 },
                        formatFunction(value:any)
                        {
                            debugger;
                        }
                    }
                };
    
            this.valueAxis =
                {
                    minValue: 0,
                    maxValue: 100,
                    unitInterval: 10,
                    title: { text: 'Time in minutes' },
                    tickMarks: { color: '#CACACA' },
                    gridLines: { color: '#CACACA' },
                    formatFunction(value:any){
                        debugger;
                    }
                };
            // this.yAxis={
            //     // minValue:0,
            //     // maxValue:8000,
    
            // }
    
            this.seriesGroups =
                [
                    {
                        type: 'line',
                        valueAxis:
                        {
                            visible: true,
                            minValue:LowNew,
                            maxValue:HighNew,
                            // unitInterval: 20,
                            //title: { text: 'Index Value' },
                            labels: {
                                horizontalAlignment: 'right',
                                //formatSettings: { decimalPlaces: 0 }
                                formatFunction: (value: any) => {
                                    //Old Code
                                    // if (lastChar == '#') {
                                    //     if (value > 1000000000) {
                                    //         return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000000000)) + 'B';
                                    //     }
                                    //     else if (value > 1000000) {
                                    //         return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000000)) + 'M';
                                    //     }
                                    //     else if (value >= 1000) {
                                    //         return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000)) + 'K';
                                    //     }
                                    //     else {
                                    //         return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value));
                                    //     }
                                    // }
                                    // else if (lastChar == '$') {
                                    //     // return '$'+Intl.NumberFormat('en-US').format(Math.round(this.value));
                                    //     if (value > 1000000000) {
                                    //         return '$' + Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value / 1000000000) + 'B';
                                    //     }
                                    //     else if (value > 1000000) {
                                    //         return '$' + Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value / 1000000) + 'M';
                                    //     }
                                    //     else if (value >= 1000) {
                                    //         return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(Math.round(value / 1000)) + 'K';
                                    //     }
                                    //     else {
                                    //         return '$' + Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Math.round(value));
                                    //     }
                                    // }
                                    // else {
                                    //     //console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
                                    //     //return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2,maximumFractionDigits:2}).format(this.value) +'%';
                                    //     if (mWidgetName.toLowerCase() == "average term") {
                                    //         return new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(value);
                                    //     }
                                    //     else {
                                    //         return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value) + '%';
                                    //     }
                                    // }
                                    
                                    //New Code
                                    this.SolidGaugeDataLabel = Number(value);
                                    //this.FormatedValue = Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel);
                                    if (lastChar == '#') {
                                        if (this.mWidgetName == "BOOKED AVERAGE TERM") {
                                            //debugger;
                                        }
                                        if (this.SolidGaugeDataLabel > 1 && this.SolidGaugeDataLabel <= 999) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel);
                                        }
                                        if (this.SolidGaugeDataLabel > 999 && this.SolidGaugeDataLabel <= 9999) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel / 1000) + 'K';
                                        }
                                        if (this.SolidGaugeDataLabel > 9999 && this.SolidGaugeDataLabel <= 999999) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel / 10000) + 'K';
                                        }
                                        else if (this.SolidGaugeDataLabel > 999999 && this.SolidGaugeDataLabel <= 9999999) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel / 1000000) + 'M';
                                        }
                                        else if (this.SolidGaugeDataLabel > 9999999) {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel / 10000000) + 'M';
                                        }
                                        else {
                                            return '' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel);
                                        }
                                    }
                                    else if (lastChar == '$') {
                                        if (this.mWidgetName == "APPROVAL$") {
    
                                        }
    
                                        if (this.SolidGaugeDataLabel > 1 && this.SolidGaugeDataLabel <= 999) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel);
                                        }
                                        if (this.SolidGaugeDataLabel > 999 && this.SolidGaugeDataLabel <= 9999) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel / 1000) + 'K';
                                        }
                                        else if (this.SolidGaugeDataLabel > 9999 && this.SolidGaugeDataLabel <= 999999) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel / 100000) + 'K';
                                        }
                                        else if (this.SolidGaugeDataLabel > 999999 && this.SolidGaugeDataLabel < 9999999) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel / 1000000) + 'M';
                                        }
                                        else if (this.SolidGaugeDataLabel > 9999999) {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(this.SolidGaugeDataLabel / 10000000) + 'M';
                                        }
                                        else {
                                            return '$' + Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel);
                                        }
                                    }
                                    else if (lastChar == '%') {
                                        if (this.mWidgetName == "AVERAGE DISCOUNT") {
                                            //debugger;
                                        }
                                        // if (this.Low == this.High) {
                                        //     this.SolidGaugeDataLabel = '';
                                        //     return;
                                        // }                            
                                        if (this.SolidGaugeDataLabel > 1 && this.SolidGaugeDataLabel <= 999) {
                                            return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        }
                                        if (this.SolidGaugeDataLabel > 999 && this.SolidGaugeDataLabel <= 9999) {
                                            return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        }
                                        else if (this.SolidGaugeDataLabel > 1000 && this.SolidGaugeDataLabel <= 999999) {
                                            return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        }
                                        else if (this.SolidGaugeDataLabel > 999999 && this.SolidGaugeDataLabel < 9999999) {
                                            return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        }
                                        else if (this.SolidGaugeDataLabel > 9999999) {
                                            return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        }
                                        else {
                                            return Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(this.SolidGaugeDataLabel) + '%';
                                        }
    
                                    }                                
    
                                }
                            }
                        },
                        series: [
                            { DataSource: this.objTrendDataArr, dataField: 'MarketAvgVal', displayText: 'Market average value' },
                            { DataSource: this.objTrendDataArr, dataField: 'MediumAvgVal', displayText: 'Medium average value' },
                            // {DataSource:this.chartData,dataField: 'NASDAQ', displayText: 'NASDAQ' }
                            // { dataField: 'S&P 500', displayText: 'S&P 500' },
                            // { dataField: 'NASDAQ', displayText: 'NASDAQ' }
                        ]
                    }
                ];
        }

    Looking forward to get the solution ASAP

    Thanks

    Best Regards,

    jqxchart valueAxis User Defined #98020

    Ivo Zhulev
    Participant

    Hi, mdaslamknl,

    From the sample provided I can’t tell from where your problem comes.
    For the test, hardcore the lastChar and check if it enters in the right case. If it does then check what the return value is.
    If none of this works, you may tidy the example and share a just simple one which will show the problem(the example must be ready to go, so I can copy/paste it and run it).

    Best Regards,
    Ivo

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

    jqxchart valueAxis User Defined #98057

    mdaslamknl
    Participant

    Hello

    My issues is i want to change the minValue and maxValue of lables that should display, so i am changing in the below code

    valueAxis:
    {
    visible: true,
    minValue:LowNew,
    maxValue:HighNew,

    its not taking, everything is working fine

    Can any one suggest how can i change the minValue and maxValue as same i am using in highcharts its working perfectly as my client wants the jqcharts so i am struck

    Examples images

    1. High Charts

    2. jqxCharts

    Best Regards,

    jqxchart valueAxis User Defined #98059

    mdaslamknl
    Participant

    Hello Below Images

    jqxCharts

    High Charts

    jqxchart valueAxis User Defined #98097

    Ivo Zhulev
    Participant

    Hi mdaslamknl,

    Please write your issue to the support email with your license key.

    Best Regards,
    Ivo

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

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

You must be logged in to reply to this topic.