We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
JS:
$("#container").ejChart(
{
//...
loaded:"chartLoaded"
});
function chartLoaded(sender) {
var annotationGroup = $("#annotation_group_" + this._id).children();
for (var i = 0; i < annotationGroup.length; i++)
annotationGroup[i].style.zIndex ="1000";
} |
|
JS:
$("#container").ejChart(
{
//...
loaded: "chartLoaded",
legendItemClick:"legendClick"
});
var legendFlag = false, isLegendVisible = false;
function legendClick(sender) {
//Checked on if clicked on 1sr series(Sales Rep)
if (sender.data.legendItem.LegendItem.Text == sender.model.series[0].name) {
legendFlag = true;
var legendGroup = $("#"+this._id+"_svg_Legend")[0].children;
for (var i = 0; i < legendGroup.length; i++) {
//Hidden the required legends as per your requirement
if (i > 1) {
sender.model.series[i].visibility = sender.model.series[i].visibility == "hidden" ? "visible" : "hidden";
var individualLegendGroup = legendGroup[i].children;
for (var j = 0; j < individualLegendGroup.length; j++) {
individualLegendGroup[j].style.visibility = (individualLegendGroup[j].style.visibility == "" ||
individualLegendGroup[j].style.visibility == "visible") ? "hidden" : "visible";
if (individualLegendGroup[individualLegendGroup.length - 1].style.visibility == "visible") isLegendVisible = true;
else isLegendVisible = false;
}
}
}
}
}
function chartLoaded(sender) {
if (legendFlag) {
var legendGroup = $("#"+this._id+"_svg_Legend")[0].children;
for (var i = 0; i < legendGroup.length; i++) {
if (i > 1) {
var individualLegendGroup = legendGroup[i].children;
for (var j = 0; j < individualLegendGroup.length; j++) {
if (isLegendVisible) individualLegendGroup[j].style.visibility = "visible";
else
individualLegendGroup[j].style.visibility = (individualLegendGroup[j].style.visibility == "" ||
individualLegendGroup[j].style.visibility == "visible") ? "hidden" : "visible";
}
}
}
legendFlag = false;
}
var annotationGroup = $("#annotation_group_" + this._id).children();
for (var i = 0; i < annotationGroup.length; i++)
annotationGroup[i].style.zIndex = "1000";
} |
|
JS:
$("#container").ejChart(
{
primaryXAxis:
{
valueType:"double"
},
//...
});
|
|
Query |
Response | |
|
can I show the tooltip for the line chart? but not for the column stacked chart |
Yes you can able to show the tooltip for the required series by specifying visible property of tooltip to true as depicted in the below code snippet.
Screenshot:
 Sample for reference can be find from below link.
| |
|
we need to predict whether the Amount is in M or K dynamically for the tooltip |
Your requirement can be achieved using toolTipInitialize event of chart. In this event we can able to customize the tooltip, so we have achieved your requirement as workaround depends upon the length of y axis label length. You can change this with respect to your scenario. Find the code snippet below.
Screenshot with K :
 Screenshot with M:
 Sample for reference can be find from below link.
| |
|
we are displaying the Horizontal stacked bar chart dynamically by making ajax call, chart is rendered properly for the very first time but the chart is not refreshing for the further data |
We have tries to replicate the reported scenario, unfortunately the reported scenario is not replicated and the chart is rendering properly at our end. In the sample we have used XMLHttpRequest object to retrieve the data, retrieved data will be in string format. We have then converted into array of objects and passed the data source to the series. Sample used for testing can be find from below link.
Screenshot before updating data source:
 Screenshot after updating data source:
 Since we are not aware of your exact scenario on which the reported scenario occurs, we would like to let you know the following details, which would be helpful in further analysis and provide you the solution sooner.
· Modify the attached sample or provide your sample with replication steps.
· Current version of Essential Studio you are using.
· Did you bind points to data Source property or directly to points in series on ajax request.
|
|
Query |
Response | ||
|
In the horizontal stacked chart can we group the X axis points |
Yes, we can group x axis points in horizontal stacked bar chart. Initially horizontal stacked bar can be rendered by specifying stackingbar to series.type property. And grouping can be achieved by using stackingGroup of series property. We need to specify a name to this property to the series you need to group. We have prepared a sample with respect to this requirement. Find the code snippet below to achieve this requirement.
In the sample we have three series and grouped the first two series.
Screenshot:
 Sample for reference can be find from below link.
For more information on the stacking bar chart, please follow the below link
Kindly revert us if you have any concern.
| ||
|
how can I reinitialize the chart after destroying the chart |
If you destroy the chart using the destroy method, then the chart instance itself will get destroyed, so after that you can’t update chart properties. So, you need to recreate the chart to the same container. To depict this we have created a sample in which we have two buttons, one for destroy chart and another for creating chart, also in this we have stored chart properties in global variable, after destroying the chart, we have created chart with the old properties stored in global variable. Find the code snippet to achieve this requirement.
Sample for reference can be find from below link.
Also, if your requirement is to only change the points in the series, you can directly assign the new points to the series. To we have created sample with respect to this, in which we have bind new points and old points to series in button click. Find the code snippet to achieve this.
Screenshot after adding new points:
 Sample for reference can be find from below link.
|
|
Queries |
Response | |
|
|
We suspect that your issue is the annotation which is shown out of chart area, to resolve this issue, specify the region property of annotations as series, so that the annotation which moves out of chart area will get clipped, by default the region will be chart. For more information on this, follow the help document. Find the code below to achieve this requirement.
Screenshot:
 In the below sample we have also used the workaround which we have given for annotation with zindex property specified as 1000. And also we have enabled zooming in the sample.
Sample for reference can be find from below link.
| |
|
can I enable the zooming for the Horizontal axis in the stacking bar |
Yes you can enable zooming for stacking bar chart. But we cannot enable zooming only for a particular axis. Since zooming is a model property, it is applicable for all the axes in chart. Find the code snippet to achieve this requirement.
Screenshot while zooming:
 Screenshot after zooming:
 Sample for reference can be find from below link.
For more information on zooming, kindly follow the below link.
|
|
JS:
<div id="q1" style="display:none;white-space:nowrap;color:green;opacity:1">Q1- 2017</div>
<div id="cw" style="display:none;white-space:nowrap;color:red;opacity:1">Current Week</div>
<div id="q2" style="display:none;white-space:nowrap;color:green;opacity:1">Q2- 2017</div>
<div id="q3" style="display:none;white-space:nowrap;color:green;opacity:1">Q3- 2017</div>
<div id="q4" style="display:none;white-space:nowrap;color:green;opacity:1">Q4- 2017</div>
$("#container").ejChart({
//...
annotations: [{
coordinateUnit: "points",
}
//...
]
})
|
