JuanC
-
Posts
421 -
Joined
-
Last visited
-
Days Won
3
Content Type
Profiles
Forums
Events
Posts posted by JuanC
-
-
We will need more information about this issue, including
1) Are there any chart settings relevant to the occurrence of this problem (i.e. does the problem still happens if you comment them out)
2) Is the data relevant to the issue.
3) Does the error happens on a particular scenario, e.g. the first time a chart is resized, when a chart is too big or too small, etc.Regard,
JuanC
-
We added this functionality somewhat recently as setTimeHover and it was later renamed to setInitialDelay.
In order to use setTimeHover you need to use build 6114 or newer.
In order to use setInitialDelay you need to use build 6162 or newer.I would recommend downloading our pre-release version which is 7.5.6127 and use setTimeHover. We should be uploading a new build soon.
Regards,
JuanC
-
chart1.getToolTips().setInitialDelay(200);
The delay is specified in milliseconds.
Regards,
JuanC
-
Have you tried using the render event as I showed on my post? It should give you the feature that you need.
I do not understand why you cannot invoke the ApplyRuleBuilderOnBarLineUniversalAreaChart before the chart create call, the way you are doing it now the chart will be painted twice (one without the axis section and one with) and that may be visible to the user.
Is there a particular reason why you need to wait for the chart to be rendered to create the axis section?
But again, if that is what you need you should be able to use the render event.
Regards,
JuanC
-
I am not entirely sure what you mean "fire shading chart function" but there is an event we fire after we are done generating the chart visuals,
chart1.on("render", onRenderEvent);
function onRenderEvent()
{
}Hope this helps.
JuanC
-
I was unable to duplicate the issues you describe (and are visible in the screenshots).
Can you please provide the code you use to customize the chart?
Regards,
JuanC
-
I am guessing you are talking about the user interface when you select the Series menu. This is created dynamically, we do not use classes in this code but we try to get the color for AttributeX.
I noticed we do not try to use the series tag so that could explain a discrepancy between the color in the menu and the series. This has been fixed and the fix will be included in our next drop.
Regards,
JuanC
-
1
-
-
You are doing nothing wrong, this is by design, when you use our CSS it means colors (and fonts, and line widths) are controlled through CSS instead of API, you have 3 options
1) Do not include our palette and attributes CSS, this is recommended if you will need to control several colors "dynamically"
2) Make a copy of the used CSS and change it as needed, e.g.
.jchartfx .Attribute0 {
fill: #D0C5E3;
stroke: #D0C5E3;
}Note that sometimes we generate several classes for an object (you can view this using Inspect in your browser), for example, axis sections generate a class such as "AxisSection AxisY_Section AxisY0_Section0" to give you a chance to change all axis sections, all Y axis sections or a particular section by index.
3) Most objects expose a setTag method that allows you to customize the generated class
Regards,
JuanC
-
You can attach a handler to the gettip event and one of the fields will be the tooltip div, e.g.
function onTipDiv(args)
{
var style = args.tooltipDiv.getAttribute("style");
args.tooltipDiv.setAttribute("style", style + ";background:#880015");
}chart1.on("gettip", onTipDiv);
Hope this helps.
JuanC
-
1
-
-
If I run the following code (without using CSS) I get a section from 10 to 14 with a yellowish color (ffdb99)
chart1 = new cfx.Chart();
chart1.setDataSource([8,12,14,13,9]);
var sectionWarning = new cfx.AxisSection();
sectionWarning.setFrom(10);
chart1.getAxisY().getSections().add(sectionWarning);
sectionWarning.setBackColor("#ffdb99");
sectionWarning.getGrids().getMajor().setVisible(false);
sectionWarning.getGrids().getMinor().setVisible(false);
sectionWarning.getGrids().getMinor().setTickMark(cfx.TickMark.None);
sectionWarning.getGrids().getMajor().setTickMark(cfx.TickMark.None);
sectionWarning.setTextColor("#ffdb99");
sectionWarning.setText("Warning");I noticed the pink section in your chart but I am not sure if you are using CSS, or if there is extra code that is causing this issue.
If the problem persists, please try posting a small sample that reproduces the problem (include hardcoded data and other customizations, let us know if CSS is being used).
Regards,
JuanC
-
You are probably including our CSS (attributes and/or palette), which means colors are controlled through CSS instead of API, you have 3 options
1) Do not include our palette and attributes CSS, this is recommended if you will need control several colors "dynamically"
2) Make a copy of the used CSS and change it as needed, e.g.
.jchartfx .AxisY_Section {
fill: #D0C5E3;
stroke: #D0C5E3;
}Note that sometimes we generate several classes for an object (you can view this using Inspect in your browser), sections generate a class such as "AxisSection AxisY_Section AxisY0_Section0" to give you a chance to change all axis sections, all Y axis sections or a particular section by index.
3) Most objects (including AxisSection) expose a setTag method that allows you to customize the generated class
sectionWarning.setTag("Warning");
And include the following on either your page or a css included by your page
.jchartfx .Warning {
fill: #FFFF00;
}Regards,
JuanC
-
You can modify any (or all) of the charts after any event captured on the client, e.g.
<body>
<select id="year" onchange="onYearChanged()">
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select><br/>
<div id="ChartDiv" style="width:550px;height:400px;display:inline-block"></div>
</body>JavaScript
function onLoadDoc()
{
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Bar);
chart1.setDataSource([10,12,8,9,11]);
chart1.create("ChartDiv");
}function onYearChanged()
{
var selectObj = document.getElementById("year");
if (selectObj.value == "1997")
chart1.setDataSource([10,12,8,9,11]);
else if (selectObj.value == "1998")
chart1.setDataSource([8,7,12,14,11]);
else
chart1.setDataSource([3,4,8,1,12]);
}Obviously instead of hardcoding data you would either request new data to the server or filter existing data, once you have the data you can invoke setDataSource on the chart to change its data, if necessary you can also change any of the charts visual attributes.
We do not offer any APIs to filter data
Regards,
JuanC
-
There are several ways to improve the plot area size in charts, including
1) Removing the border
chart1.setBorder(null);
2) Hiding the legend box
chart1.getLegendBox().setVisible(false);
3) Decreasing the margin size around the plot area
var margin = chart1.getPlotAreaMargin();
margin.setLeft(5);
margin.setTop(5);
margin.setRight(5);
margin.setBottom(5);4) Decreasing the font size (assuming you are not using our attributes CSS)
chart1.setFont("7pt Arial");
If this do not work, please post a small code snippet showing the customizations you are doing to the chart and the size you are using for the small divs
Regards,
JuanC
-
The way motifs work, charts/gauges properties are modified when objects are constructed (to allow for your customizations to override motif customizations).
Because of this, if you are going from motif A to motif B it is not trivial to try to "undo" the actions on motif A before trying to apply B. It does not need necessarily a full page reload but recreating the charts is the simple way to achieve this (if the motif change is happening on the client side).
JuanC
-
Please note that we want projected end date to be the first series because of the order we paint elements, also note that we are faking a FromValue for that series because we expect all series to be have the same shape. Finally note that we are setting the gallery for the first series to be Scatter.
var usingDates = true;
var ganttData;if (usingDates) {
ganttData = [
{
"ProjectName": "PROJECT 1",
"StartValue": "2016-11-05T00:00:00+05:30",
"EndValue": "2016-11-30T00:00:00+05:30",
"ProjectedEndValue": "2016-12-10T00:00:00+05:30",
"TimeStamp": "15/11/2016 12:33 PM",
},
{
"ProjectName": "PROJECT 2",
"StartValue": "2016-11-12T00:00:00+05:30",
"EndValue": "2016-12-05T00:00:00+05:30",
"ProjectedEndValue": "2016-12-01T00:00:00+05:30",
"TimeStamp": "15/11/2016 12:33 PM",
},
];chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Date);
} else {
ganttData = [
{
"ProjectName": "PROJECT 1",
"StartValue": "2",
"EndValue": "5",
"ProjectedEndValue": "6",
"TimeStamp": "15/11/2016 12:33 PM",
},
{
"ProjectName": "PROJECT 2",
"StartValue": "3",
"EndValue": "8",
"ProjectedEndValue": "7",
"TimeStamp": "15/11/2016 12:33 PM",
},
];
}var fields = chart1.getDataSourceSettings().getFields();
var field;field = new cfx.FieldMap();
field.setName("ProjectedEndValue");
field.setUsage(cfx.FieldUsage.FromValue);
fields.add(field);field = new cfx.FieldMap();
field.setName("ProjectedEndValue");
field.setUsage(cfx.FieldUsage.Value);
fields.add(field);field = new cfx.FieldMap();
field.setName("StartValue");
field.setUsage(cfx.FieldUsage.FromValue);
fields.add(field);field = new cfx.FieldMap();
field.setName("EndValue");
field.setUsage(cfx.FieldUsage.Value);
fields.add(field);field = new cfx.FieldMap();
field.setName("ProjectName");
field.setUsage(cfx.FieldUsage.Label);
fields.add(field);chart1.setGallery(cfx.Gallery.Gantt);
chart1.setDataSource(ganttData);chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Scatter);
Hope this helps.
JuanC
-
We do not support using the "zoom" scrollbar on charts using multiple panes, actually we eve have code that tries to force the simple scrollbars in those situations.
If you are ok with simple scrollbar, you can force them using the following code
chart1.getZoom().setUseSimpleScrollBars(true);
In our current builds (not made public yet) we are exploring an API that allows you to select a single pane or series to show in this "zoom" scrollbar, would this be something that helps you in your scenario? Can you tell us the version of jChartFX you are using and post sample code that duplicates the problem you are experiencing?
Regards,
JuanC
-
1
-
-
I am including sample code on how to create a simple gantt chart using either numerical data or dates, please note that if you set the fields correctly you do not need to manually loop through the data.
var usingDates = true;
var ganttData;if (usingDates) {
ganttData = [
{
"ProjectName": "PROJECT 1",
"StartValue": "2016-11-05T00:00:00+05:30",
"EndValue": "2016-11-30T00:00:00+05:30",
"TimeStamp": "15/11/2016 12:33 PM",
},
{
"ProjectName": "PROJECT 2",
"StartValue": "2016-11-12T00:00:00+05:30",
"EndValue": "2016-12-05T00:00:00+05:30",
"TimeStamp": "15/11/2016 12:33 PM",
},
];chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Date);
} else {
ganttData = [
{
"ProjectName": "PROJECT 1",
"StartValue": "2",
"EndValue": "5",
"TimeStamp": "15/11/2016 12:33 PM",
},
{
"ProjectName": "PROJECT 2",
"StartValue": "3",
"EndValue": "8",
"TimeStamp": "15/11/2016 12:33 PM",
},
];
}var fields = chart1.getDataSourceSettings().getFields();
var field;
field = new cfx.FieldMap();
field.setName("StartValue");
field.setUsage(cfx.FieldUsage.FromValue);
fields.add(field);field = new cfx.FieldMap();
field.setName("EndValue");
field.setUsage(cfx.FieldUsage.Value);
fields.add(field);field = new cfx.FieldMap();
field.setName("ProjectName");
field.setUsage(cfx.FieldUsage.Label);
fields.add(field);chart1.setGallery(cfx.Gallery.Gantt);
chart1.setDataSource(ganttData);Hope this helps.
JuanC
-
Please note that each motif is a js and each palette is a css file so if your solution is server side, the simple way to do this would be to allow these dropdowns to change some url parameters and regenerate the page in question using the appropriate motif/palette combination.
If you want to change them "client side", you could include various/all motifs on the same page, to change a motif you would have to execute something like this
cfx.motif = "block"
And later recreate the charts/gauges in the page.
Changing the palette is a little more involved because it would require you "unloading" a css before loading the new palette. I will check with the team that created that page and the motif page to see if they can provide extra details in this thread.
Regards,
JuanC
-
We are uploading a "pre-release" build that includes this fix, it should be ready to download later today, please let us know if you experience any issues.
Regards,
JuanC
-
Assuming this data and function to extract week number, note that I have no idea if this function implements the week number that you expect as week numbering seems to be vaguely defined
var items = [
{ "Date": "2016-07-06T08:45:10.280Z", "Value": 15},{ "Date": "2016-08-15T12:15:00.000Z", "Value": 12},{ "Date": "2016-08-25T23:45:10.280Z", "Value": 18},];function getWeekOfYear(date)
{var target = new Date(date.valueOf()), dayNumber = (date.getUTCDay() + 6) % 7, firstThursday;target.setUTCDate(target.getUTCDate() - dayNumber + 3);firstThursday = target.valueOf();target.setUTCMonth(0, 1);if (target.getUTCDay() !== 4)target.setUTCMonth(0, 1 + ((4 - target.getUTCDay()) + 7) % 7);return Math.ceil((firstThursday - target) / (7 * 24 * 3600 * 1000)) + 1;}I see 3 choices,
1) If you are creating a bar chart or even if using a line/area chart you do not have holes in your data or do not want to plot holes in the data, you could add a field with the week number using the date and then tell jChartFX that you want to use that as the label, e.g.
for(var i = 0; i < items.length; i++) {
var item = items;item["Week"] = getWeekOfYear(new Date(Date.parse(item["Date"])));}var fieldMap;fieldMap = new cfx.FieldMap();fieldMap.setName("Week");fieldMap.setUsage(cfx.FieldUsage.Label);chart1.getDataSourceSettings().getFields().add(fieldMap);fieldMap = new cfx.FieldMap();fieldMap.setName("Value");fieldMap.setUsage(cfx.FieldUsage.Value);chart1.getDataSourceSettings().getFields().add(fieldMap);2) If you are creating a line/area chart and want to have holes in the display for missing weeks, just do the same as before but use cfx.FieldMap.XValue for the week field.3) It is also possible to keep using the date field as the labels or X value and handle an event so that you can return a string used for the X axis labels, this would be a little more involved but I thought I should mention it in case it is useful in other scenarios.JuanC -
Unfortunately we do not support week number.
d -> Day
dd -> Day with trailing zero if necessary
ddd- >Day of Week Abbreviated
dddd -> Day of Week
M -> Month
MM -> Month with trailing zero if necessary
MMM -> Month Name Abbreviated
MMMM -> Month Name
yy -> Last 2 digits of year
yyyy -> Year
h -> Hour
hh -> Hour with trailing zero
H -> Hour (24 hour format)
HH -> Hour (24 hour format) with trailing zero
m -> Minute
mm -> Minute with trailing zero
s -> Second
ss -> Second with trailing zero
t -> First letter of am/pm
tt -> am/pm
Regards,
JuanC
-
I tried this as the only code in a page
var chart1 = new cfx.Chart();
chart1.setDataSource([{"myinfomonitor_ts":"2016-07-04T10:55:19.785Z","bundleweight_sum":14350},{"myinfomonitor_ts":"2016-07-04T11:55:19.785Z","bundleweight_sum":24950},{"myinfomonitor_ts":"2016-07-04T12:55:19.785Z","bundleweight_sum":7076},{"myinfomonitor_ts":"2016-07-04T13:55:19.785Z","bundleweight_sum":18148},{"myinfomonitor_ts":"2016-07-04T14:55:19.785Z","bundleweight_sum":21726},{"myinfomonitor_ts":"2016-07-04T15:55:19.785Z","bundleweight_sum":22326},{"myinfomonitor_ts":"2016-07-04T16:55:19.785Z","bundleweight_sum":9356},{"myinfomonitor_ts":"2016-07-04T17:55:19.785Z","bundleweight_sum":23432},{"myinfomonitor_ts":"2016-07-04T18:55:19.785Z","bundleweight_sum":25708},{"myinfomonitor_ts":"2016-07-04T19:55:19.785Z","bundleweight_sum":24546},{"myinfomonitor_ts":"2016-07-04T20:55:19.785Z","bundleweight_sum":24650},{"myinfomonitor_ts":"2016-07-04T21:55:19.785Z","bundleweight_sum":21070},{"myinfomonitor_ts":"2016-07-04T22:55:19.785Z","bundleweight_sum":27072},{"myinfomonitor_ts":"2016-07-04T23:55:19.785Z","bundleweight_sum":42356},{"myinfomonitor_ts":"2016-07-05T00:55:19.785Z","bundleweight_sum":38798},{"myinfomonitor_ts":"2016-07-05T01:55:19.785Z","bundleweight_sum":0},{"myinfomonitor_ts":"2016-07-05T02:55:19.785Z","bundleweight_sum":7146},{"myinfomonitor_ts":"2016-07-05T03:55:19.785Z","bundleweight_sum":13038},{"myinfomonitor_ts":"2016-07-05T04:55:19.785Z","bundleweight_sum":18630},{"myinfomonitor_ts":"2016-07-05T05:55:19.785Z","bundleweight_sum":12464},{"myinfomonitor_ts":"2016-07-05T06:55:19.785Z","bundleweight_sum":3540},{"myinfomonitor_ts":"2016-07-05T07:55:19.785Z","bundleweight_sum":0},{"myinfomonitor_ts":"2016-07-05T08:55:19.785Z","bundleweight_sum":0}]);
chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.DateTime);chart1.getAxisX().setLabelAngle(0);chart1.getAxisX().getLabelsFormat().setCustomFormat("HH");chart1.getAxisX().setStaggered(true);And the labels are shown correctly, note that I am not setting the step, and jChartFX should calculate an appropriate one, if the format is set to DateTime, we will consider the following steps: 1,2,3,6,12 hours 1,5,10,15,30 minutes or 1,5,10,15,30 seconds.Is it possible you are changing other property that is causing the labels not to appear? I tried both with 6022 as well as 5900 and in both cases it worked.About the step, the answer is yes. Setting the step to 2/24 would give you a label every 2 hours. Note that because of floating point limitations some specific combinations might not work properly, we will research if we can provide a way to specify the unit of the step (e.g. day, hour, minute) in future builds.JuanC -
BTW, note that if you wanted to change the color for the bar labels and setting the line alignment such that the labels are painted inside the bars, you would need to change the inside color.
seriesItem2.getPointLabels().setVisible(true);seriesItem2.getPointLabels().setLineAlignment(0);seriesItem2.getPointLabels().setTextInsideColor("#FFFF00");JuanC -
The bug is related to a behavior where galleries that paint their labels inside (e.g. pie, bar, etc.) can use a different color to make sure labels are more visible.
You can workaround the bug by using the following line
seriesItem.getPointLabels().setTextColorMethod(cfx.PointLabelColor.Outside);
We will be fixing this issue in our next build.Regards,JuanC
Resize chart using doUpdate()
in General Questions
Posted
>> No, If i commit "chart.doUpdate(true);" then every thing is OK, But chart resize not possible
What I meant was, can you try commenting the block of code where you customize the chart (chart gallery, colors, etc) and/or the block of code where you pass the data, WITHOUT commenting the doUpdate call to find out if there is a specific code that triggers the issue.
>> When i load dashboard-01 first time then resize of chart is working perfect. When i come from same dashboard after dashboard-02 and try to resize then
Are dashboard-01 and dashboard-02 different HTML pages?
We need to be able to duplicate the problem in-house in order to find a fix and test it.
Can you try using console.log to log the sizes of the chart(s) just before you do the initial render as well as before the doUpdate calls? This could let you and us know which of the charts are failing and the sequence of events that triggers the issue, also knowing if the error happens without any of the chart customizations or data will be critical to try to reproduce and fix the issue.
Regards,
JuanC