When we use logarithmic scale log base 2 in chart, y axis always start with 1 - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular chart, bootstrap chart, javascript chart, jquery chart, jqwidgets chart, jqxChart, logarithmicScaleBase, minValue

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

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

Author

When we use logarithmic scale log base 2 in chart, y axis always start with 1 Posts

August 30, 2016 at 1:16 pm When we use logarithmic scale log base 2 in chart, y axis always start with 1 #86980

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

August 31, 2016 at 1:17 pm When we use logarithmic scale log base 2 in chart, y axis always start with 1 #87011

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

August 31, 2016 at 3:39 pm When we use logarithmic scale log base 2 in chart, y axis always start with 1 #87020

Nagesh Adhe

Participant

Hi..Hristo

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

Thanks
Nagesh

September 2, 2016 at 9:57 am When we use logarithmic scale log base 2 in chart, y axis always start with 1 #87073

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

September 7, 2016 at 10:29 am When we use logarithmic scale log base 2 in chart, y axis always start with 1 #87160

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

Author

Posts

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

You must be logged in to reply to this topic.