zingcharts with multiple lines on x axis representing time

I am facing a rather interesting challenge with plotting data. I want to create a chart where time is the x-axis scale and multiple lines are plotted, each with varying time intervals between data points. While zingcharts has provided documentation on general scale elements, it doesn't specifically address this unique case that I'm trying to achieve.

Currently, all lines plot on the same time step, causing discrepancies in length when some lines have fewer data points (greater time between points). This issue does not arise when there's only one chart using its data timestamp.

Should I address this complexity at the backend or can Zingcharts handle it on the frontend?

Here is my JavaScript code for a single plot that works well. Do I need to modify it to accommodate the aforementioned time scale variation with multiple plots?

    var myChart=
    {
        "type": "line",
        "title":{
            "text":" value over time --- 38 data points"
        },
        "legend": {},
        "tooltip": {},
        "crosshair-x":{},
        "plot": {
            "valueBox": {
                "type": "max, min",
                "placement": "top",
                "visible" : false
            }
        },
        "scaleX": {
            "label": {
                "text": "Time",
            },
             "values" : [ 1418947599.0,  1418947599.0,  1418947599.0,  1418947599.0,  1418947599.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0...
javascriptjsonchartszingchart

Answer №1

According to Luke, there are two ways to handle [x,y] value pairs within the values array. Alternatively, you can assign another series to a different scale-x-n object as demonstrated here.

To configure scale-x, scale-x-2, and scale-x-n objects individually, set them in each series object using the "scales" attribute:

"series":[
{
    "values": [-0.31408204379961535, -0.3140820437996114, ...],
    "scales":"scale-x,scale-y"
},
{
    "values": [-0.31408204379961535, -0.3140820437996114, ...],
    "scales":"scale-x-2,scale-y"
}
]

It's worth noting:

ZingChart timestamps require milliseconds, so be sure to add three additional zeros.

If your scale-x values repeat frequently, when using the [x,y] pair method, unusual results may occur. Consider if there should be time gaps between points or multiple values for each timestamp within a single series.

Answer №2

When I first attempted to utilize ZingCharts, this issue tripped me up. However, the solution is actually quite straightforward:

"values": [[x,y],[x,y],...],

Alternatively:

"series": [{"values": [[timestamp,value],[timestamp,value],...]},
           {"values": [[timestamp,value],[timestamp,value],...]}]

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

Using ajax with Django to optimize queries involving select_related() and many to many fields

Seeking help with a view that needs to handle both ajax and regular HTTP requests. Here's a simplified version of what I have: def tag_search(request, tag): items = Item.objects.filter(tags__tagname__exact=tag) if request.is_ajax(): ...

jqueryajaxdjangojsonmany-to-many

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

javascriptarrayshtmlsvg

Empty req.body in Express JS is not fulfilling the necessary data requirements

I've been racking my brain for hours trying to figure out why req.body is showing up empty. I've scoured every corner of stackoverflow and tried every solution that I could find, but nothing seems to be working. Express.js POST req.body empty ...

javascriptnode.jsexpresspost

The jQuery ajax call is returning some undefined results, which is in contrast to the network response, which appears to be completely accurate

My system utilizes an oracle-db and a php-script that is triggered by a query ajax-call. Here is the php-script: $query = 'SELECT pl.event_id, pl.og2, d.name dst, pl.state, pl.note, pl.createdate FROM publevels pl LEFT JOIN dst d on (d.og2 = pl.og ...

jqueryjsonajax

Altering information with the use of history.pushState throughout time

I've created a template that I want to load using the jQuery .load() function. However, during testing, I discovered that it's not loading at all. Here is the code I'm trying to use for loading: function open() { history.p ...

javascriptphpjqueryhtml

What is the method for adding a prefix to every line in JavaScript?

I'm currently working on a React project and dealing with a string that may contain newlines. I'm looking for the most efficient way to inject a symbol at the start of each line. I've considered exploding the string into an array and adding ...

javascriptstringreactjs

Utilizing an object map to pass objects as props without losing their keys

I have an array of objects named obj, structured as follows: { "root": [ { "key": "mihome", "label": "home", "action": "url", ...

javascriptreactjs

Exploring the history and present state of Vue lifecycle hooks

Is there a way to access previous and current data in the updated lifecycle hook in Vue, similar to React? I want to be able to scroll a list of elements to the very bottom, but for this I need: The already rendered updated DOM (to calculate the scroll) ...

javascriptvue.jsscrollvuejs2hook

What is the best way to implement an anchor link in my JavaScript code?

I'm struggling to wrap my head around this, as my thoughts seem to have vanished. On my webpage, there's a button element with an id: for example <button id="someId"></button> Within the document.ready function, I've set up an ...

javascriptjqueryhtmlanchorhref

What is the best way to supply JSON data to the "The Wall" MooTools plugin while feeding?

I came across this amazing plugin called "The Wall" but unfortunately, neither the documentation nor the examples demonstrate how to utilize JSON objects with it. Imagine we have a JSON array like: [ { href : "/my/photo/image1.jpg", title : "Me an ...

javascripthtmljsonmootools

Resolving the Enigma: Querying jQuery for Real-Time Validation and

I'm fairly new to jQuery and I'm facing a challenge in my registration form script. Specifically, I want to check if the entered username or email is already taken while the user is typing. Currently, this functionality works by making a json req ...

javascriptjqueryajaxjson

The inner workings of JavaScript functions

I am curious about how JavaScript functions are executed and in what order. Let's consider a scenario with the following JavaScript functions: <span id=indicator></span> function BlockOne(){ var textToWrite = document.createTextNode ...

javascriptjquery

Hyphens make Tablesorter sort numeric fields uniquely

I have a table where data is displayed in the format of YYYY-####. Sometimes, there are values like 2012-456 and 2012-1234. By default, the sorting places 2012-1234 before 2012-456. If I change the sort to 'numeric', it disrupts the order of othe ...

javascripttablesorter

Revert animation back to its initial position with the help of JavaScript

After implementing the script below, I successfully managed to shift my image to the right upon clicking: <script> var myTimer = null; function move(){ document.getElementById("fish").style.left = parseInt(document.getElementById("fish ...

javascript

How to resolve undefined callback when passing it to a custom hook in React Native

I'm facing an issue with passing a callback to my custom hook: export default function useScreenshotDetection(onScreenshot) { useEffect(() => { ... onScreenshot(); ... }, []); } Strangely, the callback is not being detected ...

javascriptreactjsreact-native

Where can I find bogus JSON APIs specifically designed for retail or ecommerce purposes?

Looking for a site that offers fake JSON data containing an array of objects related to stores, including images, prices, and names. I want to enhance my skills in working with JSON Rest APIs using GET and POST requests. Any recommendations other than a ...

jsonmocking

Can a TypeScript file be created by combining a declaration file and a .js file?

It is commonly understood that declaration files are typically used for libraries rather than projects. However, let's consider a scenario where an existing JavaScript project needs to be migrated to TypeScript by creating d.ts files for each source ...

javascriptreactjstypescriptdeclaration-files

Encountering a d3.js runtime issue following the transition to Angular 8

I've been experimenting with upgrading my Angular 6 application to Angular 8. It compiles fine, but I'm facing a runtime error as soon as it runs: "d3.js:8 Uncaught TypeError: Cannot read property 'document' of undefined". The specific ...

javascriptangulard3.jsnode-modulesangular8

Transferring JSON data from Python to PHP 5.3

I'm attempting to transmit a dictionary that was converted to JSON from python to php, but the json_decode function is unable to decode it. I tried decoding it on this online tool and it worked without any issues. Here's a snippet of the JSON da ...

phppythonjson

Is there a way to dynamically insert the value of an input field into a text field in real time using Javascript or ajax?

In my form, there is a text field with the id #image_tag_list_tokens. It looks like this: = f.text_area :tag_list_tokens, label: "Tags (optional) ->", data: {load: @image_tags }, label: "Tags" Additionally, I have an input field and a button: <i ...

javascriptjqueryajaxjquery-tokeninput