Setting Min and Max Axis values for chart widget

Comments

13 comments

  • Avatar
    Zac

    Error: widget is not defined
    this.execute@http://localhost:8081/js/dashboard.js?g=41a7583dd85c86e23fb4e81da77fecf5:1
    $scope.act@http://localhost:8081/js/ux-controls.js?g=41a7583dd85c86e23fb4e81da77fecf5:1
    Parser.prototype.functionCall/<@http://localhost:8081/js/3p-appcore.js?g=12AA8-C961:5
    @http://localhost:8081/js/3p-angular-touch.js?g=41a7583dd85c86e23fb4e81da77fecf5:1
    $RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:8081/js/3p-appcore.js?g=12AA8-C961:4
    $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:8081/js/3p-appcore.js?g=12AA8-C961:4
    @http://localhost:8081/js/3p-angular-touch.js?g=41a7583dd85c86e23fb4e81da77fecf5:1
    createEventHandler/eventHandler/<@http://localhost:8081/js/3p-appcore.js?g=12AA8-C961:1
    forEach@http://localhost:8081/js/3p-appcore.js?g=12AA8-C961:1
    createEventHandler/eventHandler@http://localhost:8081/js/3p-appcore.js?g=12AA8-C961:1

    http://localhost:8081/js/3p-appcore.js?g=12AA8-C961
    Line 3

    0
    Comment actions Permalink
  • Avatar
    Zac

    Actually the code works, but it seems once an error is thrown (my fault), you can no longer save changes to the custom script. So it just kept throwing the same error even when i copied the script exactly from the page.

    0
    Comment actions Permalink
  • Avatar
    Ofer

    Hi Zac,

    Please make sure you put the script in the widget script edit and not in the dashboard script edit.

    Did you have the widget script edit screen opened in several tabs maybe?

    Is the error remains currently? if yes, remove any script from the widget (save it somewhere else) and refresh the page, you still get the error?

    Looking forward for you reply.

    -1
    Comment actions Permalink
  • Avatar
    brett ambrose

    Hi Ofer

    Do you have a script to change the values on the x-axis of a bar chart?

    I have tried replacing the "yAxis[0]" with "xAxis[0]" and "xAxis" but it hasn't worked.

    Thanks

    0
    Comment actions Permalink
  • Avatar
    Douglas

    Hi Brett,

    The script above should work.  The X axis in this case is actually called Y axis in the JavaScript.  Basically, think of it as a column chart turned on it's side.  Thanks

     

    0
    Comment actions Permalink
  • Avatar
    Chris Wallingford

    Hi -

    I'm using this code in a scatter chart and looking for help with two problems. First, here's my code:

    widget.on('ready', function(se, ev){
    var e = element; // get the container element
    var chart = e.data('hc'); // get the highchart element
    //chart.alignTicks =false; // this is used to avoid auto aligning of ticks that cause inconsistency when applying min and max
    chart.yAxis[0].update({tickInterval:5}, true);
    chart.yAxis[0].update({max: 10, min: -10}, true); // set the min and max values, and pass true parameter to redraw the chart according to new values
    })

    (See attached image.) The widget starts out fine and updates appropriately to have a y-axis from -10 to +10 with tick lines at intervals of 5. However as I compress the widget in the dashboard, the tick lines disappear and the min/max values increase, first to +/-15, then +/-20.

    As for the commented out alignTicks in the code above, I've tried that both ways without it affecting this output.

    Thanks for any thoughts/insights.

     




    scatter_chart_compression.jpg
    0
    Comment actions Permalink
  • Avatar
    Aviad Harell

    Want this to be Dynamic?  Use the following code instead, which calculates a new min and max based on the data.  You can tweak the adjustment percentage variable to get a looser or tighter fit to the line.

    widget.on('ready', function(se, ev){  
    	//	Parameters
    	var seriesIndex = 0;
    	var adjustmentPercent = 0.25;
    
    	//	Figure out the min/max
    	var min = null, 
    		max = null;
    	$.each(se.queryResult.series[seriesIndex].data, function() {
    		if (!min || min > this.y) {
    			min = this.y;
    		}
    		if (!max || max < this.y) {
    			max = this.y;
    		}
    	})
    	
    	//	adjust based on the delta
    	var delta = max-min;
    	max = max + (delta*adjustmentPercent);
    	min = min - (delta*adjustmentPercent);
    	
    	//	Set the min/max on the chart
    	var e = element;
    	var chart = e.data('hc');
    	chart.alignTicks =false;
    	chart.yAxis[0].update({max:max, min: min}, true);
    })

     

    Screenshot.PNG

    0
    Comment actions Permalink
  • Avatar
    shilpa

    The above code to make the Yaxis Max dynamic is very helpful. Thank you.  

    In my scenario I have 2 lines and one column on the chart. the Second line has the max value and the above code works for the First series Max values only. 

    So I have this code where seriesIndex_Count is the number of series you have  (2 lines and one column make 3. So I have to say 2 as series start from 0,1,2)

    //script to give the Max and Min values for the Y-axis dynamically on widget ready
    widget.on('ready', function(se,ev){

    // Parameters
    var seriesIndex_Count = 2;// Fill this with the number of columns or lines you have in the chart. I have 2 columns and 1 line series
    var adjustmentPercent = 0.25;

    var i= 0; //start from the first Column/line

    // Initially there will be no Min or Max
    var Caliculated_min = null,
    Caliculated_max = null;

    //Doing a while loop as line 1 may have max - $20 and line 2 may have max -$40... then out chart must show MAx-$55 or so

    while(i< seriesIndex_Count)
    {

    $.each(se.queryResult.series[i].data, function() {
    if (!Caliculated_min || Caliculated_min > this.y) {
    Caliculated_min = this.y;
    }
    if (!Caliculated_max || Caliculated_max < this.y) {
    Caliculated_max = this.y;
    }
    })
    i++;
    } //end while

    // adjust based on the delta
    var delta = Caliculated_max-Caliculated_min;
    Caliculated_max = Caliculated_max + (delta*adjustmentPercent);
    Caliculated_min = Caliculated_min - (delta*adjustmentPercent);

    // Set the min/max on the chart
    var e = element;
    var chart = e.data('hc');
    chart.alignTicks =false;

    //if Min is also dynamic use this line below
    //chart.yAxis[0].update({max:Caliculated_max, min: Caliculated_min}, true);

    //For my case min is always 0
    chart.yAxis[0].update({max:Caliculated_max, min: 0}, true);
    })

     

    0
    Comment actions Permalink
  • Avatar
    Itai

    This modification will allow the run correctly when there's more than one series:

    ```

    widget.on('ready', function(se, ev){
    // Parameters
    var seriesIndex = 0;
    var adjustmentPercent = 0.25;

    // Figure out the min/max
    var min = null,
    max = null;

    var numSeries = se.queryResult.series.length;
    for (var i = 0; i < numSeries; i++) {
    $.each(se.queryResult.series[i].data, function() {
    count++;
    if (!min || min > this.y) {
    min = this.y;
    }
    if (!max || max < this.y) {
    max = this.y;
    }
    })
    }

    // adjust based on the delta

    var delta = max-min;
    max = max + (delta*adjustmentPercent);
    min = min - (delta*adjustmentPercent);

    // Set the min/max on the chart
    var e = element;
    var chart = e.data('hc');
    chart.alignTicks =false;
    chart.yAxis[0].update({max:max, min: min}, true);
    })

    ```

     

    0
    Comment actions Permalink
  • Avatar
    Itai

    Previous code has a typo. This is the correct code:

     

    widget.on('ready', function(se, ev) {
    // Parameters
    var adjustmentPercent = 0.25;

    // Figure out the min/max
    var min = null,
    max = null;

    var numSeries = se.queryResult.series.length;
    for (var i = 0; i < numSeries; i++) {
    debugger;
    $.each(se.queryResult.series[i].data, function() {
    if (!min || min > this.y) {
    min = this.y;
    }
    if (!max || max < this.y) {
    max = this.y;
    }
    });
    }
    debugger;
    // adjust based on the delta

    var delta = max - min;
    max = max + (delta * adjustmentPercent);
    min = min - (delta * adjustmentPercent);

    // Set the min/max on the chart
    var e = element;
    var chart = e.data('hc');
    chart.alignTicks = false;
    chart.yAxis[0].update({
    max: max,
    min: min
    }, true);
    });

    0
    Comment actions Permalink
  • Avatar
    Mahesh J

    Hi,

    The above code worked for me till the point when I used a 'Break by' option in my line chart.

    I have just one Value field which is viewed across a time frame(Trend). This is categorized using a 'Break by' to see two or more trend lines depending on the number of categories.

    I noticed that the axis limits are not getting set to view all the lines.

     

    0
    Comment actions Permalink
  • Avatar
    Mahesh J (Edited )

    Used Custom HighChart Plugin for the above use-case and its a much better visualization that the normal line chart, esp for showing trends over a time period.

     

    https://support.sisense.com/hc/en-us/community/posts/221225868-Zoomable-Line-Chart-Highcharts-Plugin

    1
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    Why would this code cancel out the scatter chart marker changer plugin by Oleg Fil, referenced here; https://support.sisense.com/hc/en-us/community/posts/221226028-Changing-scatter-chart-point-marker-shape

    This is the script I currently have in there, plus I'm using Oleg's plugin:

    widget.on('ready', function(se, ev){

    var chart = element.data('hc');
    // Oleg's snippnet for the change marker plugin
    prism.changeScatterChartMarkerStyle(chart, chart.series[0], {shape: 'square', fixedSize: 80});
    });

    widget.on('render', function(sender,event){

    // URL to the background Image
    var imageLink = '/resources/images/arrows/floorPlan.png'

    // Set the chart background as the image
    sender.queryResult.chart.plotBackgroundImage = imageLink;

    })

    Any thoughts?

    0
    Comment actions Permalink

Please sign in to leave a comment.