Create bar chart, value from Json - Javascript highcharts

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bar Chart

Description

Create bar chart, value from Json

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.8.3.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    $(function(){//from www.  j  a va  2s.co  m
var data = [
  {
    qpQuestion: "Is that a dog?",
    qpAnswerId: "1",
    qpAnswer: "Yes",
    count: "0"
  },
  {
    qpQuestion: "Is that a dog?",
    qpAnswerId: "2",
    qpAnswer: "No",
    count: "0"
  },
  {
    qpQuestion: "Is that a dog?",
    qpAnswerId: "3",
    qpAnswer: "ok",
    count: "0"
  }
];

var answers = ['Yes','No' ,'OK'];
var answer_counts= [
            {name: 'Yes', data : [2,0,0]},
            {name: 'No', data: [2,0,3]},
            {name: 'OK', data: [2,2,0]} ];
var options={
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text:'QA Answers'
                },
                xAxis:{
                    categories: answers,
                    title: {
                        text: 'Answer'
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Answer Count'
                    }
                },
                series:answer_counts
           };
var chart = new Highcharts.Chart(options);
    });

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 300px"></div>  
   </body>
</html>

Related Tutorials