Related questions

How to set time scale zoom in ChartJS?

2018-11-02 11:56 mrpool89 imported from Stackoverflow

I have following example data for a line chart: 

[
 {
   x: 'Mon Sep 29 2018 14:26:53 GMT+0100',
   y: 100
 },
 {
   x: 'Mon Oct 15 2018 10:40:31 GMT+0100',
   y: 400
 }
]

My goal is to set a certain time frame as default and change it's range and zoom dynamically. If there is no data to show, it's fine.

I'm using the chartjs-plugin-zoom which allows me to pan freely on the x axis which is very good. Unfotunately the zoom is set on user events via this plugin.

Basically I want to have buttons to switch between time scalings and then pan on the x axis.

My question is, do I need to set the "limits" in ChartJS itself and let the plugin only pan? If yes, how to do this "freely" not considering the data (ChartJS tries to fit all data in the view, correct me if I'm wrong)

I tried the zoom options on the plugin, but they do not seem to affect anything:

zoom: {
        enabled: true,
        drag: false,
        mode: '',
        rangeMin: {
            x: moment().format(),
            y: null
        },
        rangeMax: {
            x: moment().add(7, 'day').format(),
            y: null
        }
    }

Thank you!

See also questions close to this topic

  • How to get the return value of the callback function from a request which is exported as a module

    I'm trying to parse the names and birthdays of all the presidents of USA. First I get all the urls. I have previously exported a module in which I am trying to return an object containing the name and birthday of the president, by calling a request using the URL. I am unable to retrieve the data in the main js file.

    I am trying to do this without using promises.

    The module I am exporting : 

    
const request = require('request'); //to make HTML requests
const cheerio = require('cheerio');

const POTUSParse = function(url){
   return request(url,(error,response,HTML) => {
    if(!error && response.statusCode == 200){
        const $ = cheerio.load(HTML);
        const presidentName = $("#firstHeading").text();
        const bdayString = $(".bday").text();

        return {
            "name" : presidentName,
            "bday" : bdayString
        };
    }
   });

}


module.exports = POTUSParse;

    The main JS file : 

    const POTUSParse = require('./getName&BDAYModule');
const request = require('request');
const cheerio = require('cheerio');


request("https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States",(error,response,html) => {
    if(error || response.statusCode != 200){
        return;
    }

    const wikiURLs = [];
    const $ = cheerio.load(html);
    $("big a").each((index,rawDOMElement) => {
        wikiURLs.push($(rawDOMElement).attr("href"));
    });

    for(var i=0;i<wikiURLs.length;i++){
        console.log(POTUSParse("https://en.wikipedia.org" + wikiURLs[i]));
    }
});

    I am getting an object which the request module returns. How can I get the return value of the callback function ?

  • Javascript returning in forEach loop

    I run in to this scenario a lot and would just like to know if my solution is the best and if there might be something better. Many cases I have a forEach loop, and I want to check if any of the values are incorrect, if they are, end the code (return). Here is what I would do without a loop:

    const email = '...';
if (email.isInvalid) return;

    In a loop I would do this:

    const emailList ['...', '...', '...'];
const emailErrors = [];

emailList.forEach((element) => {
    // if (element.isInvalid) return; // This won't work here, it just ends this loop instance, which is my problem
    if (element.isInvalid) emailErrors.push(element);
});

if (emailErrors.length > 0) return; // This will end the code correctly

    Is there any better approach to this idea? Using try, catch or something else?

  • How to redirect automatically php js

    How can I redirect automatically

    when visitor come check if mousemove or keypress or mouseclick or scrolling & redirect to $activitly if not send they to other url

    checking methods:

    1. mousemove
    2. mouseclick
    3. key press
    4. scrolling

    start checking time when page reload ..redircet checking time is 15 scnds this is code

    $aff_array = array("http://www.google.COM",
                  "http://google.fr",
                  "http://google.es");
$random = rand(0, count($aff_array) - 1);
$activitly  = $aff_array[$random];

?>
<!-- HTML code -->
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<script language="JavaScript">
function set_interval() {
  //the interval 'timer' is set as soon as the page loads  
  var timeoutMins = 1000 * 1 * 15; // 15 seconds
  var timeout1Mins = 1000 * 1 * 13; // 13 seconds
  itimer=setInterval("auto_logout()",timeoutMins);

}

function reset_interval() {
  var timeoutMins = 1000 * 1 * 5; // 15 seconds 
  var timeout1Mins = 1000 * 1 * 3; // 13 seconds
  //resets the timer. The timer is reset on each of the below events:
  // 1. mousemove   2. mouseclick   3. key press 4. scrolling
  //first step: clear the existing timer
  clearInterval(itimer);
  clearInterval(atimer);
  //second step: implement the timer again
  itimer=setInterval("auto_logout()",timeoutMins);
}


function auto_logout() {
  //this function will redirect the user to the logout script
  window.open('self.location', '_self');
}
</script>

</head>
<body onLoad="set_interval(); document.form1.exp_dat.focus();" onKeyPress="reset_interval();" onmousemove="reset_interval();" onclick="reset_interval();" onscroll="reset_interval();">
</body>
</html>
  • Is there a way to create a thermometer chart with an upper and lower error bound in R?

    I'm looking to create a thermometer chart from 0-100% that displays a range of values that are encompassed by the uncertainty.

    I have tried the symbols() function with the built in thermometer and I haven't found a way to make it display more than one value. I haven't figured out a way to make this work using ggplot either. Ideally, the thermometer is one color/shade up to the lower bound, and then another color/shade up tot the upper bound percent.

  • How to select data from 'logged in user' from database to a graph

    I need help with some code. I want to select data from mySQL to a graph on my web page. The data must be from the current logged in user, and when I select data to a card it works fine, but when I select it to a graph the graph disappears.

    I'm using this code for the cards, and it works fine:

     $sql = "SELECT energyexpenditure FROM energy4project WHERE user_id =  '{$_SESSION["user_id"]}' ORDER BY time_stamp DESC LIMIT 1;";

    This is the code for my current graph that don't show data based on logged in user:

    <?php
header('Content-Type: application/json');

        $host = "localhost";
        $user = "`blabla";
        $pwd = "blabla";
        $db = "blabla";
        $conn = new mysqli($host, $user, $pwd, $db);

        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }


         $sql = "SELECT energyexpenditure, time_stamp FROM energy4project ORDER BY time_stamp DESC LIMIT 7;";

        $result = $conn->query($sql);


