jQuery UI Widgets Forums Chart formatSettings usage

This topic contains 3 replies, has 4 voices, and was last updated by  Hristo 1 year, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • formatSettings usage #28826

    adnanzahid
    Member

    hey
    i was going through the API documentation of the jqxChart and came through the property formatSettings under categoryAxis “formatSettings – settings used to format the displayed values.”
    what attributes are used by this function??

    formatSettings usage #28832

    Dimitar
    Participant

    Hello adnanzahid,

    Here are the properties you may set in the formatSettings object: decimalSeparator, thousandsSeparator, prefix, sufix, decimalPlaces, negativeWithBrackets.

    Best Regards,
    Dimitar

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

    formatSettings usage #103440

    GuillermoRL
    Participant

    Hi!
    I was check the api documentation. i am using a line Chart but i have a trouble.
    i am using two functions.
    the first one is to get the settings just like this:

    var getSettingsDefault = function(data){
    var settings = {
    title: “TITULO DE LA GRAFICA”,
    description: “DESCRIPCIƓN DE LA GRAFICA”,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 11, bottom: 5 },
    titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
    source: data,
    xAxis:
    {
    dataField: ‘nombre’,
    unitInterval: 1,
    tickMarks: { visible: true, interval: 1 },
    gridLinesInterval: { visible: true, interval: 1 },
    valuesOnTicks: false,
    labels:
    { text: ‘Numero de semana<br>’}
    },
    valueAxis:
    {
    labels: {horizontalAlignment: ‘right’},
    title: { text: ‘Monto<br>’ }
    },
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘line’,
    series: [
    {
    dataField: ‘dataField’,
    displayText: ‘displayText’,
    symbolType: “square”,
    labels:
    {
    visible: true,
    backgroundColor: ‘#FEFEFE’,
    backgroundOpacity: 0.2,
    borderColor: ‘#7FC4EF’,
    borderOpacity: 0.7,
    formatSettings: {thousandSeparator:’,’, prefix:’$’},
    padding: { left: 5, right: 5, top: 0, bottom: 0 }
    }
    },

    ]
    }
    ]
    };
    return settings;
    }
    the second one is for set the title and datafield where the chart is going to get the source.

    var GraficaMonto = function(data){
    var s = getSettingsDefault(data);
    s.title = “COBRANZA”;
    s.description = “$ de Malas”;
    s.valueAxis.title.text = ‘Pesos<br>’;
    s.seriesGroups[0].series[0].dataField = ‘monto_malas’;
    //s.seriesGroups[0].series[0].labels.formatSettings = {prefix:’$’};
    s.seriesGroups[0].series[0].displayText = ‘$ de Malas’;
    $(“#ContenedorGraficaMonto”).jqxChart(s);
    }

    My question is, How can i set the formatSettings? because i am sending my data like numbers, but i need to show it in the page with de comma separator and the $ simbol.

    I hope you can help me

    best regards

    formatSettings usage #103482

    Hristo
    Participant

    Hello GuillermoRL,

    I would like to mention something important.
    I saw that you use a function to get the settings of the jqxChart and to prepare the data.
    It is important to make the initialization just once.
    If you want to update the jqxChart you should use its methods and properties.

    The “formatFunction” callback is a suitable option that you could use to fully overwrite the result.
    Please, take a look at this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
        <script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
                // prepare chart data as an array
                var sampleData = [
                  { Day: 'Monday', Running: 3000, Swimming: 10000, Cycling: 250, Goal: 4000 },
                  { Day: 'Tuesday', Running: 2050, Swimming: 14500, Cycling: 100, Goal: 5000 },
                  { Day: 'Wednesday', Running: 300, Swimming: 10000, Cycling: 250, Goal: 6000 },
                  { Day: 'Thursday', Running: 4000, Swimming: 2000, Cycling: 250, Goal: 4000 },
                  { Day: 'Friday', Running: 405, Swimming: 2500, Cycling: 205, Goal: 5000 },
                  { Day: 'Saturday', Running: 300, Swimming: 2600, Cycling: 300, Goal: 6000 },
                  { Day: 'Sunday', Running: 200, Swimming: 3800, Cycling: 100, Goal: 9000 }
                ];
    
                var source =
                {
                    datatype: "array",
                    datafields: [
                        { name: 'Day', type: 'date' },
                        { name: 'Running' },
                        { name: 'Swimming' },
                        { name: 'Cycling' },
                        { name: 'Goal' }
                    ],
                    localdata: sampleData
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                
                // prepare jqxChart settings
                var settings = {
                    title: "Fitness & exercise weekly scorecard",
                    description: "Time spent in vigorous exercise by activity",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 10, top: 10, right: 15, bottom: 10 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter, // sampleData,
                    colorScheme: 'scheme05',
                    xAxis: {
                        dataField: 'Day',
                        unitInterval: 1,
                        tickMarks: { visible: true, interval: 1 },
                        gridLinesInterval: { visible: true, interval: 1 },
                        valuesOnTicks: false,
                        padding: { bottom: 10 }
                    },
                    valueAxis: {
                        unitInterval: 500,
                        minValue: 0,
                        maxValue: 15000,
                        title: { text: 'Time in minutes<br><br>' },
                        labels: { horizontalAlignment: 'right' }
                    },
                    seriesGroups:
                    [
                      {
                          type: 'line',
                          series:
                          [
                            {
                                dataField: 'Swimming',
                                symbolType: 'square',
                                formatSettings: {
                                    prefix: '$'
                                },
                                labels:
                                {
                                    visible: true,
                                    backgroundColor: '#FEFEFE',
                                    backgroundOpacity: 0.2,
                                    borderColor: '#7FC4EF',
                                    borderOpacity: 0.7,
                                    padding: { left: 5, right: 5, top: 0, bottom: 0 }
                                }
                            },
                            {
                                dataField: 'Running',
                                symbolType: 'square',
                                labels:
                                {
                                    visible: true,
                                    backgroundColor: '#FEFEFE',
                                    backgroundOpacity: 0.2,
                                    borderColor: '#7FC4EF',
                                    borderOpacity: 0.7,
                                    padding: { left: 5, right: 5, top: 0, bottom: 0 }
                                },
                                formatFunction: function (value)
                                {
                                    var formattedNumber = dataAdapter.formatNumber(value, 'n');
                                    return '$' + formattedNumber;
                                }
                            }
                          ]
                      }
                    ]
                };
                // setup the chart
                $('#chartContainer').jqxChart(settings);
            });
        </script>
    </head>
    <body>
       <div id='chartContainer' style="width: 850px; height: 500px;"></div>
    </body>
    </html>

    Best Regards,
    Hristo Hristov

    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.