1. Home
  2. Forum
  3. ASP.NET Core
  4. Step Line Chart Y axis

Step Line Chart Y axis

Hi,

1.Looking at the help documentation of the syncfusion Chart component, the Y-axis settings cannot be set to the 24-hour clock.
Is there a Y-axis that can be set to a 24-hour clock? There is no Chart can draw the style shown in the following figure:


2.Can I Display multiple lines in same chart @ two different Y axis ?
3.Can you give some examples of Chart's reference?
4.X axis is time, axis step size is dynamic, axis label is in 24H:Min format，start with 1 hour duration, step size is 5 mins. After 1 hour, double the duration to 2 hours, step size is 10 minutes; After 2hours,  double the duration to 4 hours, step size is 20 minutes, and so on.  Is there a chart support or composite component to meet this requirement?

Thanks,
Linsee

5 Replies
DD Dharanidharan Dharmasivam Syncfusion Team May 9, 2018 11:48 AM UTC

Hi Linsee, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your queries. Kindly find the response for your queries below. 
 
Query : Date time for y axis: 
Response: Currently we are not having support for providing date time values to Y-axis. As of now we can only specify numeric and logarithmic values to Y axis.  
 
However your requirement can be achieved as a workaround. We have converted the datetime values into milliseconds and given those values as input to y value and by using axesLabelRendering event  we have changed the labels using label format for the axis. Please find the below code example.   
 
ASP.NET Core 
 
 
<ej-chart id="container" load="chartLoad" axes-label-rendering="axesLabelRendering"> 
                     
   //The below highlighted code snippet is used to add multiple axis 
<e-axes> 
  <e-axis opposed-position="true" visible="true" name="yAxis" orientation="Vertical"> 
</e-axis>  
 
</ej-chart> 
Converted datetime values to milliseconds and bind to y values as highlighted below 
var chartData = [ 
                      { x: new Date(2000, 06, 11, 16, 15, 0), y: new Date(2000, 02, 11, 2, 0, 0).getTime(), y2: new Date(2000, 02, 11, 4, 0, 0).getTime() }, 
                     { x: new Date(2000, 06, 11, 16, 20, 0), y: new Date(2000, 02, 11, 2, 0, 0).getTime(), y2: new Date(2000, 02, 11, 4, 0, 0).getTime() }, 
                     //... 
                    ]; 
 
function chartLoad(sender) { 
        Bind the data source for chart 
        //... 
               
       Specified the interval for y axis in double, not as date time 
      sender.model.primaryYAxis.range.min = new Date(2000, 02, 11, 0, 0, 0).getTime(); 
      sender.model.primaryYAxis.range.max = new Date(2000, 02, 11, 3, 0, 0).getTime(); 
 
      In similar way, specify the ranges for multiples axes here 
 
}                                    
 
function axesLabelRendering(sender) { 
         
        if (sender.data.axis.orientation == "vertical") { 
            var label = new Date(sender.data.label.Text); 
            sender.data.label.Text = label.getHours().toString() + ":" + label.getMinutes().toString(); 
        } 
        //... 
    } 
 
 
Screenshot: 
 
 
 
Sample for reference can be find form below link. 
Sample link: 
 
For more information on adding multiple axis, kindly find the help document. 
 
 
Query : X axis is time, axis step size is dynamic, axis label is in 24H:Min format，start with 1 hour duration, step size is 5 mins. After 1 hour, double the duration to 2 hours, step size is 10 minutes; After 2hours,  double the duration to 4 hours, step size is 20 minutes, and so on.  
Response:  We would like to let you know that, by default depends upon the data the interval will be calculated. If you need to customize the interval, kindly set the interval for the axis as depicted below. 
 
<ej-chart id="container "> 
       <e-primary-x-axis> 
            <e-range interval="1"></e-range> 
        </e-primary-x-axis> 
</ej-chart> 
 
 
 
Kindly revert us, if you have any concerns. 
 
Thanks, 
Dharani. 
 


LI linsee May 10, 2018 10:36 AM UTC

Hi Dharani,
I'm very sorry, I had to ask the X-axis set to a 24-hour clock, and I wrote the wrong Y-axis. Whether the display of the X axis is the same as the example code shown in the Y axis above?

When the drawing time is within 1 hour, the X axis shows: the minimum value is 0, the maximum value is 1 hour, and the time interval is 5 minutes,
When the drawing time is between 1 hour and 2 hours, the X axis shows: the minimum value is 0, the maximum value is 2 hours, and the time interval is 10 minutes,
When the drawing time is between 2 hours and 4 hours, the X axis shows: the minimum value is 0, the maximum value is 4 hours, and the time interval is 20 minutes,
When the drawing time is between 4 hours and 8 hours, the X axis shows: the minimum value is 0, the maximum value is 8 hours, and the time interval is 40 minutes,and so on;

How to achieve the style of the example X axis change? What settings are needed ? X-axis rotation display subscript?
http://www.syncfusion.com/downloads/support/forum/135481/ze/LiveChart-1351714074  

