Highcharts with dynamic data
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


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

Hey @Sachin Waghmare 


I am droping the OML file for your reference. 

Graph.oml

Hi,

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

Hope this helps,

Khuong

Hi @Khuong Truong 


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


thanks,

Vaibhav

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

@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

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

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