Migrate from jqxChart to smart-chart

[priyam.sharma]

Hi all,

I had a jqxChart with log axis which I am trying to convert to smart-chart with log axis. While converting, there are settings properties that are there in jqxWidgets and I am not sure where they should go in smart-chart. I have commented out those properties (xAxis->showGridlines, seriesGroups->series->color, seriesGroups->series->lineWidth, symbolType, dashStyle).
Am I missing anything here?

<br class=”cc-1rzu4″ /><br class=”cc-1rzu4″ />

//------------------JqxChart ------------------------

var settings = {
backgroundColor: chartBkgColor,
title: str_ResourcePredict,
description: envName,
enableAnimations: true,
padding: { left: 25, top: 10, right: 225, bottom: 5 },
titlePadding: { left: 35, top: 0, right: 0, bottom: 10 },
legendLayout: {
left: 550,
top: 180,
width: 200,
height: 500,
flow: "vertical",
},
source: chartData,
colorScheme: "scheme01",
xAxis: {
dataField: "Cores",
title: { text: str_ResourcePredictXAxis },
type: "basic",
unitInterval: 1,
tickMarks: { visible: true, interval: 1 },
showGridLines: false,
valuesOnTicks: false,
padding: { bottom: 10 },
},
valueAxis: {
title: { text: str_ResourcePredictTimePerStep },
logarithmicScale: logLogScale,
logarithmicScaleBase: logLogScale
? calculateLogScale(
Math.max.apply(null, yValues),
Math.min.apply(null, yValues)
)
: undefined,
labels: {
horizontalAlignment: "right",
formatFunction: function (value) {
if (value % 1 === 0) {
return (
new Intl.NumberFormat().format(value.toString()) +
" mins"
); // No decimal places for integers
} else {
return (
new Intl.NumberFormat().format(value.toFixed(1)) +
" mins"
); // One decimal place for other cases
}
},
},
},
seriesGroups: [
{
type: "rangecolumn",
columnsGapPercent: 50,
toolTipFormatFunction: function (value) {
return (
"Range: " +
new Intl.NumberFormat().format(
Number(value.from).toFixed(1)
) +
" - " +
new Intl.NumberFormat().format(
Number(value.to).toFixed(1)
) +
" mins"
);
},
series: [
{
dataFieldTo: "DirectTimeUpperBound",
dataFieldFrom: "DirectTimeLowerBound",
color: "#E53935",
displayText:
str_ResourcePredictDirect +
" (" +
str_ResourcePredictTimeRange +
")",
colorFunction: function (value, itemIndex, series, group) {
return itemIndex < 5 ? "#E53935" : "#EF9A9A"; // First 5 Red, Last 2 Light Red
},
},
{
dataFieldTo: "IterativeTimeUpperBound",
dataFieldFrom: "IterativeTimeLowerBound",
color: "#1565C0",
displayText:
str_ResourcePredictIterative +
" (" +
str_ResourcePredictTimeRange +
")",
colorFunction: function (value, itemIndex, series, group) {
return itemIndex < 5 ? "#1565C0" : "#90CAF9"; // First 5 Blue, Last 2 Light Blue
},
},
],
},
{
type: "line",
toolTipFormatFunction: function (value) {
return (
new Intl.NumberFormat().format(Number(value).toFixed(1)) +
" mins"
);
},
series: [
{
dataField: "DirectTime",
displayText:
str_ResourcePredictDirect +
" (" +
str_ResourcePredictTime +
")",
lineWidth: 2,
symbolType: "square",
dashStyle: "dot",
colorFunction: function (value, itemIndex, series, group) {
return itemIndex < 5 ? "#E53935" : "#EF9A9A"; // Light Red if more than 5 entries, Dark Red otherwise
},
},
{
dataField: "IterativeTime",
displayText:
str_ResourcePredictIterative +
" (" +
str_ResourcePredictTime +
")",
lineWidth: 2,
symbolType: "square",
dashStyle: "dot",
colorFunction: function (value, itemIndex, series, group) {
return itemIndex < 5 ? "#1565C0" : "#90CAF9"; // Light Blue if more than 5 entries, Dark Blue otherwise
},
},
],
},
],
};

