JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="contain" style="height: 400px"></div>
<button id="button">Change type</button>
<select id="my">
    <option value="line">Line</option>
    <option value="area">Area</option>
    <option value="spline">spline</option>
    <option value="scatter">scatter</option>
</select>

JavaScript

//$('#button').click(function() {
//  var series = chart.series[0],
//      newType = series.type == 'line' ? 'column' : 'line';
//    changeType(series, newType);
//})

//short if statement
//var answer = (a == b) ? ((a == c) ? "all are equal" :
// "a and b are equal") : (a == c) ? "a and c are equal" : (b == c) ?
// "b and c are equal" : "all are different";

$('#my').change(function(){
 var series = chart.series[0],
     newType = series.type == $('#my').val() ? $('#my').val() : $('#my').val();
     changeType(series, newType);
})

function changeType(series, newType) {
    var dataArray = [],
        points = series.data;
    
    series.chart.addSeries({
        type: newType,
        name: series.name,
        color: series.color,
        data: series.options.data
    }, false);
    
    series.remove();
}
var chart;

var dummyData = [
    {"Date":"2011-03-02 08:00","y":"180"},
    {"Date":"2011-03-03 10:30","y":"250"},
    {"Date":"2011-03-09 16:45","y":"185"},
    {"Date":"2011-03-03 22:15","y":"300"}
];

function requestData() {
    var chart = this;
    !function(data) {
        var series = chart.series[0];
        var procData = $.map(data, function(item){
            return [[Date.parse(item.Date), parseInt(item.y, 10)]];          
        });
        procData.sort(function(a, b){
             return a[0] - b[0];            
        });
        series.setData(procData);
    }(dummyData);
}

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'contain',
          //  defaultSeriesType: 'line',
            events: { load: requestData }
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
            text: '-weight -Pounds '
        }
    },
        series: [{
            name: 'myData',
            data: []
        }]
    });
    

    
    
});