Tutorial on creating a subset of a series using jqplot

I am looking to display three series on the same canvas. The series are defined as follows:

rec1 = [0,  0,   150, 200, 0  ];
rec2 = [60, 120, 179, 240, 300];
rec3 = [50, 100, 150, 200, 250];

Below are the source codes I am using to draw these series.

$.jqplot("chart", [rec1, rec2, rec3], {
    title: "",
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            fontSize: '10pt'
        }
    },
    seriesDefaults: {
        rendererOptions: {
            smooth: false
        },
        pointLabels: {
            show: true,
            ypadding: 10
        },
        showMarker: true,
        lineWidth: 2
    },
    legend: {
        show: true,
        location: 'nw',
        placement: "outside"
    }
});

In rec1, any elements with a zero value should remain zero. However, I want to hide these zero-value-elements in rec1. Is there a way to achieve this? Setting rec1 to be:

rec1 = [undefined, undefined, 150, 200, undefined]

Will hide these undefined points, but it causes the point labels for 150 and 200 to appear at incorrect positions, as shown in the image. Appreciate any helpful guidance.

Answer №1

To ensure proper placement of your points, it is recommended to use a 2-dimensional array instead of a "flat" array:

rec1 = [[3, 150], [4, 200] ]; // defining 2 points with (x, y) coordinates
rec2 = [60, 120, 179, 240, 300];
rec3 = [50, 100, 150, 200, 250];

I have created a jsfiddle demonstration to illustrate this concept. I have slightly adjusted the position of the point [3, 150] to [3, 90] in order to show its correct label placement: http://jsfiddle.net/5wgcqyet/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Finding the substring enclosed by two symbols using Javascript

I'm working with a string that contains specific symbols and I need to extract the text between them. Here is an example: http://mytestdomain.com/temp-param-page-2/?wpv_paged_preload_reach=1&wpv_view_count=1&wpv_post_id=720960&wpv_post_se ...

Generate dynamic routes in Next.js only when needed

I'm currently working on a project using NextJS to create a frontend for a database that contains thousands of products, with the expectation of significant growth. The site/products/ route is functioning well, but I wanted to add a route to view indi ...

Unable to display the response received in jQuery due to a technical issue with the JSON data

Hey there! I'm fairly new to JSON and web development, so please bear with me if I'm not explaining the problem in the most technical terms. I recently encountered an issue where I retrieved a JSON response from a website, but I couldn't di ...

Payload bytes do not match the expected byte values

I am facing an issue where the image data sent by the user is getting saved on the server in a corrupt state. Here is the structure of my setup: - api . index.js - methods . users.js (I have omitted unrelated files) There is a server.js outside ...

Issue encountered: Unable to fetch username and password from request

Currently, I am developing a login and registration system. However, when I input the correct details in my register Post method, the request remains pending and I cannot identify the error. The specific error message it presents is data and salt arguments ...

Tips for positioning a delete button at the start of the row I am transferring to a different table

Displayed below are the contents of the initial table. <% for(int i = 0; i < result.length; i++) { %> <tr id='player-listing-<%=i %>'> <td style="vertical-align: top;"><button onclick="myFunction2(<%=i%> ...

Neglecting to send a socket signal while assigning a variable to a socket message

In my client-side script, I am using the following snippet: socket.on('bla', function(data) { if (data == ID) { console.log('I don't understand what's happening here.'); } }) socket.on(ID, function(data) { ...

display the information stored within the sports attribute using React

I am attempting to display the values stored in the sports property. So, I inserted a console log within the sports property. However, an error is being thrown: Syntax error: C:/codebase/src/containers/sports.js: Unexpected token, expec ...

What is the best way to monitor a document variable that is set after a component has been

Is there a way to access the variable document.googleAnalytics, added by Google Tag Manager, for A/B testing on a Vue.js page? I attempted to initialize the variable in both the mounted and created methods of the component, but it returns as undefined: ex ...

Implement a feature that adds a circle element when an image is clicked in a React application

I am attempting to create a program that allows users to add circles to an image by clicking on it. Essentially, when the user clicks at coordinates (x,y), a circle with a radius of 10 will appear at that location. I am exploring ways to implement meta-pro ...

Angulating Service Testing

I am encountering an issue that I'm not sure how to resolve because I am inexperienced when it comes to testing. Currently, I am testing a service that includes the following code: import { Injectable } from '@angular/core'; import { Endpo ...

What is the best way to retrieve a complete DynamoDB scan response using aws-sdk-js-v3 without object types included in the marshaled response?

After struggling with the AWS JS SDK V3 documentation and examples, I decided to share my findings to help others. The official SDK docs were frustrating and misleading, especially when it came to showing marshaled output properly. While the DDB Doc client ...

Exploring the functionality of $scope.$watch in ES6

I'm encountering a problem while utilizing $scope.$watch in my ES6 project. The watch triggers once and then doesn't work thereafter. Below is the snippet of code: export class SomeController { constructor($log, $scope) { 'ngInject&a ...

Show an image in a specific location on the webpage using JavaScript/jQuery

Is there a way for me to show a visual element at specific coordinates on the browser screen? For example, let's say I have calculated dynamic offsets of { left: 336, top: 378 }, and I would like to display a small line or image at that position. Is ...

Encountering a TypeError in Material UI React Autocomplete

I tried using the demo code from here in my application, but it's not functioning as expected. I'm unsure of the differences between my code and the example on the website. The errors I'm encountering are: react-dom.development.js:14724 Unc ...

Show off a sleek slider within a Bootstrap dropdown menu

Is there a way to display a sleek slider within a Bootstrap dropdown element? The issue arises when the slider fails to function if the dropdown is not open from the start, and the prev/next buttons do not respond correctly. For reference, here is my curr ...

"Exploring the process of comparing dates using HTML, AngularJS, and Ionic

I am working on an HTML file that shows a list of notification messages. I am trying to figure out how to display the time difference between each notification. The code snippet below displays the notifications and includes the time for each one: <ion- ...

Implement rounded corners on D3js Donut Chart

In my AngularJS application, I have successfully implemented a donut chart as shown below: https://i.stack.imgur.com/3GVwN.png However, the design mockup indicates that we would like to achieve this look, with a border-radius property applied to the gree ...

Tips for overcoming a script error within the body of a Next.js project

I encountered an error in my _document.js file when trying to add a script to the body of my document. Here is the specific error message that was returned: https://i.stack.imgur.com/QG5zb.png ./pages/_document.js Error: x Expected '}', got &a ...

The FileReader.result is found to be null

Currently, I am in the process of setting up a page that allows users to upload a txt file (specifically a log file generated by another program) and then modify the text as needed. Initially, my goal is to simply console.log the text, but eventually, I pl ...