jQuery UI Widgets Forums Chart Enable/Disable logarithmicScale

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Enable/Disable logarithmicScale #79875

    George S
    Participant

    Hello,

    I have a page, which has 3 elements… a Button, which says “Draw a Chart”, a Checkbox, which says “use Logarithmic Scale (or not)”, and a chart.
    The user goes to the page, hits the button, the chart draws. The user clicks the checkbox to show logarithmic scale, hits the button again, the chart redraws in log scale. The user turns off the checkbox, hits the button again, the chart redraws, but it stays in Log scale.

    The chart uses data in an array, called graphData. When the user hits the button, the button build graphData, and then calls a routine called draw_graph(graph_data). This routine will look at the checkbox to determine whether to use the log scale or not….

    I have played around with changing datasource, and refresh vs. update, and I just can’t seem to find the right combination. The chart displays fine, the only issue is that once the user turns ON logScale, they cannot turn it off. I have put console.log messages in the code, and it is reading the value of the checkbox appropriately.

    Here is the code

    ////////////////////////////////////////////////////////////////////////////////                            
    function draw_graph(graphData)                             
        {    
            console.log('Building Purchase Trends Chart');
            console.log(graphData);
            
            // Determine is the Use Log Checkbox is checked or not
            var useLog = false;
            if (document.getElementById('useLogScale').checked) { useLog = true;}
            console.log('Use Log: '  + useLog); 
            
                // prepare jqxChart settings
                var settings = {
                    title: "My Title",
                    description: "My Description",
                    enableAnimations: true,
                    showLegend: true,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: graphData,
                    colorScheme: 'scheme01',
                    borderLineColor: '#888888',
                    xAxis:
                    {
                        dataField: 'Qtr',
                        //unitInterval: 1,
                        tickMarks: 
                        {
                            visible: true,
                            interval: 1,
                            color: '#888888'
                        },
                        gridLines:{
                            visible: false,
                            //interval: 1,
                            color: '#888888'
                        },
                        axisSize: 'auto'
                    },                                                                                                                                   
                    
                    
                    valueAxis:
                    {
                        visible: true,
                        
                       logarithmicScale: useLog,
                       logarithmicScaleBase: 2,
                       //  unitInterval: 10,
                       //   minValue: 0,
                      // maxValue: 5000000,
                        title: { text: 'Dollars, in $K' },
                        tickMarks: {color: '#888888'},
                        gridLines: {color: '#888888'},
                        axisSize: 'auto',
                        // Build a function to remove zeroes, add $ and commas
                        formatFunction: function (value, itemIndex, serie, group) {
                             var T1 = value / 1000;
                             var T2 = 0;
                            if(T1 > 0)
                                 {  T2 = Math.floor(T1);   
                                  return '$' + T2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                 }
                            else
                                 { T2 = Math.ceil(T1); 
                                  return '$' + T2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                 }
                              },
                    
                        labels:
                        {
                            horizontalAlignment: 'right',
                            formatSettings:
                            {
                                decimalPlaces: 0,
                                thousandsSeparator: ',',
                                prefix: '$'
                            }
                        }
                    },
                    seriesGroups:
                        [
                           /* {
                                type: 'splinearea',
                                series: [
                                        { dataField: 'Sup', displayText: 'Support', opacity: 0.7 }
                                    ]
                            },
    */
                              {
                                type: 'stackedcolumn',
                                columnsGapPercent: 50,
                                seriesGapPercent: 5,
                                series: [
                                        { dataField: 'A', displayText: 'Val A' },
                                        { dataField: 'B', displayText: 'Val B' },
                                        { dataField: 'C', displayText: 'Val C' },
                                        { dataField: 'D', displayText: 'Val D' }
                                       
                                    ]
                            }
                        ]
                };
                // setup the chart
                console.log('Getting ready to display');
               
               // select the chartContainer DIV element and render the chart.             
               $('#chartContainer').jqxChart(settings);
               //$('#chartContainer').jqxChart({source: graphData});
               $('#chartContainer').width(1000);
               $('#chartContainer').jqxChart('refresh');  
            
           document.body.style.cursor = 'default';
        } 
    Enable/Disable logarithmicScale #79916

    Dimitar
    Participant

    Hello George S,

    Please refer to the following example. We hope it is helpful to you.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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/jqxdata.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/jqxcheckbox.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                var sampleData = [{ a: 0.35, b: 14.5 }, { a: 1, b: 2.5 }, { a: 10, b: 0.2 }, { a: 100, b: 205 }, { a: 1, b: 100 }, { a: 5.11, b: 10.13 }, { a: 20.13, b: 10.13 }, { a: 600, b: 300}];
    
                var settings = {
                    title: "Logarithmic Scale Axis Example",
                    description: "Sample logarithmic scale axis with base 2",
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                    source: sampleData,
                    enableAnimations: true,
                    xAxis:
                    {
                        dataField: ''
                    },
                    valueAxis: {
                        logarithmicScale: true,
                        logarithmicScaleBase: 2,
                        unitInterval: 1,
                        title: { text: 'Value' },
                        labels: {
                            formatSettings: { decimalPlaces: 3 },
                            horizontalAlignment: 'right'
                        }
                    },
                    seriesGroups:
                            [
                                {
                                    type: 'column',
                                    series: [
                                            { dataField: 'a', displayText: 'A' },
                                            { dataField: 'b', displayText: 'B' }
                                        ]
    
                                },
                                {
                                    type: 'line',
                                    series: [
                                            { dataField: 'a', displayText: 'A2' },
                                            { dataField: 'b', displayText: 'B2' }
                                        ]
    
                                }
                            ]
                };
    
                $('#chartContainer').jqxChart(settings);
    
                $("#jqxCheckBox").jqxCheckBox({ width: 120, height: 25, checked: true });
                $("#jqxCheckBox").on('change', function (event) {
                    var valueAxisSettings = {
                        logarithmicScale: event.args.checked,
                        logarithmicScaleBase: 2,
                        unitInterval: 1,
                        title: { text: 'Value' },
                        labels: {
                            formatSettings: { decimalPlaces: 3 },
                            horizontalAlignment: 'right'
                        }
                    };
    
                    $('#chartContainer').jqxChart({ valueAxis: valueAxisSettings });
                });
            });
        </script>
    </head>
    <body style="background: white;">
        <div id='chartContainer' style="width: 850px; height: 500px;">
        </div>
        <br />
        <div id='jqxCheckBox'>
            Logarithmic scale</div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Enable/Disable logarithmicScale #79976

    George S
    Participant

    Thanks. That helped a lot. Continuing on this thought, how do I later unset a value? For example, I am specifically looking at maxvalue. If I set maxvalue to 100000 in one pass, (i.e. to zoom in on smaller values), and then later I don’t want a maxvalue, what is the proper way to delete this?

    Thank you

    Enable/Disable logarithmicScale #80000

    Dimitar
    Participant

    Hi George S,

    Here is how to achieve this:

    <html lang="en">
    <head>
        <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/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                // prepare chart data
                var sampleData = [
                        { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
                        { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
                        { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
                        { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
                        { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
                        { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
                        { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
                    ];
    
                // prepare jqxChart settings
                var settings = {
                    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: sampleData,
                    categoryAxis:
                        {
                            dataField: 'Day',
                            showGridLines: false
                        },
                    valueAxis:
                        {
                            minValue: 0,
                            maxValue: 100,
                            unitInterval: 10,
                            description: 'Time in minutes'
                        },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 30,
                                seriesGapPercent: 0,
                                series: [
                                        { dataField: 'Keith', displayText: 'Keith' },
                                        { dataField: 'Erica', displayText: 'Erica' },
                                        { dataField: 'George', displayText: 'George' }
                                    ]
                            }
                        ]
                };
    
                // select the chartContainer DIV element and render the chart.
                $('#chartContainer').jqxChart(settings);
    
                $('#resetMaxValue').click(function () {
                    var valueAxisSettings = {
                        minValue: 0,
                        unitInterval: 10,
                        description: 'Time in minutes'
                    };
    
                    $('#chartContainer').jqxChart({ valueAxis: valueAxisSettings });
                });
            });
        </script>
    </head>
    <body style="background: white;">
        <div id='chartContainer' style="width: 600px; height: 400px">
        </div>
        <br />
        <button id="resetMaxValue">
            Reset maxValue</button>
    </body>
    </html>

    Best Regards,
    Dimitar

    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.