Highcharts Demo

author(s): Torstein Hønsi

by Bhabani Raju

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>


<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(document).ready(function() {

 $.ajax({
 			dataType: "json",
        url: 'https://newapi.brandwatch.com/projects/1998196209/data/volume/queries/days/?endDate=2016-11-14T00:00:00.000Z&orderDirection=desc&queryId=1998657357&startDate=2016-11-01T00:00:00.000Z&access_token=c59b4f94-5a05-4251-a1ea-b29725802b6f&orderBy=id&orderDirection=asc',
        success: function(response) {
        var jsontext = response.results;
     //alert(jsontext.length);
var jsonName;var jsonValue;
        $(jQuery.parseJSON(JSON.stringify(jsontext))).each(function() {  
            var data =this.values;
    
			
			//var jnamevalue = new Array(2)
			
/*			
*/


			
            var jname = []; var jvalue = [];
            $(data).each(function(index, element) {
                //alert('Name: ' + element.name + ', Value: ' + element.value);
                var splitname = element.name.split(" ");
                jname.push(splitname[0]);
                
                jvalue.push(
                    element.value
                    //Math.floor((Math.random() * 100) + 1)
                );
                
            });
             jsonName = jname;
             jsonValue = jvalue;
            //alert(jsonName);   
           //alert(jsonValue);
/*		jsonName.sort ( (a, b) => {
      return new Date(a) - new Date(b);
});
*/
        });


           Highcharts.chart('container', {
			   
	

             xAxis: {
                  categories: jsonName
              },
			   title: {
            text: 'Daily Volume'
        },
              series: [{
                  data: jsonValue,
                  type: 'column',
                  name: 'Date'
              }],
			  
					});
        
      }
    });
    

});