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. Image for the cookie policy date

Customizing the charts

Hi,
Can I achieve the following

Attachment: Forecast_6b310482.zip

24 Replies

DD Dharanidharan Dharmasivam Syncfusion Team June 16, 2017 10:54 AM UTC

Hi Santhosh,  

Thanks for contacting Syncfusion support. 

We have analyzed your query with the provided screenshots and prepared samples with respect to your requirement. Find the samples from the below link. 


Screenshot: 
 

Screenshot: 
 
Screenshot: 
 

In the above samples to achieve your requirement we have used the following features in chart. 
·       Stripline 
·       Mulitlevel labels 
·       Annotation 
·       Legend alignment as far 
·       Series type – line, stacking column, stacking bar 

Kindly revert us, if you have any concern. 

Thanks, 
Dharani. 



SA Santhosh June 21, 2017 05:03 AM UTC

Thanks for the solution, that helped a lot


When a popup is opened after the chart is built, Current week and other annotations are appearing on top of the popup

Please help in resolving the same


Attachment: SyncFusion_33d85b8c.zip


DD Dharanidharan Dharmasivam Syncfusion Team June 22, 2017 07:35 AM UTC

Hi Santhosh,  

Sorry for the inconvenience. 

We have analyzed your query. By default, we will set 2000 as zIndex for annotations, so when you open the popup, the annotation may be displayed over the pop up. However we can overcome this in an workaround by using the loaded event of chart. In this event, we can specify the zIndex as 1000 (lower value than the popup), so that annotation will not displayed over the pop up. To depict this we have displayed ejDialog control in button click. Find the code snippet below to achieve this requirement. 

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"; 
       } 

Screenshot without pop up: 
 
Screenshot with pop up: 
 

Sample for reference can be find from below link. 

If you face still any concern, kindly modify the attached sample or provide your sample with replication steps, so that we can analyze and provide you the solution sooner. 

Thanks, 
Dharani. 



SA Santhosh June 23, 2017 03:36 AM UTC

Hi, thanks for the quick help. I am looking forward to getting help like in the below link when the legend item for sales rep is clicked, then the associated entry for the legend item for + - 10K or -25K or <-25K entry also should disappear

SalesRep

Please find the screen shot when  the sales rep legend item is disabled, this could be a great help


Attachment: SyncFusion_2_83f3935b.zip


SA Santhosh June 23, 2017 06:47 AM UTC

Hi, can this issue be solved, sorting of the x-axis is not maintained, please help.


Attachment: SyncFusion_3_3a7a8b5d.zip


DD Dharanidharan Dharmasivam Syncfusion Team June 23, 2017 12:00 PM UTC

Hi Santhosh,  

Thanks for your update.  

We have analyzed your query. Find the response for your queries below. 

Query 1: . I am looking forward to getting help like in the below link when the legend item for sales rep is clicked, then the associated entry for the legend item for + - 10K or -25K or <-25K entry also should disappear 
 
Response:   We can achieve your requirement as a workaround using legendItemClick and loaded event of chart. In the legendItemClick event, we can able get the legend item on which we have clicked, so with respect to this we have toggle the visibility of the legends(as per your requirement) and the respective series in chart. You can change this with respect to your scenario. Find the code snippet to achieve this requirement. 
 
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"; 
        } 

Screenshot before hidding the legend: 
 

Screenshot after hiding the legend: 
 

Sample for reference can be find from below link. 


Query 2: sorting of the x-axis is not maintained. 
Response: From the provided screenshot we found that, you have rendered x axis as category axis, so the x labels are not sorted. This can be achieved by rendering x axis as double, so that the x axis labels will render as per your requirement. Find the code snippet below to achieve this requirement. 
 
JS: 

$("#container").ejChart( 
        { 
         primaryXAxis: 
                { 
                    valueType:"double" 
                }, 
          //... 
    }); 
 


Screenshot: 
 


Sample for reference can be find from below link. 

Thanks, 
Dharani. 



SA Santhosh June 29, 2017 12:50 PM UTC

Thanks for the quick reply, I want to know whether in the stacked column chart that has mentioned here in this samples, can I show the tooltip for the line chart? but not for the column stacked chart



SA Santhosh June 30, 2017 05:02 AM UTC

