I am trying to plot 6 superposed time series created by 3 sensors on 2 machines:
Sensor 1:
Time serie 1 (first machine)
Time serie 2 (second machine)
Sensor 2:
Time serie 3 (first machine)
Time serie 4 (second machine)
Sensor 3:
Time serie 5 (first machine)
Time serie 6 (second machine)
I found that c3.js is a perfect fit for my need here.
The only (big) problem is that c3.js plot only one label by chart like here:
As one can see, data1 (blue) correspond to one serie and data1 (orange) correspond to one serie, the same thing for data3 (green)
What I need :
I need the sensors to be my labels => 3 labels and 2 time series by label.
Is there a way to do it ?
Related
I am trying to create the UI to show the X and Y axis line graph using Svg Charts in React Native as above attached screenshot. I have an array for the x and y-axis respectively. Example:
var xAxisData = [1.002, 1.045, 1.084, 2.08, 2.021, .... so on] // price list
var yAxisData = [12-11-2021, 13-11-2021, 14-11-2021, 18-11-2021, .... so on] // dates
I have plotted the y-axis graph for that, had filtered & sort the array on the basis of date and some interval so will show only some dates as intervals on the y-axis for example my start date is 20 April and the end date is 20 July. The plotted y-axis will be shown as for only 4 dates as 4 intervals in the period of 4 months.
But now need to plot the x-axis graph, I am getting stuck on what basis will filter or sort the x-axis array within some interval or value.
Note: I Don't want to show or plot all the values of the array for the x and y-axis. My requirement is needed to show the values of the x and y-axis at some intervals
Can anyone help with the same?
I'm wondering if there is any way in chart.js that I can group chart legends as I want.
eg: First set of Data 1 to Data 4 as one group & second set of Data 1 to Data 4 as one group.
DATA 1 DATA 2 DATA 3 DATA 4
Group 1
DATA 1 DATA 2 DATA 3 DATA 4
Group 2
Is this achievable?
In highchart, Drilldown Column chart we have. In this I want to generate data randomly.
For example : Number is 300.
Then for this drilldown no. of data are 4. Hence need to divide this 300 into such a ways that where 4 no.s total should be 300.
Or add 4 numbers(drilldown data) and generate root number which will be 300.
How can we do this?
I am having an issue with the gap between separated series of highcharts.
For example, I have a chart with two series. One starts from (1st March 2004) and the other starts from (1st March 2009). They do not overlap each others. When showing on the chart, the barchart automatically zips the time between two chart (skipping the year 2005, 2006...2008) and display 2 time series closing to each others.
Please refer to this for more detail:
https://jsfiddle.net/quangvinh910/6vr6dg15/2/
pointStart: Date.UTC(2004, 3, 1),
pointStart: Date.UTC(2009, 3, 1)
How can I show show the full time range between that on the x-axis?
Highstock automatically will try and strip out the gaps in the data so that there is not lots of "dead" space. This is done with the option xAxis.ordinal:
In an ordinal axis, the points are equally spaced in the chart
regardless of the actual time or x distance between them. This means
that missing data for nights or weekends will not take up space in the
chart. Defaults to true.
It is true by default. Try setting it to false. Demo.
I have data which is all time series, so the x axis of my d3 graph is always time. I need to support having multiple lines on one graph, but the different lines can have vastly different domains for the y axis data. For example line 1 can be
1 2 3 4 5 for times 1-5
5000 10000 15000 20000 25000 for times 1-5
What is a good way to try to handle this in d3?
You could have two separate Y axes. One on the left hand side of the graph and one on the right.
This post describes setting up a two line graph. http://www.d3noob.org/2013/01/adding-more-than-one-line-to-graph-in.html
And this post describes setting two different y axes for the lines with a similar scale problem to the one you describe. http://www.d3noob.org/2013/01/using-multiple-axes-for-d3js-graph.html
The end result is something like this.
I would recommend a log scale if you don't have zeros for the y values. In any case, simply create a single y scale that ranges from the minimum to the maximum of all lines and use that for everything.
Have you considered stacking two plots on identical x-axis scales? Or for a rapid comparison, I sometimes re-scale one data series to bring it into the domain of the other, then note it in the legend. "series 1 (x10 scaling)"