Public
Edited
Nov 30, 2023
html`<div id='div_highcharts' style='height:600px; width:600px;'></div>`
chart(randi(7,15),randi(10,24),12)
function randi(min,max){
return Math.floor(Math.random()*(max-min+1))+min;}
function ar(k,a,b){var d=.01,m=640;
return Array(m).fill(k).map((k,t)=>
[k*(Math.cos(d*t)+Math.cos(a*d*t)/2+
Math.sin((a+b)*d*t)/3),
k*(Math.sin(d*t)+Math.sin(a*d*t)/2+
Math.cos((a+b)*d*t)/3)]);}
function col(i){
var r=randi(10*i,255),
g=randi(10*i,255),
b=randi(10*i,255);
return 'rgb('+r+','+g+','+b+')';}
chart=function(a,b,n) {
const series=[];
for (var i=1; i<n+1; i++){
series.push({name:'k='+i,color:col(i),lineWidth:1,
dashStyle:'longdash',data:ar(i,a,b)})};
return Highcharts.chart('div_highcharts',{
chart:{type:'line',backgroundColor:'mintcream'},
xAxis:{title:{text:'x'}},yAxis:{title:{text:'y'}},
title:{text:'Random Parameters: a,b = '+[a,b]},
credits:{enabled:false},legend:{enabled:false},
series:series}) }
$=require('https://code.jquery.com/jquery-3.5.1.js')
head=$('head')
import_css=function(src) {
$('head').append(`<link rel='stylesheet' href='${src}'>`)}
import_css('https://code.highcharts.com/css/highcharts.css')
import_js=function(src,module_name) {
/*if (!$('head').find(`script[src='${src}']`)) {
$('head').append(`<script src='${src}'></script>`);
}*/
return new Promise(function(resolve,reject) {
function waiting(){
if (typeof module_name=='undefined') resolve();
if (eval(module_name)) resolve(eval(module_name));
setTimeout(waiting,30);};
require(src).then(function() {waiting();})
.catch(function() {waiting();}); }); }
Highcharts = require('https://bundle.run/highcharts@7.0.2')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
