使用时间作为x轴的多行图

Question

So I am trying to do a rather unique case of plotting it seems. I want to use time as my x-axis scale and I will have 2-5 lines being plotted, each with a different amount of time between datapoints. I am using zingcharts and they have some good documentation on general scale elements but I don't know if this is a case that is possible.

Right now they plot on the same timestep and then the one that has less datapoints (greater time between points) ends up being shorter and not being displayed in a true manner. It works fine when I have only one chart and use that data's timestamp but it doesn't work for two.

Is this something I need to handle on the backend or can this be done in Zingcharts on the frontend?

This is my javascript of a single plot that works fine. Do I need to change this to allow for the above time scale 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,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0,  1418947600.0, ],
            "zooming" : true,
        },
        "scaleY": {
            "label": {
                "text": "Value"
            },
            "zooming" : true,
        },
        "series": [
                        {
                            "text" : "sim data - raw value",
                            "values": [-0.31408204379961535, -0.3140820437996114, -0.3140820437996066, -0.3140820437996098, -0.3140820437996114, -0.31408204379960986, -0.314082043799613, -0.3140820437996122, -0.3140820437996098, -0.31408204379960664, -0.31408204379960825, -0.3140820437996067, -0.3140820437996083, -0.3140820437996114, -0.3140820437996098, -0.3140820437996154, -0.3140820437996114, -0.3140820437996123, -0.31408204379960586, -0.31408204379960913, -0.3140820437996099, -0.31408204379960825, -0.3140820437996098, -0.31408204379960664, -0.3140820437996098, -0.3140820437996114, -0.31408204379960825, -0.31408204379960986, -0.314082043799605, -0.3140820437996099, -0.31408204379960974, -0.3140820437996113, -0.31408204379961147, -0.31408204379960664, -0.3140820437996083, -0.31408204379960997, -0.3140820437996083, -0.31408204379961135]
                        },  
          ]
    };

    window.onload=function(){
        zingchart.render({
            id:"myChartDiv",
            data:myChart,
            height:600,
            width:"100%"
        });
    };

Answer 1

Luke is correct. You can use [x,y] values pairs within your values array, or you can assign the other series to another scale-xn object, as seen here .

Configure your scale-x, scale-x-2, and scale-xn objects individually, and set them in each series object using the "scales" attribute:

"series":[
{
    "values": [-0.31408204379961535, -0.3140820437996114, -0.3140820437996066, -0.3140820437996098, -0.3140820437996114, -0.31408204379960986, -0.314082043799613, -0.3140820437996122, -0.3140820437996098, -0.31408204379960664, -0.31408204379960825, -0.3140820437996067, -0.3140820437996083, -0.3140820437996114, -0.3140820437996098, -0.3140820437996154, -0.3140820437996114, -0.3140820437996123, -0.31408204379960586, -0.31408204379960913, -0.3140820437996099, -0.31408204379960825, -0.3140820437996098, -0.31408204379960664, -0.3140820437996098, -0.3140820437996114, -0.31408204379960825, -0.31408204379960986, -0.314082043799605, -0.3140820437996099, -0.31408204379960974, -0.3140820437996113, -0.31408204379961147, -0.31408204379960664, -0.3140820437996083, -0.31408204379960997, -0.3140820437996083, -0.31408204379961135],
    "scales":"scale-x,scale-y"
},
{
    "values": [-0.31408204379961535, -0.3140820437996114, -0.3140820437996066, -0.3140820437996098, -0.3140820437996114, -0.31408204379960986, -0.314082043799613, -0.3140820437996122, -0.3140820437996098, -0.31408204379960664, -0.31408204379960825, -0.3140820437996067, -0.3140820437996083, -0.3140820437996114, -0.3140820437996098],
    "scales":"scale-x-2,scale-y"
}
]

A couple of things to note:

ZingChart uses timestamps in milliseconds, so you should add 3 additional 0's to your timestamps.

Your scale-x values seem to repeat quite a bit, so if you're using the [x,y] value pair method, you may see some funky results. Are there supposed to be gaps in time between each point, or are there multiple values to plot for each timestamp, in a single series?

Answer 2

This caught me out the first time I tried to use ZingCharts. But the answer is actually quite simple:

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

Or:

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