charts series

  

When I use the code below, the webpage only show the data of "
document.getElementById("txtHint3").innerText" instead of creating a chart. How to solve the problem?

Thanks a lot.


series: document.write(document.getElementById("txtHint3").innerText)

err,


no clue what you want to achieve with document.write in a series-object for charts.

can you provide the jsfiddle where you show what you want to achieve?


Hi eric,

I'm really not sure what you're trying to do... Could you elaborate a bit more?


EDIT: Ninja'd by J.


$(function () {                                                              
    $('#container').highcharts({                                        
        chart: {
            height: 550,
            type: 'line'
        },                                                            
        title: {                                                        
            text: 'Wear%'                                    
        },
          legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            y: 30,
            navigation: {
                activeColor: '#3E576F',
                animation: true,
                arrowSize: 12,
                inactiveColor: '#CCC',
                style: {
                    fontWeight: 'bold',
                    color: '#333',
                    fontSize: '12px'
                }
            }
        },
        xAxis: {                                                        
            categories: <?php echo $creation_date;?>,
    labels: {
                rotation: 80,
     style: {
                    color: 'black',
     fontWeight: 'normal'
                }
           }
        },
  yAxis:{
   title:{
   text:''
  }
  },
        tooltip: {
         
   style: {
                //padding: 10,
                //fontWeight: 'bold',
                fontSize: '6px'
            },
   borderWidth: 0,
   useHTML: true,
   headerFormat: '<span id=txtHint2 style="font-size:10px;">',
   pointFormat: 'Timestamp :   xxxxx xxxxx <br>'+
                'Wear% : <br>'+
                'Build : <br>'+
                'Status : <br>'+
                'Health Status : <br>'+
                'Block size : <br>'+
                'Power on hrs : <br>'+
                'Erase count : <br>'+
                'IO Count : <br>'+
                'Used by FAST cache : <br>'+
                'Used by PFDC : <br>'+
                'Used by ILC : <br>'+
                'RG type : <br>'+
                'RG width : <br>'+
                'RG sectors per stripe : <br>'+
                'SP type :<br>',
   footerFormat:'</span>',
   valueDecimals: 2
  },                                                    
        plotOptions: {
            series: {
     point: {
                    events: {
                        mouseOver: function () {
                         var pos = this.x;
       var str = this.series.name;
       mOver(str,pos);
                        }
                    }
                },
                events: {
                    click: function (event) {
                        //alert(this.name + ' clicked');
      var name = this.name;
      get_clicked(name);
                    },
     legendItemClick: function () {
                        var visibility = this.visible ? 'visible' : 'hidden';
      var name = this.name;
                   
       var chart = $('#container').highcharts();
       var i=0;
       var length = chart.series.length;
       var series = name;
       while (i<=length-1) {
         if (!chart.series[i].visible){
          series = series+"|"+chart.series[i].name;
         }
          i=i+1;
        }
                       
          hide(series);
                     
                    }
                }
            }
        },                                          
        </script><script type="text/javascript">series: document.write(document.getElementById("txtHint3").innerText);</script><script type="text/javascript">
    });                                                                  
});    

in the series part, document.write(document.getElementById("txtHint3").innerText); doesn`t work.

It print the document.getElementById("txtHint3").innerText. But when I copy and paste the data of
document.getElementById("txtHint3").innerText in the series part. Then the chart has been created.


document.write(document.getElementById("txtHint3").innerText);

Output:
[{"name":["Y5L0A066T1VD"],"data":[1.65,1.65,1.66,1.66,1.66,1.66,1.66,1.66]},{"name":["Y5L0A06ET1VD"],"data":[1.67,1.67,1.68,1.68,1.68,1.68,1.68,1.68]},{"name":["Y5L0A07UT1UD"],"data":[2.89,2.89,2.89,2.89,2.89,2.89,2.89,2.89]}]

I am curious. If you simply use the Charts-components provided by Outsystems you can create charts witha breeze.

basically you fill the datapoints like filling a recordlist and you are done.


so why all the javascript?


@J: for customizing things like the onclick of a series or the mouse-over information, you need JavaScript. If you want to display e.g. the total of a stacked series on a mouse-over, you'll need to sum the series yourself. (Not saying the above JavaScript is ok, I only glanced at it in passing.)

Ok, then it's easy. instead to using javascript to inject the dataseries in javascript.

just use the expression to place the dataseries yourself with outsystems...