Log in to AnswerLog in to Follow
UserImage.jpg
Vaibhav Mathur
75Views
7Comments
Highcharts with dynamic data
Question
Reactive
Charts
Application Type
Reactive

Hey Everyone


  "  chart: {
      
        
    events: {
load: function(){
$('.highcharts-legend-item path').attr('stroke-width',8);
$('.highcharts-series-6 path').attr('stroke-width',2);
}
}
      
    },
    
  
    title: {
        text: '',    align: 'left',
    },
    
   legend: {
   
   align: 'left',
   verticalAlign: 'top',
     symbolHeight: 15,
    symbolWidth:8,
    symbolRadius:0 
 },


     
    xAxis: {
type: 'datetime',


     title: {
            text: ''
        },
      gridLineColor: '#e0e1e1',
        gridLineWidth: 1,
          labels: {
         format: '{value:%l:%M}',
        },
     tickInterval: 300 * 1000 //5 minutes
     },
    yAxis: [
        {gridLineWidth: 0,
            minorGridLineWidth: 0,
            labels: {
            format: '{value}',
            style: {
                color: '#72CCC0',
                fontSize: '14px'
            }
        },
         title: '',
    margin:20
        },
        {gridLineWidth: 1,
            minorGridLineWidth: 0,
labels: {
            format: '{value}',
            style: {
                color: '#5E89D8',
fontSize: '14px'
            }
        },
 title: '',
        
        },
        {gridLineWidth: 0,
            minorGridLineWidth: 0,
labels: {
            format: '{value}',
            style: {
                color: '#FFD00A',
fontSize: '14px'
            }
        },
 title: '',
         
        },
        {gridLineWidth: 0,
            minorGridLineWidth: 0,
labels: {
            format: '{value}',
            style: {
                color: '#A16CB4',
fontSize: '14px'
            }
        },
 title: '',
         opposite:true
        },
        {gridLineWidth: 0,
            minorGridLineWidth: 0,
labels: {
            format: '{value}',
            style: {
                color: '#6A864E',
fontSize: '14px'
            }
        },
 title: '',
         opposite:true
        },
        {gridLineWidth: 0,
            minorGridLineWidth: 0,
labels: {
            format: '{value}',
            style: {
                color: '#7E682D',
fontSize: '14px'
            }
        },
 title: '',
         opposite:true
        }],
 
   
    series: [
    { 
        
        yAxis: 0,
        name: 'Plant Input Feed Rate',
       
        
       data:[[Date.UTC(2012,11,30,8,30,0,0),3],[Date.UTC(2012,11,30,8,35,0,0),7],[Date.UTC(2012,11,30,8,40,0,0),8],[Date.UTC(2012,11,30,8,45,0,0),1],[Date.UTC(2012,11,30,8,50,0,0),5],[Date.UTC(2012,11,30,8,55,0,0),9],[Date.UTC(2012,11,30,9,0,0,0),6],[Date.UTC(2012,11,30,9,8,0,0),8],[Date.UTC(2012,11,30,9,13,0,0),4],[Date.UTC(2012,11,30,9,15,0,0),2],[Date.UTC(2012,11,30,9,20,0,0),9],[Date.UTC(2012,11,30,9,25,0,0),2]],
       color: '#72CCC0',
        lineWidth:2,
    marker: {

              enabled: false,
                type: 'square',

           
          
        },
          
   legend: {
   
   align: 'left',
   verticalAlign: 'top',
borderWidth: 5,
    symbolHeight: 40,
    symbolWidth: 22,
   
    flotting: true
   
  
 },
        
   },
{       yAxis: 1,
        name: 'Bed Mass',
         marker: {
         enabled: false,
            symbol: 'square'
        },
        color: '#5E89D8',
        lineWidth:2,
       data:[[Date.UTC(2012,11,30,8,30,0,0),4.8],[Date.UTC(2012,11,30,8,35,0,0),34.99],[Date.UTC(2012,11,30,8,40,0,0),35.08],[Date.UTC(2012,11,30,8,45,0,0),35.66],[Date.UTC(2012,11,30,8,50,0,0),35.8],[Date.UTC(2012,11,30,8,55,0,0),35.902],[Date.UTC(2012,11,30,9,0,0,0),34.7],[Date.UTC(2012,11,30,9,8,0,0),34.8],[Date.UTC(2012,11,30,9,13,0,0),35.2],[Date.UTC(2012,11,30,9,15,0,0),36.4],[Date.UTC(2012,11,30,9,20,0,0),36.9]]
    },
{       yAxis: 2,
name: 'Rake Torque',
        color: '#FFD00A',
         marker: {
         enabled: false,
            symbol: 'square'
        },
        lineWidth:2,
       data:[[Date.UTC(2012,11,30,8,30,0,0),20.02],[Date.UTC(2012,11,30,8,35,0,0),21.44],[Date.UTC(2012,11,30,8,40,0,0),22.06],[Date.UTC(2012,11,30,8,45,0,0),24.2],[Date.UTC(2012,11,30,8,50,0,0),21],[Date.UTC(2012,11,30,8,55,0,0),23.8],[Date.UTC(2012,11,30,9,0,0,0),22],[Date.UTC(2012,11,30,9,8,0,0),25.5],[Date.UTC(2012,11,30,9,13,0,0),24.65],[Date.UTC(2012,11,30,9,15,0,0),23.4],[Date.UTC(2012,11,30,9,20,0,0),25.23]]
    },
{   yAxis: 3,
name: 'Recirculating Solids',
 marker: {
 enabled: false,
            symbol: 'square'
        },
        color: '#A16CB4',
        lineWidth:2,
       data:[[Date.UTC(2012,11,30,8,30,0,0),24],[Date.UTC(2012,11,30,8,35,0,0),2.2],[Date.UTC(2012,11,30,8,40,0,0),25],[Date.UTC(2012,11,30,8,45,0,0),27.6],[Date.UTC(2012,11,30,8,50,0,0),22],[Date.UTC(2012,11,30,8,55,0,0),24],[Date.UTC(2012,11,30,9,0,0,0),28],[Date.UTC(2012,11,30,9,8,0,0),27],[Date.UTC(2012,11,30,9,13,0,0),27.5],[Date.UTC(2012,11,30,9,15,0,0),29],[Date.UTC(2012,11,30,9,20,0,0),32]]
    },
{   yAxis: 4,
name: 'Thickner Feed Solid',
 marker: {
 enabled: false,
            symbol: 'square'
        },
        color: '#6A864E',
        lineWidth:2,
       data:[[Date.UTC(2012,11,30,8,30,0,0),29],[Date.UTC(2012,11,30,8,35,0,0),29.5],[Date.UTC(2012,11,30,8,40,0,0),29.76],[Date.UTC(2012,11,30,8,45,0,0),30.15],[Date.UTC(2012,11,30,8,50,0,0),31],[Date.UTC(2012,11,30,8,55,0,0),33],[Date.UTC(2012,11,30,9,0,0,0),31.5],[Date.UTC(2012,11,30,9,8,0,0),32],[Date.UTC(2012,11,30,9,13,0,0),32.5],[Date.UTC(2012,11,30,9,15,0,0),33],[Date.UTC(2012,11,30,9,20,0,0),35]]
    },
{   yAxis: 5,
name: 'Possible Overload',
 marker: {
 enabled: false,
            symbol: 'square'
        },
        color: '#7E682D',
        lineWidth:2,
       data:[[Date.UTC(2012,11,30,8,30,0,0),2.02],[Date.UTC(2012,11,30,8,35,0,0),4],[Date.UTC(2012,11,30,8,40,0,0),6],[Date.UTC(2012,11,30,8,45,0,0),4.5],[Date.UTC(2012,11,30,8,50,0,0),3.8],[Date.UTC(2012,11,30,8,55,0,0),5.6],[Date.UTC(2012,11,30,9,0,0,0),6.7],[Date.UTC(2012,11,30,9,8,0,0),1.2],[Date.UTC(2012,11,30,9,13,0,0),3.6],[Date.UTC(2012,11,30,9,15,0,0),7.3],[Date.UTC(2012,11,30,9,20,0,0),2.4]]
    },
{ type:'arearange',
data: [[Date.UTC(2012,11,30,9,25,0,0), 0, 50],[Date.UTC(2012,11,30,9,35,0,0), 0, 50]],

lineWidth: 0,
// linkedTo: ':previous',
color: 'rgba(198, 40, 40, 0.05)',
fillOpacity: 0.15,
zIndex: 5,
showInLegend: false,
enableMouseTracking:false,
marker: {
enabled: false
}
},
      {   yAxis: 4,
name: 'Alert',
        
        marker: {
                 enabled: true,
            symbol: 'url(https://deloittehitachivanta-dev.outsystemsenterprise.com/SCCT/img/SCCT.FMarker1.png)'
        },
         lineWidth:4,
       data:[[Date.UTC(2012,11,30,9,25,0,0),42]]
      
    },
    ]"



