Highcharts Demo

author(s): Torstein Hønsi

by Milomir Topic

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://pablojim.github.io/highcharts-ng/javascripts/highcharts-ng.js"></script>

<div ng-app="myapp">
    <div ng-controller="myctrl">
      <select ng-model='selectedChart'>
        <option value="all" selected >All</option>
        <option value="a">Profit, ROI</option>
        <!-- <option value="b">Neki drugi</option> -->
      </select>
      <highchart class="" config="charts.comparisonChart" style="height: 320px;"></highchart>
    </div>
</div>

JavaScript

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

	$scope.charts = {};
    // Comparison chart config (15 days)
  $scope.charts.comparisonChart = {
        options: {
            chart: {
                backgroundColor: 'transparent',
                spacingTop: 40,
                spacingRight: 0,
                spacingBottom: 0,
                spacingLeft: 0,
                type: 'areaspline',

            },
            title: { text: false },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 150,
                y: 0,
                floating: true,
            },
            plotOptions: {
                series: {
                    lineWidth: 0,
                    pointStart: moment().startOf("day").subtract(14, "days").unix() * 1000,
                    pointInterval: 24 * 3600 * 1000, // one day
                    events: {
                        legendItemClick: function () {
                            return false;
                        }
                    }
                },
                areaspline: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
                backgroundColor: null,
                shared: true,
                borderWidth: 0,
                shadow: false,
                zIndex: 10,
                useHTML: true,
                xDateFormat: '%b %e, %Y',
                headerFormat: '<div>{point.key}</div><div>',
                pointFormat: '<div><span class="series-bullet" style="color: {series.color};">●</span>{series.name}: </div>' +
                '<div">{point.y}</div>',
                footerFormat: '</div>',
                valueDecimals: 2,
                style: {
                    fontSize: "11px",
                    fontFamily: "inherit",
           ...