Populating charts with json_encode - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Json Data

Description

Populating charts with json_encode

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {/*  w w w .j av a 2  s.  co m*/
    $('#container').highcharts({
        chart: {
            type: 'line',
            marginRight: 10
        },
        xAxis: [{
            "categories": ["Search Medica", "Medscape 4", "onclive.com", "Oncology Nurse Advisor", "chemotherapyadvisor.com 1"]
        }],
        series: [{
            "name": "Impressions",
                "color": "#4572A7",
                "type": "column",
            "data": [140521, 71905, 69295, 68456, 49487]
        }, {
            "name": "CTR",
                "color": "#89A54E",
                "type": "spline",
                "data": [0.11, 0.04, 0.2, 0.09, 0.05]
        }]
    });
});

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

Related Tutorials