This is my script for spline chart but with static data, and i want to make the data series dynamic. Any help will be appreciated. Also take a look at the OML.

Thanks,

Vaibhav Mathur


0
0
13 Oct 2021

Hello Vaibhav,

It would be better if you can share your OML? It will easy for other members to help you in better way instead of looking into this code.

Thanks & Kind Regards,

Sachin

0
0
13 Oct 2021

Hey @Sachin Waghmare 


I am droping the OML file for your reference. 

Graph.oml

0
0
13 Oct 2021

Hi,

On your Client Action, you can use JavaScript widget and pass your data series via JavaScript's input parameter.

Hope this helps,

Khuong

0
0
13 Oct 2021

Hi @Khuong Truong 


I am using extend option available in highcharts, so this option is not available for me.


thanks,

Vaibhav

0
0
13 Oct 2021

Hi,

I updated your .oml, please take a look.

You now can play with the DataList (dynamic such as getting data from database) the the Graph should work.

Please notice that as you are using Chart from OS, you don't need to add required scripts except when you want to use other charts that not included.

Cheers,

Khuong

Graph.oml

0
0
13 Oct 2021

Replying to Khuong Truong's comment on 13 Oct 2021 08:44:45

@Khuong Truong 


This looks great! But i need to pass data in the written JSON. So if you can help me with this, that would be great.


Thanks,

Vaibhav

0
0
13 Oct 2021

Replying to Vaibhav Mathur's comment on 13 Oct 2021 09:37:34

Hi,

You can use JSON Deserialize to convert JSON to DataPoint List.

That is the idea, then depend on your JSON you can workaround to map the data.


Cheers,

Khuong

1
0
13 Oct 2021
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.