jQuery UI Widgets Forums Chart When we use logarithmic scale log base 2 in chart, y axis always start with 1

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 7 years, 5 months ago.

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

  • Nagesh Adhe
    Participant

    Hi..

    I am using logarithmic scale, with log base 2 in bar chart and my data contain values start with 1 to above 20,000. In my chart value axis always start with 1, if my data contain value 1, record show on x axis. I want to show value axis start with 0. In following code i have done changes, please tell me how can i do it?

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>jqxChart Column Series with Logarithmic Axis</title>
        <meta name="description" content="jqxChart - javascript chart Column Series with Logarithmic Axis." />
        <meta name="keywords" content="jqwidgets charts, jquery charts, javascript charts, ajax charts, graphs, plots, line charts, bar charts, pie charts, javascript plots, ajax plots" />	
        <link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                 var sampleData = [{ a: 4, b: 15}, { a: 1, b: 58 }, { a: 10, b: 63 }, { a: 100, b: 6666 }, { a: 1, b: 47 }, { a: 5.11, b: 255  }, { a: 20.13, b: 8888 }, { a: 600, b: 22222 }];
    
    		var isStart ="isStart";
    
                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: 0.5,
    					
                        title: { text: 'Value' },
                        labels: {
                            formatSettings: { decimalPlaces: 1 },
                            horizontalAlignment: 'right'
                        },
    					formatFunction: function (value, itemIndex, serie, group) {
    					
    					if(isStart=="isStart"){
    					isStart = "";
    					alert(value);
    					return 1;
    					
    					}else{
                      
                            return value;
                        }
    					},
                    },
                    seriesGroups:
                            [
                                {
                                    type: 'column',
                                    series: [
                                            { dataField: 'a', displayText: 'A', },
                                            { dataField: 'b', displayText: 'B' }
    
                                        ]
    
                                },
                               
                            ]
                };
    
                $('#chartContainer').jqxChart(settings);
    			isStart = "isStart";
            });
    </script>
    </head>
    <body style="background:white;">
        <div id='chartContainer' style="width:850px; height: 500px;"/>
    </body>
    </html>

    Thanks
    Nagesh

    • This topic was modified 7 years, 5 months ago by  Nagesh Adhe.

    Hristo
    Participant

    Hello Nagesh,

    You could try to set minValue: 0.5, member in valueAxis property of the Chart.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    Nagesh Adhe
    Participant

    Hi..Hristo

    Thank you for your help its working now, thank u sooo much..!!

    Thanks
    Nagesh


    Nagesh Adhe
    Participant

    Hi..Hristo

    I have problem with pie chart, my data contains value started from 1 to 20000, consider two values 1 and 20000, and I want to show in pie chart, but in pie chart area with value 1, is negligible as compare to area value 20000, how can I do if want show some visible area as compare to other value 20000.
    In Bar chart above problem is solved by using logarithmic scale, is there same workaround for pie chart.

    Thanks
    Nagesh


    Hristo
    Participant

    Hello Nagesh Adhe,

    You could achieve this workaround with beforeLoadComplete: function (records) {} callback of the DataAdapter.
    There you could generate new dataField with custom compute (own algorythm), thus you could provide data to the Chart with desirable proportion.
    And formatFunction: function (value) {) callback of the ‘valueAxis’ member to set wanted points for grid lines.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.