Thanks,
Linsee

BP Baby Palanidurai Syncfusion Team May 10, 2018 05:15 PM UTC

Hi Linsee, 
         
     We have analyzed your query. As for your requirement we have prepared a sample with button click. In that button click, we have changed data source and changed the interval based on the drawing time using setInterval method.  
 Please find the code snippet below to achieve this requirement. 
  
                var count = 0 
                function change() { 
                    var start = setInterval(function () { 
                    count++ 
                    myTimer(count) 
                }, 3000); 
                function myTimer(count) { 
                    var chart = $("#container").ejChart("instance"); 
                    if (count < 4) { 
                        for (var i = 0; i < 7; i++) { 
                            if (Math.random() > .5) { 
                                value += 2 * Math.random(); 
                            } 
                            else { 
                                value -= 4 * Math.random(); 
                            } 
                            var point1 = { x: new Date(1930, 0, 0, count, i * 10), y: value }; 
                            series1.push(point1); 
                        } 
                        chart.model.series[0].dataSource = series1; 
                        chart.model.primaryXAxis.range.interval += 10; 
                        chart.redraw(); 
                    } else { 
                        clearInterval(start); 
                    } 
                } 
            } 
Screenshot: 
Initial rendering: 
 
  
After change data source and interval: 
 
  
Sample for your reference can be find from below link, 
 http://www.syncfusion.com/downloads/support/forum/137434/ze/bower1594872839  
For axis label rotation, you can use labelRotation property in primaryXAxis options. And also we are having smart axis labels, when axis labels overlap with each other based on chart dimensions or size you can use labelIntersectAction property. For more information on smart axis labels, kindly find from the help document 
Please find the below code snippet to achieve this requirement. 
<e-primary-x-axis label-rotation="45"> 
           </e-primary-x-axis > 
  
Please let me know, if you have any queries. 
  
Thanks, 
Baby.

LI linsee May 11, 2018 11:35 AM UTC

Hi Baby,

1. How can the X-axis in the real-time drawing have the same effect as the example you gave?
2. In one case, the total amount of data display is unchanged, and the graph scrolls in the direction of the X axis.
3. In the other case, the total number of data displays continues to increase. How long does it take for the X-axis of the chart to increase as the total number of data increases?

Can you implement this real-time drawing example?
Linsee

BP Baby Palanidurai Syncfusion Team May 14, 2018 12:06 PM UTC

Hi Linsee, 

Please find the following response for your queries. 

Query 
Response 
How can the X-axis in the real-time drawing have the same effect as the example you gave? 
As for your requirement, we have prepared a live data sample in date time axis. In this sample, we have changed interval of primaryXAxis based on hours of data. 

Please find the code snippet below to achieve this requirement and you can change this with respect to your scenario. 
 
var chartobj,count = 0, i =0 , chartData = null, value = 100, 
               intervalId; 
function chartLoad(sender) { 
chartobj = this; 
sender.model.series[0].points = generateData(); 
intervalId = window.setInterval(update, 400); 
}  
function generateData() { 
  var num = 12, data = [], data1 = [];; 
  for (i = 0; i < num; i++) { 
    if (Math.random() > .5) { 
      value += 2 * Math.random(); 
    } 
    else { 
      value -= 4 * Math.random(); 
    } 
  data[i] = { x: new Date(1930, 0, 0, 0, i * 5), y: value }; 
 } 
  chartData = data; 
}; 
 
 
function update() { 
   if (chartobj.model != null) { 
     if (Math.random() > .5) { 
        value += 2 * Math.random(); 
     } 
     else { 
         value -= 4 * Math.random(); 
     } 
     chartData.push({  
         x: new Date(1930, 0, 0, 0, i * 5),  
         y: value }); 
     i++; 
     chartData.shift(); 
     chartobj.model.series[0].points = chartData; 
     var hour = chartData[chartData.length - 1].x.getHours(); 
     if (hour === 1) {                                
        chartobj.model.primaryXAxis.range.interval = 5; 
     } else if (hour === 2) { 
                          
        chartobj.model.primaryXAxis.range.interval = 10; 
     }                      
     $("#container").ejChart("redraw"); 
  }              
   else { clearInterval(intervalId); } 
             
}; 

Screenshot: 
First One hour Data interval 
 
Two hour Data with interval: 
 
Sample for your reference can be find from below link, 
  
In one case, the total amount of data display is unchanged, and the graph scrolls in the direction of the X axis. 
Unfortunately, we are unable to reproduce the issue at our end. Could you please modify the attached sample or provide your sample with replication steps which will be helpful in further analysis and provide you the solution sooner. 

In the other case, the total number of data displays continues to increase. How long does it take for the X-axis of the chart to increase as the total number of data increases? 
While increasing the total number of  data, then X axis also updated automatically according to the increased data.  If your query is misunderstood at our end, kindly revert us with more information on your query, so that we can provide you the solution sooner. 


Thanks, 
Baby 


Loader.
Up arrow icon