JSFiddle - React, Tailwind, and code Playground

by amirali roshanaei

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="http://pablojim.github.io/highcharts-ng/javascripts/highcharts-ng.js"></script>
<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div class="row">
            <div class="span9">
                <div class="row">
                    <highchart id="chart1" config="chartConfig" class="span9" ></highchart>
                </div>
            </div>
            <div class="span4">
                <div class="row-fluid">Default Type <select ng-model="chartConfig.options.chart.type" ng-options="t.id as t.title for t in chartTypes"></select></div>
                <div class="row-fluid"><button ng-click="addSeries()">Add Series</button></div>
            </div>
        </div>
    </div>
</div>

JavaScript

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

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

  $scope.chartTypes = [
    {"id": "line", "title": "Line"},
    {"id": "spline", "title": "Smooth line"},
    {"id": "area", "title": "Area"},
    {"id": "areaspline", "title": "Smooth area"},
    {"id": "column", "title": "Column"},
    {"id": "bar", "title": "Bar"},
    {"id": "pie", "title": "Pie"},
    {"id": "scatter", "title": "Scatter"}
  ];


  $scope.chartSeries = [
    {"name": "Some data", "data": [1, 2, 4, 7, 3]},
    {"name": "Some data 3", "data": [3, 1, 9, 5, 2]}
  ];




  $scope.addSeries = function () {
    var rnd = [];
    $scope.chartConfig.series.push({
      data: rnd
    })
  };



  $scope.removeSeries = function (id) {
    var seriesArray = $scope.chartConfig.series;
    seriesArray.splice(id, 1)
  };




  $scope.chartConfig = {
    options: {
      chart: {
        type: 'areaspline'
      }
    },
    series: $scope.chartSeries,
    title: {
      text: 'Hello'
    },
    credits: {
      enabled: true
    }
  };




});