none
How to display time-based Machine Statuses using HTML5, CSS and SVG ?

    Question

  • We need to display machine statuses based on time according to the attached screenshot using HTML5, CSS and SVG ?

    I thought of using Stack Bar chart but in the current context, a status can be repeated multiple times in a given timespan.
    For ex, In a given timespan, 11PM - 11:30Pm, what are the different statuses a machine is transitioned into ?
    Each state is represnted by a color.

    Can any one suggest how to generate this chart ?MachineStatusBarChart
    Tuesday, February 27, 2018 1:29 PM

All replies

  • Hi Bhanu Prakash T

    According to your description, I suggest you could try to use highchart.

    Details, you could refer to below codes:

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    

    Javascript:

    Highcharts.chart('container', {
        chart: {
    					type: 'columnrange',
    					inverted: true
    				},
         legend: {
            enabled: true
        },
    
    				title: {
    					text: 'Date'
    				},
    				xAxis: {
    					categories: [
    						'Categ1','Categ2'	, 'Categ3'			]
    				},
    				yAxis: {
    					type: 'datetime',
    					title: {
    						text: ''
    					},
    					minTickInterval: 3600*1000,
              min:         Date.UTC(2017,1,1,0,0),
                max: Date.UTC(2017,1,1,23,59),
    				},
    				tooltip: {
        formatter: function() {
            return  this.series.name;
        }
    
     
    				},
                pointInterval: 24 * 3600 * 1000, // one day
    				series: [
    					{
    						name: 'Joe',
    						color: '#ffae3d',
    						data: [
    							{
                  	x:0,
                  	low:Date.UTC(2017,1,1,1,0),
                    high:Date.UTC(2017,1,1,1,32),
                    color:'#ffae3d'
                  },
                  {
                  	x:1,
    low:Date.UTC(2017,1,1,1,0),
                    high:Date.UTC(2017,1,1,1,32),
                    color:'#ffae3d'
                  },
                                {
                  	x:2,
    low:Date.UTC(2017,1,1,1,0),
                    high:Date.UTC(2017,1,1,1,32),
                    color:'#ffae3d'
                  },
                                {
                  	x:2,
    low:Date.UTC(2017,1,1,23,0),                high:Date.UTC(2017,1,1,23,32),
                    color:'#ffae3d'
                  },
                  ]
    					},					{
    						name: 'Tom',
    						color: '#000000',
    						data: [
    							{
                  	x:0,
                  	low:Date.UTC(2017,1,1,2,0),
                    high:Date.UTC(2017,1,1,2,32),
                    color:'#000001'
                  },
                  {
                  	x:1,
    low:Date.UTC(2017,1,1,1,0),
                    high:Date.UTC(2017,1,1,2,32),
                    color:'#000001'
                  },
                                {
                  	x:2,
    low:Date.UTC(2017,1,1,2,0),
                    high:Date.UTC(2017,1,1,2,32),
                    color:'#000001'
                  },
                                {
                  	x:2,
    low:Date.UTC(2017,1,1,21,0),                high:Date.UTC(2017,1,1,21,32),
                    color:'#000001'
                  },
                  ]
    					}
              
    				]
    });

    Result:

    http://jsfiddle.net/t9rsf6n7/179/

    Best Regards,

    Brando


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, February 28, 2018 6:57 AM
  • Could you also provide few pointers on generating the same chart using D3 please ?

    Thanks so much for your help.

    Wednesday, February 28, 2018 7:53 AM
  • @Brando,

    will you do my homework and assignments too?

    Regards.


    Rob^_^

    Thursday, March 1, 2018 4:35 AM