Develop Reference

zing Charts is making web page slow and laggy

I am currently trying to plot around 200k data (Time and Frequency) on zing Chart. it does load the chart successfully but page gets very heavy and it lags a lot. Here is my code please guide me have I done any Mistake or how can I plot data without page getting laggy.
I am trying to draw 4 charts like this one same webpage different data (which is 200k+ values).
i get data from APi code ...
$.ajax({
type: 'GET',
cache: false,
url:url,
data: { startTime : '2022-07-25 10-40-12', endTime : '2022-08-22 17-41-14', tableName : tableName },
success: function (data, textStatus, jqXHR) {
drawTimeVSAngleChart(data[0], data[1],data[2]);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
});
after rec data i just call drawTimeVSAngleChart function
timeArray , cpuArray, memoryArray these are passed
my code
function drawTimeVSAngleChart(timeArray , cpuArray, memoryArray){
$('#lineChart').remove();
$('#canvas_div').append(
'<div id="lineChart" style="min-height: 400px; height: 500px; max-height: 500px; max-width: 100%;"></div>'
);
var configTimeAndAngle = {
"type": "line",
legend: {
layout: "1x2", //row x column // items means in one two we added two items as in legends
x: "35%",
y: "6%",
},
"preview":{
"live":true
},
'scale-x': {
zooming: true,
labels: timeArray,
'max-items':8,
'min-items':7,
item: {
'font-size':10
}
},
'scale-y': {
//zooming: true,
//values: "50:350:50",
guide: {
'line-style': "dotted"
},
item: {
'font-size':10
}
},
tooltip: {
text: 'Time : %kt (X) Freq : %vt (Y).',
alpha: 0.9,
backgroundColor: '#F44336',
borderColor: '#B71C1C',
borderRadius: 2,
borderWidth: 1,
padding: '5 10'
},
gui: {
behaviors: [
{
id: 'DownloadPDF',
enabled: 'none'
},
{
id: 'ViewDataTable',
enabled: 'none'
},
{
id: 'ViewSource',
enabled: 'none'
},
{
id: 'ZingChart',
enabled: 'none'
},
{
id: 'CrosshairHide',
enabled: 'all'
}
]
},
"series": [{
"values": cpuArray,
'line-color': "#3366ff",
'background-color': "#3366ff",
text: "CPU Array"
},
{
"values": memoryArray,
'line-color': "#00cc99",
'background-color': "#00cc99",
text: "Memory Array"
}
]
};
zingchart.render({
id: 'lineChart',
data: configTimeAndAngle,
height: "100%",
width: "100%"
});
}

this solution is similar to #lasabahebwa solution but its actual solution which I was looking for. I am able to plot 1 million points without any issue. There is a issue from data been plotted. Issue is that when I load chart or apply filter chart takes around 9 seconds to load data. well my solution is
my solution is abit different because I am giving data in different format and time array is used. for details read question.
$('#lineChart_f').remove();
$('#canvas_div_f').append(
'<div id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></div>'
);
var configTimeAndAngle = {
"type": "line",
noData:{
text:"No data found",
backgroundColor: "#20b2db"
},
legend: {
layout: "1x2", //row x column // items means in one two we added two items as in legends
x: "35%",
y: "6%",
},
"preview":{
"live":true
},
plot: {
mode: 'fast',
},
'scale-x': {
zooming: true,
labels: timeArray,
item: {
'font-size':10
}
},
'scale-y': {
'auto-fit': true,
'min-value':30,
'max-value':70,
guide: {
'line-style': "dotted"
},
item: {
'font-size':10
}
},
'crosshair-x': {
text: 'Time : %kt (X) Freq : %vt (Y).',
'line-style': 'dashed',
'line-width': 2,
'line-color': '#2196F3',
marker: {
type: 'triangle',
size: 5,
visible: true
}
},
gui: {
behaviors: [
{
id: 'DownloadPDF',
enabled: 'none'
},
{
id: 'ViewDataTable',
enabled: 'none'
},
{
id: 'ViewSource',
enabled: 'none'
},
{
id: 'ZingChart',
enabled: 'none'
},
{
id: 'CrosshairHide',
enabled: 'all'
}
]
},
"series": [{
"values": frequency_array_ff,
'line-color': "#3366ff",
'background-color': "#3366ff",
text: "Centeral Frequency"
},
{
"values": frequency_array_fh,
'line-color': "#00cc99",
'background-color': "#00cc99",
text: "Frequency Hopping"
}
]
};
zingchart.QUOTEDVALUES = true;
zingchart.render({
id: "lineChart_f",
height: "100%",
width: "100%",
output: "canvas",
data: configTimeAndAngle
});

unfortunately the current library gets slower as you get into larger datasets (20k+ nodes). How do we combat this? Well, there is no straightforward solution to performance but there are some basic steps you can take to achieve a relative performance gain, such as any combination of the following methodologies.
It's also worth noting that ZC3 does 1M data in under 0.1s but unfortunately it's not ready for public.

How to add multiple text on xaxis

I am struggling with adding multiple texts on the x-axis. Most of the things like giving name field in x-axis don't work with Sankey diagram.
Problem: I need to add 2 texts just below my x-axis on my Sankey diagram. The first text just below and center of the blue bar. The second text I need just below gray bar but it should be in the same line with respect to first text
Here is my code
Highcharts.chart('container', {
title: {
text: ''
},
xAxis: {
type: 'football league'
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Football', 'Messi', 20 ],
['Football', 'ronaldo', 3 ],
//['Challenged', 'Terminated', 0 ],
['Football', 'sachin', 1 ],
['Messi', 'sehqag', 12 ],
//['Instituted', ' Terminated', 0 ],
['Messi', 'ashwin', 6 ],
['Messi', ' ramesg', 2 ],
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
JSFiddle: https://jsfiddle.net/anikettiwari/kLzv8sp0/26/

To add text to the chart, you can use annotations module or Highcharts.SVGRenderer:
annotations: [{
labels: [{
text: 'annotations',
point: {
x: 100,
y: 380
}
}, {
text: 'annotations2',
point: {
x: 400,
y: 380
}
}]
}]
Live demo: https://jsfiddle.net/BlackLabel/odc4jsku/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
Docs: https://www.highcharts.com/docs/advanced-chart-features/annotations-module

I achieved this by below code
chart: {
showAxes: true
},
xAxis: {
categories: ['ANIKET','SHivam'],
labels: {
style: {
color: '#000000'
}
}
},
yAxis: {
title: '',
labels: {
formatter: function() {
return '';
},
style: {
color: '#4572A7'
}
}
},
For the y-axis it was giving me default label so for removing it I wrote the above yaxis code

Highmaps chart is empty in Angular 5

I have a component where I have to show high maps. No errors but the maps is always empty
My chart options object :
let chartData = [{ code3: "ABW", z: 105 }, { code3: "AFG", z: 35530 }];
this.chartConfigObject = new MapChart(<any>{
chart: {
borderWidth: 1,
map: 'custom/world'
},
title: {
text: 'World population 2013 by country'
},
subtitle: {
text: 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
name: 'Population 2016',
joinBy: ['iso-a3', 'code3'],
data: chartData,
map: mapData,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
}
}]
});
When I console the created MapChart object i am getting the series as null always.
What am i missing and why the maps series is always null?
I am using angular-highcharts component as explained here :
https://github.com/cebor/angular-highcharts
reproduced in stackblitz: https://stackblitz.com/edit/angular-highcharts-stock-nbvnuw?file=app%2Fapp.module.ts

You are not providing the map data to your chart , so it doesn't know which map to show. Try showing the map data like mapData: Highcharts.maps['custom/world'] under Series.
If you cannot access the maps in your Highcharts reference , try importing all the maps (JS files) from the HighMaps library into your project and reference them in your typescript component file like this:
const Highcharts = {maps: {}};
require('../../../assets/maps')(Highcharts); //your custom project path
and use mapData: Highcharts['maps']['custom/world'] or whatever is the map you wanted to use like 'countries/us/us-all'
Below is working map code using angular-highcharts to plot the map and points on it:
getMap(data) {
return new MapChart({
chart: {
events: {
load: function (point) {
//do something here on page load
}
},
spacingBottom: 20
backgroundColor: '#FFF',
style: {fontFamily: 'inherit'}
},
title: {
text: ''
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
formatter: function () {
var toolTipTxt = '<b>' + this.point.options.name + '</b>';
return toolTipTxt;
}
},
plotOptions: {
series: {
color: '#00A778',
marker: {
radius: 6,
symbol: 'circle',
lineColor: '#00A778',
lineWidth: 1,
states: {
select: {
fillColor: '#00A778',
lineWidth: 1,
lineColor: '#00A778'
}
}
},
point: {
events: {
click: function () {
this.select(null, true);
}
}
}
}
},
series: [
{
//mapData: Highcharts['maps']['custom/world']
mapData: Highcharts.maps['custom/world'],
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false,
data: []
},
{
// Specify points using lat/lon
type: 'mappoint',
name: 'MySites',
data: data
}
]
});
}
Also you need proj4js library to plot points on the map, in case if that's your requirement as well.
Hope this helps !

Might, it can be useful.
Here is the solution for angular-highcharts:
1) Download the map from collection:
https://code.highcharts.com/mapdata/
2) Create a variable that equals to the content of this file and export it:
instead of
Highcharts.maps["custom/world"] = { ... content of the file ... }
use
const worldMap = { ... content of the file ... }
export default worldMap;
2) Import this map to your component (for world-map.ts):
import worldMap from './world-map';
3) use
chart: {
...
map: worldMap,
...
},
And, of course, don't forget to add a couple of lines to your module:
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as highmaps from 'highcharts/modules/map.src';
#NgModule({
...
providers: [
{ provide: HIGHCHARTS_MODULES, useFactory: () => [highmaps] }
],
...
})
About modules: https://www.npmjs.com/package/angular-highcharts#highmaps
Here is the working example:
https://stackblitz.com/edit/angular-highcharts-stock-byjo6a
Solution was found here:
https://forum.highcharts.com/highmaps-usage-f14/highmaps-bubble-chart-is-empty-t40432/

Remove scrolled part of highcharts

Can the highlighted "green" part be removed?
code:
chart = new Highcharts.StockChart({
chart: {
renderTo: renderTo,
},
title: {
text: 'test - ' + title
},
zoomType: false,
subtitle: {
text: 'some text'
},
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function() {
return (this.value / 1000000) + "mil";
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
credits: {
enabled:false
},
plotOptions: {
series: {
marker : {
enabled : true,
radius : 3
}
}
},
},
series: seriesOptions
});

Documentation is your friend.
Highstock Demo Gallery - Disabled navigator
http://www.highcharts.com/stock/demo/navigator-disabled
Necessary code:
navigator : {
enabled : false
},
Working Example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/navigator-disabled/

err...
quick and dirty
<div id="highchart">
highchart code here
</div>
<div style="background:white;display:block;position:relative;width:400px;margin-top:-150px;">
the rest of your site/content here
</div>
witht he limited amount of info you've provided this is all I can think of.

HighCharts: Logarithmic Scale for Horizontal Bar Charts

I am working with HighCharts to produce a bar chart. My values can range from as minimal as 0 to as high as 100k (example). Therefore, one bar of the graph can be very small and the other can be very long. HighCharts has introduced the feature of "Logarithmic Scaling". The example of which can be seen HERE
My js code is written in this jsfiddle file. I want to display my horizontal axis (x-Axis) logarithmically. I have inserted the key type as shown in the example but the script goes into an infinite loop which has to be stopped.
What is the flaw in the execution or is logarithmic scaling for HighCharts still not mature?
P.S The commented line in jsfiddle is causing the issue

