data import JSON - formatting - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

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

Description

data import JSON - formatting

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
   </head> 
   <body> 
      <div id="container"></div> 
      <script>
var data = {//from w w w. j  a v  a2s  .  c  o m
    "results": [
        ["2013-04-14 10:00", -1],
        ["2013-04-14 11:48", 0],
        ["2013-04-14 14:45", -1],
        ["2013-04-14 18:02", -1],
        ["2013-04-14 18:45", -1],
        ["2013-04-14 19:57", -1],
        ["2013-04-14 22:19", 0],
        ["2013-04-14 23:00", 0],
        ["2013-04-14 23:00", -1],
        ["2013-04-14 23:00", 0],
        ["2013-04-14 23:00", 0],
        ["2013-04-14 23:00", 0],
        ["2013-04-14 23:00", 0],
        ["2013-04-14 23:00", 0],
        ["2013-04-14 23:00", 0],
        ["2013-04-15 00:18", 0],
        ["2013-04-15 00:21", 0],
        ["2013-04-15 00:22", 0],
        ["2013-04-15 00:24", 1],
        ["2013-04-15 04:15", -1],
        ["2013-04-15 09:02", -1]
    ]
};
$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: 'Sentiment Report by Publish Date'
        },
        subtitle: {
            text: 'Written by Kat Chilton for Oxyme'
        },
        xAxis: {
            title: {
                text: 'Publish Date'
            },
            type: 'datetime'
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Sentiment',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(0,0,0)'
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                allowPointSelect: true,
                dashStyle: 'dot',
            }
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            y: 0,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{}]
    };
        options.series[0].data = data.results;
        var chart = new Highcharts.Chart(options);
});

      </script>  
   </body>
</html>

Related Tutorials