Log in to AnswerLog in to Follow
Vaibhav Mathur
14Views
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
12 days ago

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
12 days ago

Hey @Sachin Waghmare 


I am droping the OML file for your reference. 

Graph.oml

0
0
12 days ago

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
12 days ago

Hi @Khuong Truong 


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


thanks,

Vaibhav

0
0
12 days ago

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
12 days ago

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
12 days ago

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

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