Since the "official" method is still buggy, you can achieve the log scale more manually by manipulating your input data with a base 10 log and masking your output data raising 10 to the output value. See it in action here http://jsfiddle.net/7J6sc/ code below.
function log10(n) {
return Math.log(n)/Math.log(10);
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar',
marginRight: 200,
marginLeft: 10,
},
title: {
text: 'Negative'
},
xAxis: {
categories: [''],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high',
},
labels: {
formatter: function() {
return Math.round(Math.pow(10,this.value));
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -50,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + Math.round(Math.pow(10,this.y)) + ' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return Math.round(Math.pow(10,this.y));
}
}
}
},
credits: {
enabled: false
},
series: [{
"data": [log10(4396)],
"name": "A"},
{
"data": [log10(4940)],
"name": "B"},
{
"data": [log10(4440)],
"name": "C"},
{
"data": [log10(2700)],
"name": "D"},
{
"data": [log10(2400)],
"name": "E"},
{
"data": [log10(6000)],
"name": "F"},
{
"data": [log10(3000)],
"name": "G"},
{
"data": [log10(15000)],
"name": "E"}],
});

It is still experimental according to the Official Documentation, so that might be the case:
"The type of axis. Can be one of "linear" or "datetime". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days.
As of 2.1.6, "logarithmic" is added as an experimental feature, but it is not yet fully implemented. Defaults to "linear".
Try it: "linear", "datetime" with regular intervals, "datetime" with irregular intervals, experimental "logarithmic" axis."

For those of you who are still looking for an answer :
JSFiddle : http://jsfiddle.net/TuKWT/76/
Or SO snippet :
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Negative'
},
xAxis: {
categories: ['A','B','C','D','E','F','G','H'],
title: {
text: null
}
},
yAxis: {
type: 'logarithmic',
//min: 0, <= THIS WILL CAUSE ISSUE
title: {
text: null,
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return this.x + ':' + this.y + ' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
"data": [4396,4940,4440,2700,2400,6000,3000,15000],
}],
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>