CODEWITHSUNDEEP
jqueryhighcharts
MeLa
MeLa

Reputation: 13

Highstock disable chart options on small screens

We have a page with couple highstock charts running real-time data. For mobile/smaller screens we would like to disable navigator, zoom and date range and just display a basic highchart. Just using media queries alone didn't work for me as I was only able to successfully access and disable the date range selector group but not the navigator group. My current solution is to initialize different charts depending on the screen size at loading but that seems a lot of code duplication.

if (screen && screen.width > 480) {         
$(function () { 
$('#container').highcharts('StockChart',{ //initializes Highstock chart
  //add chart options 
...
}else{
 $('#container').highcharts({ //initializes basic Highchart chart 
{
 //add chart options
...
}

Could there be there be a more elegant solution, such as passing the the chart options on to a window.resize event or add the conditional into the chart options and redraw the chart? (My jquery knowledge is limited but I welcome any suggestion for leaner, better code...thx)

Upvotes: 1

Views: 670

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can use jquery to get container width and compare with your limit, like 480 px more/less. Then you need to return result to global variable, which is used in "enabled" paraemter for particular elements.

    var enable = $('#container').width() > 480;

 rangeSelector : {
                enabled: enable
            },
            scrollbar :{
                enabled: enable
            },
            navigator:{
                enabled: enable
            },

Example: http://jsfiddle.net/sbochan/f0fd6v4L/1/

Upvotes: 3

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

Given that you are most interested in screen size at loading you could just set the "enable"-settings depending on the width of the screen or chart. For example like this:

var disableWidth = 500;

$('#container').highcharts('StockChart', {
    rangeSelector: {
        selected: 1,
        enabled: $('#container').width() > disableWidth,
        inputEnabled: $('#container').width() > disableWidth
    },

    navigator: {
        enabled: $('#container').width() > disableWidth
    }

    // ...
});

See this JSFiddle demonstration.

Upvotes: 1

Related Questions