Hi can the attached issue be solved, we need to predict whether the Amount is in M or K dynamically for the tooltip, please help


Attachment: SyncFusion_4_b0a02ce8.zip


SA Santhosh June 30, 2017 05:19 AM UTC

Hi, in one of the scenario, 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, please help in resolving



DD Dharanidharan Dharmasivam Syncfusion Team June 30, 2017 12:50 PM UTC

Hi Santhosh, 
 
Thanks for your update. 
 
We have analyzed your query. Find the response for your queries below. 
 
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. 

JS: 

$("#container").ejChart({ 
      series: [{ 
                     type: "line", 
                     tooltip:{ visible:true } 
      } 
       //... 
      ] 
}); 


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. 
 
JS: 
 
$("#container").ejChart({ 
      toolTipInitialize:"toolTip", 
       //... 
}); 
 
function toolTip(sender) { 
            var numberFormat = parseInt(sender.data.currentText.split("$")[1]).toString().length; 
            var currentText = sender.data.currentText; 
            if (numberFormat == 4) 
                sender.data.currentText = sender.data.currentText.substring(0, currentText.length - 1) + "M"; 
            else if (numberFormat == 3) 
                sender.data.currentText = sender.data.currentText.substring(0, currentText.length - 1) + "K"; 
            else if (numberFormat <= 2) 
                sender.data.currentText = sender.data.currentText.substring(0, currentText.length - 1); 
        } 
 
 
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. 


Thanks, 
Dharani. 



SA Santhosh July 3, 2017 11:07 AM UTC

Thanks for the reply, that helped in solving the issues. In the horizontal stacked chart can we group the X axis points? Please help



SA Santhosh July 3, 2017 02:58 PM UTC

Hi, how can I reinitialize the chart after destroying the chart?because after the ajax call will be having more dataI used var chart = $('#control').data("ejChart");chart.destroy()$('#control).ejChart({});what is the best way to rebind the data?


DD Dharanidharan Dharmasivam Syncfusion Team July 4, 2017 12:39 PM UTC

Hi Santhosh, 
 
Thanks for your update. 
 
We have analyzed your queries. Find the response for your queries below. 
 
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. 
 
JS: 
 
$("#container").ejChart({ 
          series: [ 
                       { 
                             //... 
                              stackingGroup:"Fruits" 
                        },                       
                        {  
                               //... 
                               stackingGroup:"Fruits" 
                        },                                
                       //... 
                      ], 
      }); 
 
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. 

JS: 

<button onclick="destroy()">Destroy chart</button> 
<button onclick="update()">Update chart</button> 

//Store the chart properties globally 
var chartProperties; 
 
//initial rendering of chart 
$("#container").ejChart(chartProperties); 
 
//Destroyed chart  
function destroy() { 
      var chart = $("#container").ejChart("instance"); 
      chart.destroy(); 
} 
 
//Created chart  
function update() { 
      $("#container").ejChart(chartProperties); 
} 


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. 

 
<button onclick="addNewPoints()">New Points</button> 
<button onclick="addOldPoints()">Old Points</button> 
     
function addNewPoints() { 
            var chart = $("#container").ejChart("instance"); 
            var chartNewData = getData(); 
            chart.model.series[0].points = chartNewData; 
            chart.redraw(); 
        } 
 
function addOldPoints() { 
            var chart = $("#container").ejChart("instance"); 
            chart.model.series[0].points = chartData; 
            chart.redraw(); 
        } 
Screenshot after adding new points: 
 

Sample for reference can be find from below link. 


Thanks, 
Dharani. 




SA Santhosh July 6, 2017 01:34 PM UTC

Thanks for the quick support,

I am facing the issue like when the chart is re-rendered using redraw(), X axis labels are not getting displayed, X axis is of type category



DD Dharanidharan Dharmasivam Syncfusion Team July 7, 2017 03:09 PM UTC

Hi Santhosh, 

Thanks for your revert. 

We have analyzed your query. We have created a sample , here in a button click we have called redraw method by changing the fill color of the series and the x axis labels were rendered properly at our end. Sample used for testing can be find from below link. 


Screenshot before redraw: 
 

Screenshot after redraw: 
 

Since we are not aware of your exact scenario on which the issue is reproduced, we would like to 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. 
·       In the redraw, what are the properties do you specified / changed. 
·       Do you have any customized the x axis labels in the chart event. 

Thanks, 
Dharani. 




SA Santhosh July 10, 2017 05:04 AM UTC

Hi,  Thanks for the solution that helped us a lot,

The following attachment contains the issue that we are facing in the line chart, we set the zIndex for the annotation as 1000 as suggested in one of the replies in the chain.

Please help in solving the problem


Attachment: Issue5_a8a10819.zip


SA Santhosh July 11, 2017 10:03 AM UTC

Hi, can I enable the zooming for the Horizontal axis in the stacking bar shown in the chain? (Weekly axis)


DD Dharanidharan Dharmasivam Syncfusion Team July 12, 2017 06:39 AM UTC

Hi Santhosh, 

Thanks for your revert. 

We have analyzed your query with the provided screenshot. Find the response for your queries below. 

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. 

JS: 

$("#container").ejChart({ 
     //... 
           annotations: [ 
                                   { visible: true, region:"series" }, 
                 //... 
                                 ], 
}); 

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. 

JS: 

$("#container").ejChart({ 
     //... 
           zooming: { enable: true }, 
}); 

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. 


Thanks, 
Dharani. 




SA Santhosh July 12, 2017 10:04 AM UTC

Hi, please find the data for the line chart here.

If I build the line chart with this data Annotation group is not working


Attachment: jsonData_Linechart_d6400619.zip


DD Dharanidharan Dharmasivam Syncfusion Team July 13, 2017 06:11 AM UTC

Hi Santhosh, 

Thanks for your update. 

We have analyzed your query. From the provided code snippet we found that in the annotations, for coordinateUnit you have specified points as a variable but you need to specify it as string, so that the annotations are working properly and also from the provided code snippet we found that you haven’t initialize the loaded event in the sample, so the specified workaround for annotations(specified zindex property as 900 in your sample) will not be taken into account. Since there is a space in annotation text (contents in div element for example Q1- 2017), the second word will move to next line, if you need to show without breaking the sentence, then you can apply CSS style of white-space as nowrap, so that the annotations will be rendered in single line. We have prepared a sample with respect to this. Find the code snippet below to achieve this requirement. 
 

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", 
                                 } 
                               //... 
       ] 
}) 