$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

mysqli_close($conn);

echo json_encode($data);
?>

    When I implement the code from the cards in the graph code it doesn't work.
    Why does the SELECT WHERE user = '{$_SESSION["user_id"]} not work in the graphs?

  • Using Years Only (Without Months or Days) with Google Timeline Charts

    I want to show a timeline (with Google Charts) with years only.

    However, the examples on Google Charts Timelines' webpage always comprise years, months and days (for instance, new Date(1789, 3, 30)).

    I have tried reducing the new Date() to just a year (e.g. new Date(2019)), but Google Charts interprets it as seconds (2.019 seconds). 

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('div_timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Nr' });
    dataTable.addColumn({ type: 'string', id: 'Journal' });
    dataTable.addColumn({ type: 'date', id: 'Founded' });
    dataTable.addColumn({ type: 'date', id: 'Now' });

    dataTable.addRows([
      [ '1', 'Journal of Leisure Research', new Date(1969), new Date(2019) ],
      [ '2', 'Critical Sociology',        new Date(2009),  new Date(2019) ],
      [ '3', 'Geographical Analysis',  new Date(1909),  new Date(2019) ]
                      ]);

    chart.draw(dataTable,options);

  }
</script>

    With this code, Journal of Leisure Research is now 1.969 seconds to 2.019 seconds.

    Instead, I want the chart to assign the years 1969 to 2019.

    How can I do that? Thanks for your help!

  • How can I filter grouped bar chart by dataset index?

    I started using ChartJS recently and stumbled into a problem applying filters to a grouped bar chart.

    I'm measuring the time some pages in my website take to respond and within each page there are some actions (like clicking on a button) that have individual response times. With the result I'm creating a chart which groups each response time by action.

    After drawing the chart, I can use the default legend to filter each series but I'd like to be able to apply a filter by action.

    From my research, most problems are related to series filtering instead of show/hiding a specific index of each dataset. A possible solution would be to redraw the whole chart with only the necessary data but since it comes from an AJAX call, it'd be better to avoid calling it every time someone changes the filter dropdown.

    I've added a dropdown list with each action label and in the "OnChange" method of the dropdown it should only show the selected action for every series.

    Example code: Here

    The OnChange function of the dropdown is as follow:

    function FilterByEvent(dropdown){
  var chartName = dropdown.id.replace('_filter', 'Chart');
  var chart = null;
  var selectedIndex = dropdown.options[dropdown.selectedIndex].value;

  Chart.helpers.each(Chart.instances, function (instance) {
    if (instance.chart.canvas.id == chartName)
      chart = instance.chart;
  })

  if (chart != null){
    $.each(chart.config.data.datasets, function (index, value) {
      value.data = [value.data[selectedIndex]];
    });  
    chart.config.data.labels = [chart.config.data.labels[selectedIndex]];
    chart.update();
  }
}

    With the current function I'm able to select only the datasets that I want, but I lose all the other information.

    Current

    If I change to another action, the result is an empty chart because, obviously, the data was erased in the first filter.

    The expected result is to be able to filter dataset indexes according to the selected action in the filter by, without losing the datasets.

    Example

    Is there anyway to do this using ChartJS or should I keep the data, for instance, in a local var and repopulate the datasets in each filter?

  • Chartjs bar chart multiple tooltip coming on single chart

    Chart js bar chart on single bar multiple tooltip coming . I am using custom tooltip

    enter image description here

    enter image description here

    In image 1 and image 2 same bar two tooltip coming

  • i want to change the value of lable in chartjs

    I want to change the value of labels in pie chart in chartjs I want to show the total number of agents in paused condition, total number of agents in call condition and also ready condition when i hover my pie chart. when i put a value in labels it also shows in hover lable. i am like stuck in this thing. thanks in advance 

       $(document).ready(function(){
   $.ajax({
  url: "http://localhost/ci/login/agend_data",
method: "GET",
success: function(data1) {
  var data = JSON.parse(data1);

  var paused = [];
  var incall = [];
  var ready = [];
  var pause_agent = [];
  var incall_agent = [];
  var ready_agent = [];
  for (var i in data) {
    if(data[i].status=='PAUSED') {
        pause_agent.push(data[i].conf_exten);
        paused.push('paused');
    } else if (data[i].status=='INCALL') {
        incall_agent.push(data[i].conf_exten);
        incall.push('incall');
    } else {
        ready_agent.push(data[i].conf_exten);
        ready.push('ready');
    }
  }
  var Paused = paused.length;
  var Incall = incall.length;
  var Ready = ready.length;

  var chartdata = {
    labels: ['paused', 'incall', 'ready'],
    datasets : [
      {
        label: 'Agent',
        backgroundColor: ['red', 'blue', 'green'],
        borderColor: 'rgba(200, 200, 200, 0.75)',
        hoverBackgroundColor: '#bbb',
        hoverBorderColor: 'rgba(200, 200, 200, 1)',
        data: [Paused, Incall, Ready]

      }
    ],

  };

  var ctx = $("#mycanvas");

  var barGraph = new Chart(ctx, {
    type: 'pie',
    data: chartdata,
   options: {
          tooltips: {
            callbacks: {
              label: function(tooltipItem) {


              }
            }
          }
        }
  });
},
error: function(data) {
  console.log(data);
}
});
});
  • Why transformationMatrix seems acting differently in stageXL than in native dart/javascript canvas manipulation?

    I try to make a zoom on a Canvas with StageXL. Like the google maps one. So the mouse pointer must stay in place and the content must zoom around this point.

    I found a snippet of code which act just fine here, on stackoverflow and written in JS. Zoom in on a point (using scale and translate)

    So, I re-written this code with dart/stagexl (and with a sprite, because, at the end of the day, I'll have to zoom on a sprite) and the result looks very different with the usage of transformationMatrix.

    Is anybody have an idea on why this code act so different than the one written in native js ?

    Many thanks in advance for your answers !

    int width = 600;
int height = 200;
num zoomIntensity = 0.2;
num scale = 1;
num originx = 0;
num originy = 0;

html.CanvasElement canvas = html.querySelector('#stage');
Stage stage;
Sprite container = new Sprite();

init() {
  StageOptions options = new StageOptions()
    ..backgroundColor = Color.BlanchedAlmond
    ..renderEngine = RenderEngine.Canvas2D;
  stage = new Stage(canvas, width: 800, height: 600, options: options);
  var renderLoop = new RenderLoop();
  renderLoop.addStage(stage);
  stage.addChild(container);
}

draw() {
  GraphicsCommandRect rectCommand = new GraphicsCommandRect(50, 50, 100, 100);
  GraphicsCommandFillColor blueCommand =
      new GraphicsCommandFillColor(Color.CadetBlue);
  container.graphics.clear();
  container.graphics.beginPath();
  container.graphics.rect(originx, originy, 800 / scale, 600 / scale);
  container.graphics.fillColor(Color.OrangeRed);
  container.graphics.closePath();
  container.graphics.beginPath();
  container.graphics.addCommand(rectCommand);
  container.graphics.addCommand(blueCommand);
  container.graphics.closePath();
}

main() {
  init();
  draw();

  stage.onMouseWheel.listen((event) {
    print("x: ${event.localX} y: ${event.localY}");
    event.preventDefault();

    num mousex = event.localX;
    num mousey = event.localY;
    int wheel = event.deltaY < 0 ? 1 : -1;
    num zoom = exp(wheel * zoomIntensity);

    container.transformationMatrix.translate(originx, originy);

    originx -= mousex / (scale * zoom) - mousex / scale;
    originy -= mousey / (scale * zoom) - mousey / scale;

    container.transformationMatrix.scale(zoom, zoom);
    container.transformationMatrix.translate(-originx, -originy);

    scale *= zoom;

    draw();
  });
}
  • How to zoom into a Mandebrot set with Matlab by calculating more points?

    I am trying to zoom into a Mandebrot set with Matlab, which is based on a meshgrid. After the first plot you can pick two points which define the zoom area and between these two points a new meshgrid is generated. This new meshgrid is the origin for the new plot. The problem now is, that the new plot is rather shapeless.

    I tried this concept (zoom by calculating iterations in a narrower grid) for other julia sets, but this did not work well either. I am wondering, whether this is a completly wrong concept now.

    a = 0;
func = @(x,c) x.^2 + c;
realAx = linspace(-2,1,1000);
imagAx = linspace(-1,1,1000);
[x,y] = meshgrid(realAx,imagAx);
complex = x + y*1i;

for n = 1:100
   a = func(a,complex);
end

a(abs(a) >= 2) = 0;
contour(abs(a));
[u,v] = ginput(2);

while true

while ~((u(1,1) < u(2,1)) && (v(1,1) < v(2,1)))
    [u,v] = ginput(2);
end

% Get zoom values
figure;

% Create new start coordinates
zoomX = linspace(x(round(u(1,1))),x(round(u(2,1)),1000));
zoomY = linspace(y(round(v(1,1))),y(round(v(2,1)),1000));

[x,y] = meshgrid(zoomX,zoomY);

complex = x + y*1i;
a = 0;

for n = 1:100
    a = func(a,complex);
end

a(abs(a) >= 2) = 0;   
contour(abs(a));
[u,v] = ginput(2);

end

    I expect a more detailed version of the zoom area to appear. I would be really glad, if anybody had advice or would provide a different concept for zooming into the Mandelbrot set.

  • Touch events are wrong for transformed SVG elements

    In the process of experimenting with scaling/panning an inline SVG image by applying a matrix transform I have discovered a rather peculiar thing. After loading the image I am attaching a touchstart event listener to some of the elements in the SVG image and the event fires right away when the object is touched. However, after applying a transform

    document.getElementById('mysvg').setAttribute('transform''matrix(a b c d e)')

    which has the effect of scaling and/or translating the entire SVG image touching the same object no longer triggered the expected touch event. After some experiment I found that the event could still be triggered by the touch location on screen had no bearing to the actual new placement of the object on the screen. I then proceeded to first removeEventListener followed by addEventListener for the object after issuing the matrix transform and lo & behold the touch event handling was back to normal.

    Quite apart from the fact that I would like to avoid the rather expensive operations of removing & then reassigning the same event listener after each pan/zoom I would like to understand just why this is happening. It is like the browser is locating the pixel location of the object at the addEventListener stage and then holds on to that somewhere in its memory blissfully ignorant of any object displacements that might have occurred later.

    Can anyone here tell me what is going on here and how I can go about retaining the utility of the touch event after pan & zoom in a more efficient manner?

  • D3 linear scale stops any data from displaying

    I'm following a basic tutorial on using D3.js. The following code displays a simple bar chart:

    var data_set_two = [16, 32, 64, 128, 256, 524];

d3.select(".data-container.second-post")
  .selectAll("div")
  .data(data_set_two)
    .enter()
    .append("div")
    .style("width", function(d) {
      return d + "px";
    })
    .append("span")
    .text(function(d) {
      return d;
    });

    But when I add in the scale variable and use as per the documentation, nothing displays anymore:

    var data_set_two = [16, 32, 64, 128, 256, 524];

var scale = d3.scale.linear()
  .domain([0, 524])
  .range([0, 500])

d3.select(".data-container.second-post")
  .selectAll("div")
  .data(data_set_two)
    .enter()
    .append("div")
    .style("width", function(d) {
      return scale(d) + "px";
    })
    .append("span")
    .text(function(d) {
      return d;
    });

    I know that it is the scale variable that is breaking the code, because when I comment it out the chart comes back again.

    Here are my script tags:

    <script src="https://d3js.org/d3.v5.min.js"></script>
<script src="{{ site.baseurl }}/assets/js/data.js"></script>
  • Do I scale panel data as a whole or do I group it first?

    I am running a panel regression estimating the effect of a change in employee satisfaction measured on glassdoor.com (rating 1 to 5) for a given company on the stock price(adjusted by Fama-French). I do have a panel with 50 companies and 43 quarters, as I am interested in the change, both time series are first differenced (i.e. x = (rating in Q2 - rating in Q1) and y = (alpha in Q2 - alpha in Q1)). I now want to standardize my data. My question is do I standardize the whole dataset or should I group it first by Quarter and then standardize it?

    general_reviews <- read.csv("reviews_ general.csv")
#Importing the data
general_data <- pdata.frame(general_reviews, index = c("company","Year_Quarter", "Type"))
#Data is a panel with company as the entity and Year_Quarter the time
general_data <- general_data %>% mutate(alpha = as.numeric(as.character(alpha))) %>% group_by(company) %>% mutate(A1d = dplyr::lead(alpha, 1) - alpha)
#Building the first difference as I am interested in the change.

#Do I use:
general_data <- general_data %>% mutate(A1s = scale(alpha))
#or:
general_data <- general_data %>% group_by(Year_Quarter) %>% mutate(A1s = scale(alpha))
  • R and pdf() make figures to breath

    I am using the Gmisc package to plot some state diagrams. The package is great for this purspose but I am stuck with one visualization task when I try to build a very large diagram.

    Even though it is hard to see in detail in a large screen all the information, it will be nice to be able to zoom in specific regions and see in more detail what is going on.

    The gmisc package does not have parameters for scaling apart of setting width of a box.

    The code that plots this diagram is just the following:

    pdf(file="LargeFigure.pdf")
transitions$render()
dev.off()

    State diagram where components overlap make them indistinguishable

    Is it possible to inform the pdf device to take as much space is needed so the figure elements never overlap? Of course that will be a large figure where one will need to zoom in to see detail.

    I would like to thank you in advance for your reply. Regards Alex