MATLAB Examples

Contents

Introduction

This HighChart object enables easy use of the javascript technology provided by http://www.highcharts.com/ to generate interactive and dynamic charts in MATLAB web browser.

As stated by HighCharts.com (2016): "Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types."

The object enables the employment for most options listed in the HighCharts API documentation (http://api.highcharts.com/highcharts). In a later version more options will be included.

Included is a demostration file with five examples of the usage of the object.

Highcharts are strictly FREE FOR NON-COMMERCIAL. See http://www.highcharts.com/ for commercial use.

publishHeader; % used to publish chart in this documentation

Timeseries plot with logaithmic scale

% Generate data
time = sort(now()+10*rand(50,1));
series1 = rand(50,1)*1000;
series2 = rand(50,1)*10000;

% Construct chart
hc = HighChart('datetime');

% Title
hc.title.text = 'Example plot 1: Timeseries plot with logarithmic scale';

% Series
hc.series{1}.name = 'Series 1';
hc.series{1}.data = [time, series1];
hc.series{1}.type = 'line';
hc.series{2}.name = 'Series 2';
hc.series{2}.data = [time, series2];
hc.series{2}.type = 'line';

% Logarithmic scale
hc.yAxis.type = 'logarithmic';

% Plot
hc.plot;

% Save plot

% Method 1: Set file path
filePath = [cd '\demo\html\example_charts\example_plot_1_timeseries.html'];
hc.save(filePath);

% Method 2: Open dialog box for saving
hc.save;

publishChart; % used to publish chart in this documentation

Timeseries plot with confidens band

% Generate data
T = 100;
time = sort(now()+10*rand(T,1));
data = cumprod([ones(1,1000)*100;(1+0.1*(randn(T-1,1000)*0.1+0.05))]);
mu = mean(data,2); [~,iMax] = max(data(end,:)); [~,iMin] = min(data(end,:));
p = 0.975; qLow  = quantile(data,1-p,2); qHigh = quantile(data,p,2);

% Construct chart
hc = HighChart('datetime');

% Title
hc.title.text = 'Example plot 2 - Timeseries plot with confidens band';

% Series
hc.series{1}.name = 'Mu';
hc.series{1}.data = [time, mu];
hc.series{1}.type = 'line';
hc.series{2}.name = 'CI 95 %%';
hc.series{2}.data = [time, qLow, qHigh];
hc.series{2}.type = 'arearange';
hc.series{2}.color = 'rgb(213, 68, 213)';
hc.series{3}.name = 'Top';
hc.series{3}.data = [time, data(:,iMax)];
hc.series{3}.type = 'line';
hc.series{3}.visible = false;
hc.series{4}.name = 'Bottom';
hc.series{4}.data = [time, data(:,iMin)];
hc.series{4}.type = 'line';
hc.series{4}.visible = false;

% Tooltip options
hc.tooltip.shared = 'true';
hc.tooltip.crosshairs = 'true';

% fillOpacity
hc.plotOptions.series.fillOpacity=0.1;

% Plot
hc.plot;

% Save plot
filePath = [cd '\demo\html\example_charts\example_plot_2_confidens_band.html'];
hc.save(filePath);

publishChart; % used to publish chart in this documentation

Histogram plot

% Generate data
data = randn(1000,1);
[counts,centers] = hist(data,25);
[f,xi] = ksdensity(data);
q = quantile(data,0.75);

% Construct chart
hc = HighChart;

% Title
hc.title.text = 'Example plot 3: Histogram & Density';

% Set size of chart (Default: width=800px; height=400px;)
hc.height = '400px';
hc.width = '600px';

% Series
hc.series{1}.data = [centers;counts/norm(counts)];
hc.series{1}.type = 'column';
hc.series{2}.data = [xi;f];
hc.series{2}.type = 'spline';

% Plotbands
hc.xAxis.plotBands{1}.color      = 'rgba(68, 170, 213, 0.2)';
hc.xAxis.plotBands{1}.from       = q;
hc.xAxis.plotBands{1}.to         = max(xi);
hc.xAxis.plotBands{1}.label.text = 'Good';
hc.xAxis.plotBands{1}.label.y    = 25;
hc.xAxis.plotBands{1}.label.style.fontWeight = 'bold';
hc.xAxis.plotBands{2}.color      = 'rgba(213, 68, 213, .1)';
hc.xAxis.plotBands{2}.from       = min(xi);
hc.xAxis.plotBands{2}.to         = q;
hc.xAxis.plotBands{2}.label.text = 'Bad';
hc.xAxis.plotBands{2}.label.y    = 25;
hc.xAxis.plotBands{2}.label.style.fontWeight = 'bold';
hc.xAxis.plotBands{3}.color      = 'grey';
hc.xAxis.plotBands{3}.from       = q-q/100;
hc.xAxis.plotBands{3}.to         = q+q/100;

% xAxis options
hc.xAxis.title.text = 'Values';

% yAxis options
hc.yAxis.title.text = '#Samples';

% PlotOptions
hc.plotOptions.column.borderWidth  = 0.1;
hc.plotOptions.column.pointPadding = -0.1;

% Built in functions
hc.disableMarkers;  % Equal to: hc.plotOptions.spline.marker.enabled = false;
hc.disableLegend;   % Equal to: hc.legend.enabled = false;

% plot
hc.plot;

% Save plot
filePath = [cd '\demo\html\example_charts\example_plot_3_histogram.html'];
hc.save(filePath);

publishChart; % used to publish chart in this documentation

Heatmap

% Generate data
values = [1 10];
data = randi(values,2,1000);
count = [];
for i = 1:values(end)
    for j = 1:values(end)
        count = [count;[i-1,j-1,sum(data(1,:)==i & data(2,:) == j)]]; %#ok<*AGROW>
    end
end

% Construct chart
hc = HighChart;

% Title
hc.title.text = 'Example plot 4: Heatmap';

% Set size of chart (Default: width=800px; height=400px;)
hc.width = '400px';
hc.height = '350px';

% Set type heatmap type
hc.chart.type = 'heatmap';

% Series
hc.series{1}.data = count;
hc.series{1}.dataLabels.enabled = 'true';
hc.series{1}.dataLabels.color = 'true';
hc.series{1}.borderWidth = 0.2;

% Set xAxis values and title
hc.xAxis.categories = 1:values(end);
hc.xAxis.title.text = 'Random Variable 1';

% Set yAxis values and title
hc.yAxis.categories = 1:values(end);
hc.yAxis.title.text = 'Random Variable 2';

% Additional layout options
hc.colorAxis.min        = 0;
hc.chart.marginTop      = 40;
hc.chart.marginBottom   = 80;
hc.legend.align         = 'right';
hc.legend.layout        = 'vertical';
hc.legend.margin        = 0;
hc.legend.verticalAlign = 'top';
hc.legend.y             = 25;
hc.legend.symbolHeight  = 230;

% Plot
hc.plot;

% Save plot
filePath = [cd '\demo\html\example_charts\example_plot_4_heatmap.html'];
hc.save(filePath);

publishChart; % used to publish chart in this documentation

Bubble Plot

names = {'Best','Conservative','Aggresive','Worst','Benchmark'};
data = [0.8,1.3 ,4.5; ...
        0.8,0.8 ,3;   ...
        1.2,1.25,4;   ...
        1.3,0.7 ,2.9; ...
        1  ,1   ,3    ...
        ];

% Construct chart
hc = HighChart;

% set type to bubble
hc.chart.type = 'bubble';

% Title
hc.title.text = 'Example plot 5: Bubble plot - Up Market Capture vs. Down Market Capture';

% Set size of chart (Default: width=800px; height=400px;)
hc.height = '450px';
hc.width  = '500px';

% Add series
for i = 1:numel(names)
    hc.series{i}.data = data(i,:);
    hc.series{i}.name = char(names(i));
end

% Set xAxis options
hc.xAxis.title.text      = 'Downside %';
hc.xAxis.plotBands.from  = 0.9990;
hc.xAxis.plotBands.to    = 1.001;
hc.xAxis.plotBands.color = 'black';

% --  Built in axis in percentage --
% Equal to: hc.xAxis.labels.formatter.function = 'return Math.round(this.value*100,6) + ''%'';';
hc.xAxisInPercent;

% Set yAxis options
hc.yAxis.title.text = 'Upside %';
hc.yAxis.plotBands.from  = 0.995;
hc.yAxis.plotBands.to    = 1.005;
hc.yAxis.plotBands.color = 'black';

% --  Built in axis in percentage --
% Equal to: hc.yAxis.labels.formatter.function = 'return Math.round(this.value*100,6) + ''%'';';
hc.yAxisInPercent;

% plot
hc.plot;

% Save plot
filePath = [cd '\demo\html\example_charts\example_plot_5_bubble_plot.html'];
hc.save(filePath);

publishChart; % used to publish chart in this documentation