Screenshot: 
 

Sample for reference can be find from below link. 

Kindly revert us, if you have any concern. 

Thanks, 
Dharani. 




SA Santhosh July 18, 2017 12:28 PM UTC

Hi,

Thanks for the reply. The problem still persists in the environment. Please help in resolving the issue



DD Dharanidharan Dharmasivam Syncfusion Team July 19, 2017 01:15 PM UTC

Hi Santhosh, 

Sorry for the inconvenience. 

In your last update (12th, July 2017) you have provided your sample code and stated that annotation group not working. While analyzing the provide sample code, we have found that you have specified coordinateUnit of annotations property as variable(points), but this property need to be specified as string, so we suggest to specify the property in string and the annotation was working properly at our end. And if you specify the region property of annotations as chart/series, if the annotations moves out of chart area, then it will get clipped, this is our current behavior.  And also we have provided solution not to wrap the annotation text, when there is space between the words by using CSS style of white-space as nowrap to annotation element. 
 
Since we are not clear with your query on the issue which you are mentioning, we would like to know the following details, which will be helpful in further  analysis and provide you the solution. 
 
  • Modify the sample or provide your sample with replication procedure.
  • Provide some screenshots or if possible attach the video of your issue.
  • Current version of Essential Studio you were using.

Thanks, 
Dharani. 




SA Santhosh July 27, 2017 11:23 AM UTC

Hi,

The problem is solved. Can I enable the scrolling for the Weekly axis in the Review Record Sample mentioned in the chain?



DD Dharanidharan Dharmasivam Syncfusion Team July 28, 2017 01:38 PM UTC

Hi Santhosh, 

Sorry for the inconvenience. 

As of now we are having issue with panning using scrollbar for stacking bar series, so we have logged bug report for your scenario. The fix for the reported scenario will be available for volume 3 SP 1 release, which is expected be out in the end of  August 2017. 

Thanks, 
Dharani. 


Loader.
Live Chat Icon For mobile
Up arrow icon