Develop Reference

Dhtmlx bar chart text going out of parent div

Here is my code:
HTML
<div id="shared-learning-chart"></div>
JS
const sharedLearningBarChartConfig = {
type: "xbar",
css: "dhx_widget--bg_white dhx_widget--bordered shared-learning-chart",
scales: {
"bottom": {
title: "",
},
"left": {
text: "alert_type"
}
},
series: [
{
id: "A",
value: "record_count",
fill: "#394E79",
color: "none"
}
],
legend: {
series: ["A"],
form: "rect",
valign: "top",
halign: "right"
}
};
const sharedLearningBarChart = new dhx.Chart("shared-learning-chart", sharedLearningBarChartConfig);
const sharedLearningBarChartData = [
{ alert_type: "Incident", "record_count": 25 },
{ alert_type: "Near Miss", "record_count": 6 },
{ alert_type: "High Risk Condition", "record_count": 5 },
{ alert_type: "Policy Procedure", "record_count": 1 },
];
sharedLearningBarChart.data.parse(sharedLearningBarChartData);
Here the text on the left is going out of div. Tried adding margin and padding but with no success. With this it is moving even with the border.
Working Code Samples

Thank you for your report.
We'll try to find a solution in the future updates.
For now I can suggest you to rotate the scale text and change its padding,like:
https://snippet.dhtmlx.com/nnymqyrs
It may help to fit the titles.

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 resolve error with StoreConfig, CalculatorType, and CalculatorConfig when using xtype: rallychart

I am working to resolve a problem with a Rally App, using the Rally-App-Builder. The point of this app is to graph some data on a chart for easy reading. The chart I am using is of xtype: rallychart.
When this app is put on a rally page it works with no issues, but once I try to build and run the app using the rally app builder I run into the following issues:
Missing required configuration field: storeConfig
Missing required configuration field: calculatorType
Missing required configuration field: calculatorConfig
Your request requires access to a workspace or project for which you do not have permission. Contact your subscription administrator to request permission.
I get these errors in that specific order, one at a time. These errors do not show up in the rally app builder, they only show up once I try to run the app. These error messages will show up where the chart should be, and the only error that says anything in the console is the last one listed above. The error related to permissions displays the following error in the output console:
Failed to load resource: the server responded with a status of 403 ()
The first three errors are solved when I add the following lines to the chart declaration:
storeConfig: {
find: {
_TypeHierarchy: "HierarchicalRequirement" //This means User Story?
}
},
calculatorType: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
calculatorConfig: {} ,
My guess is that the final, permissions related error message is misleading, and that the error is somewhere within the storeConfig,calculatorType,or calculatorConfig properties.
The part that confuses me is the fact that none of the properties listed above are needed for the app to function properly on the rally website, but they are needed for some reason when running using the Rally-App-Builder.
Help resolving this issue would be greatly appreciated, and if more information is needed to successfully do so, please let me know. I will be attaching the entire chart declaration below:
this.chart = this.down('#chart').add( {
storeConfig: {
find: {
_TypeHierarchy: "HierarchicalRequirement" //This means User Story?
}
},
calculatorType: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
calculatorConfig: {} ,
xtype: 'rallychart',
height: 400,
series: [
{
type: 'line',
dataIndex: 'CycleTime',
name: 'Story Cycle Time',
visible: true
},
{
type: 'line',
dataIndex: 'LeadTime',
name: 'Story Lead Time',
visible: false
},
],
store: snapshotStore,
chartConfig: {
chart: {
marginRight: 10,
marginBottom: 100,
zoomType: 'xy',
animation: {
duration: 1500,
easing: 'swing'
}
},
title: {
text: 'Story Cycle Time Control Chart',
align: 'center'
},
xAxis: [
{
categories: myXAxis,
labels: {
enabled: false
}
}
],
yAxis: {
title: {
text: 'Time (days)'
},
plotLines: [
{
value: 0,
width: 1,
color: '#808080'
},
{
value: meanCycleTime,
width: 2,
color: '#808080',
label: {
text: 'Mean Cycle Time',
align: 'left'
}
},
{
value: 14,
width: 2,
color: '#0083ff',
label: {
text: 'Sprint Duration',
align: 'center'
}
},
{
value: 56,
width: 2,
color: '#0083ff',
label: {
text: 'PSI Duration',
align: 'center'
}
},
{
value: UCLCycleTime,
width: 1,
color: '#FF0000',
label: {
text: 'UCL',
align: 'left'
}
}
]
},
plotOptions: {
column: {
color: '#F00'
},
series: {
animation: {
duration: 3000,
easing: 'swing'
}
}
},
tooltip: {
formatter: function() {
return this.x + ': ' + this.y;
}
}
}
});

You may need to check out this option: https://rally1.rallydev.com/docs/en-us/saas/apps/2.1/doc/index.html#!/api/Rally.data.lookback.SnapshotStore-cfg-removeUnauthorizedSnapshots
With the SnapshotStore, this sort of problem occurs when the project you are working in has artefacts that have been moved into that project from some other project you do not have permissions for. The snapshotstore respects the permissions that were present at the time the change to the artefact was made.
A simple test to see if it is a permission problem is to get a workspace admin to run the same app. If it then works, then it is definitely a permissions issue.

Using Kendo Dataviz Vertical Bullet Graph, How to add labels similar to Bar Graph?

Trying to Style up the Bullet Graph to be exactly as Marketing desires. The desired Graph looks like:
How do you add the labels at the top of the bars?
I've tried to set the labels property from the Kendo Documentation:
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
Here is my script that isn't working:
$barChart = $("#bar-chart").empty();
$barChart.kendoChart({
theme: global.app.chartsTheme,
renderAs: "svg",
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [
{
type: "verticalBullet",
currentField: "score",
targetField: "average",
target: {
color: "#444",
dashType: "dot",
line: {
width: 1,
}
},
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
data: [
{
score: 93.7,
average: 65.2,
}, {
score: 80.2,
average: 22.2,
}, {
score: 60.8,
average: 35.2,
}, {
score: 82.1,
average: 45.2,
}, {
score: 74.2,
average: 55.2,
}
]
}
],
categoryAxis: {
labels: { rotation: -45 },
categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
line: {
visible: false
},
color: "#444",
axisCrossingValue: [0, 0, 100, 100]
},
tooltip: {
visible: false
}
}).data("kendoChart");
Any help would be greatly appreciated.

Because this is not a supported feature, any attempt to do this is by it's nature a hack. I had a look at kendo demo and noticed that there is a tooltip element with class k-tooltip that contains the total for a bar on mouseover. You should take a look into that mouseover to display the totals.

What you're attempting to do is possible. I've created an example on our Try Kendo UI site here: http://trykendoui.telerik.com/#jbristowe/aDIf/7

To recap, bullet charts don't support that type of label you need, and bar charts don't support the visual you need (the special line on the chart).
You could switch back to bar charts and write a custom visual. However, an easier way is to use a plotband on the value axis: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.plotbands
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If you make a very narrow band, it will work pretty. It won't be dotted as in your reference image, and it will be behind the bar, which might be a problem... To go deeper, you would need a custom visual, and it's going to be involved: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.visual

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>