jQuery UI Widgets › Forums › Chart › Enable/Disable logarithmicScale
Tagged: Angular chart, axis, chart, jquery chart, jqxChart, logarithmic, logarithmicScale, set logarithmicScale, toggle logarithmicScale
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 8 years, 10 months ago.
-
Author
-
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'; }
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.