$("#id_timeChartContainer").jqxChart(settings);

//-------------------smart-chart -------------------------
Smart(
"#id_timeChartContainer",
class {
get properties() {
return {
backgroundColor: chartBkgColor[0],
caption: str_ResourcePredict,
description: envName,
animation: "simple",
padding: { left: 25, top: 10, right: 225, bottom: 5 },
titlePadding: { left: 35, top: 0, right: 0, bottom: 10 },
legendLayout: {
left: 550,
top: 180,
width: 200,
height: 500,
flow: "vertical",
},
dataSource: chartData,
colorScheme: "scheme01",
xAxis: {
dataField: "Cores",
title: { text: str_ResourcePredictXAxis },
type: "basic",
unitInterval: 1,
tickMarks: { visible: true, interval: 1 },
//showGridLines: false,
valuesOnTicks: false,
padding: { bottom: 10 },
},
valueAxis: {
title: { text: str_ResourcePredictTimePerStep },
logarithmicScale: logLogScale,
logarithmicScaleBase: logLogScale
? calculateLogScale(
Math.max.apply(null, yValues),
Math.min.apply(null, yValues)
)
: undefined,
labels: {
horizontalAlignment: "right",
formatFunction: function (value) {
if (value % 1 === 0) {
return (
new Intl.NumberFormat().format(
value.toString()
) + " mins"
);
} else {
return (
new Intl.NumberFormat().format(
value.toFixed(1)
) + " mins"
);
}
},
},
},
seriesGroups: [
{
type: "rangecolumn",
columnsGapPercent: 50,
toolTipFormatFunction: function (value) {
return (
"Range: " +
new Intl.NumberFormat().format(
Number(value.from).toFixed(1)
) +
" - " +
new Intl.NumberFormat().format(
Number(value.to).toFixed(1)
) +
" mins"
);
},
series: [
{
dataFieldTo: "DirectTimeUpperBound",
dataFieldFrom: "DirectTimeLowerBound",
//color: "#E53935",
displayText:
str_ResourcePredictDirect +
" (" +
str_ResourcePredictTimeRange +
")",
colorFunction: function (
value,
itemIndex,
series,
group
) {
return itemIndex < 5
? "#E53935"
: "#EF9A9A";
},
},
{
dataFieldTo: "IterativeTimeUpperBound",
dataFieldFrom: "IterativeTimeLowerBound",
//color: "#1565C0",
displayText:
str_ResourcePredictIterative +
" (" +
str_ResourcePredictTimeRange +
")",
colorFunction: function (
value,
itemIndex,
series,
group
) {
return itemIndex < 5
? "#1565C0"
: "#90CAF9";
},
},
],
},
{
type: "line",
toolTipFormatFunction: function (value) {
return (
new Intl.NumberFormat().format(
Number(value).toFixed(1)
) + " mins"
);
},
series: [
{
dataField: "DirectTime",
displayText:
str_ResourcePredictDirect +
" (" +
str_ResourcePredictTime +
")",
//lineWidth: 2,
//symbolType: "square",
//dashStyle: "dot",
colorFunction: function (
value,
itemIndex,
series,
group
) {
return itemIndex < 5
? "#E53935"
: "#EF9A9A";
},
},
{
dataField: "IterativeTime",
displayText:
str_ResourcePredictIterative +
" (" +
str_ResourcePredictTime +
")",
//lineWidth: 2,
//symbolType: "square",
//dashStyle: "dot",
colorFunction: function (
value,
itemIndex,
series,
group
) {
return itemIndex < 5
? "#1565C0"
: "#90CAF9";
},
},
],
},
],
};
}
}
);

[Markov]

Hi,

Basically, jqxChart and Smart.Chart share the same API. However, the main difference is that things marked as deprecated in the jqxChart are not included in Smart.Chart. I would suggest you to look the https://www.htmlelements.com/docs/chart-api/ to understand the API of Smart.Chart and also look at the available demos which show how to initialize the component and use the API.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts