1. Home
  2. Forum
  3. Angular - EJ 2
  4. Angular Dashboard Components render

Angular Dashboard Components render

Hi,
I have implemented the default functionalities of layout for dashboard following this link:

Now I tried to show the barchart in the 0 number panel following this link below:
https://www.syncfusion.com/angular-ui-components/angular-charts/chart-types/bar-chart

but then I am getting error in run window: "cannot find name Glbyte". Please share some example to implement barchar/piechart/donut chart indifferent components and
render then in the displayed panel. Please help!

8 Replies
SP Sowmiya Padmanaban Syncfusion Team February 25, 2020 11:30 AM UTC

Hi RakhiS,  
 
Greetings from Syncfusion support. 
 
We have checked your reported query. For your reference, we have prepared a sample for DashboardLayout using (barchart, pie chart as panel content) in below methods. 
  
1.      Inline rendering (Default functionalities) 
2.      Using DashboardLayout tag (using properties). 
  
Sample link for inline rendering. 
 
  
Sample link for DashboardLayout tag (using property). 
 
  
Note: If you are using inline rendering, it is mandatory to refresh the inner components (like chart) during created() event for dashboard layout. Or else you can use panels property to define the panels and its inner components. In that case, there is no need for calling the refresh() method.  
  
Please let us know, if you need any further assistance. 
  
Regards,  
Sowmiya.P 


RA RakhiS February 26, 2020 09:54 AM UTC

Hi, 
I tried inline rendering, but only I can display piechart rest ejs-chart tags are not working it is throwing error due to which I am not to show bar chart, line graph etc. Please help

SP Sowmiya Padmanaban Syncfusion Team February 27, 2020 06:39 AM UTC

Hi RakhiS,  
 
We have checked your reported problem and unable to reproduce it. We suspect that issue might have occurred because the ejs-chart package may not have been referred in your application, or deprecated package may have been referred in your application. 
 
Refer the below link for latest chart package. 
 
We suspect that you are using older chart package version. Refer the below link. 
 
[This package has been deprecated] https://www.npmjs.com/package/@syncfusion/ej2-ng-charts 
 
Can you please install the latest chart package in your application and ensure the below cases. 
 
1.      Import the corresponding chart module in appmodule.ts file. 

import { ChartAllModule, AccumulationChartModule, RangeNavigatorAllModule } from '@syncfusion/ej2-angular-charts'; 
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService, 
  AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'; 
@NgModule({ 
  imports: [DashboardLayoutModule, ChartAllModule, AccumulationChartModule, RangeNavigatorAllModule 
  ], 
  providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService, 
    AccumulationAnnotationService], 
}) 
 
2.      Ensure that you have set different id for each chart component and DashboardLayout panel. 
 
3.      Ensure that you declared the following chart package in package.json file. 

   "@syncfusion/ej2-angular-charts": "^17.4.51", 
   "@syncfusion/ej2-angular-layouts": "^17.4.51", 
 
 
For your reference, we have prepared a sample for rendering the bar chart, pie chart, donut chart in DashboardLayout panel content. 
 
 
If the issue still persist, Can you please share the additional details regarding your requirement. Those information will help us to resolve your issue at earliest. 
 
1.      Share your package.json file. 
2.      Code snippet for rendering the chart component. 
 
Please let us know, if you have need any further assistance. 
 
Regards,  
Sowmiya.P 
 


RA RakhiS February 27, 2020 11:35 AM UTC

Thanks

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team February 27, 2020 11:37 AM UTC

Hi RakhiS, 
 
Thanks for your feedback. Please, get back to us if you need any further assistance on Syncfusion controls. We will be happy to assist you. 
 
Regards, 
Shameer Ali Baig S. 


RA RakhiS February 28, 2020 03:21 AM UTC

Hi,
I have tried the below link sample using its stackblizz code, but not able to show the Regional Chart, also can you tell me from where can I get worldmap.json script for which my console is complaining and  have shown this module in separate component rather than at the component level. Sharing with u all the errors which I am getting in my console.

https://stackblitz.com/run : code followed from this

error snipp:





Thanks,
Rakhi Singh

RA RakhiS February 28, 2020 03:55 AM UTC

Also please let me know the significance of this icons:
Like this time second icon is in use where we can see the dashboard which is created finally and I am not getting the significance of the other icons.


SP Sowmiya Padmanaban Syncfusion Team February 28, 2020 09:02 AM UTC

Hi RakhiS, 
 
Query 1 – Reginal map is not displaying 
 
We have checked your reported problem. You can use online URL link for loading maps inside the DashboardLayout panel. Refer the below code snippet. 

 public  layers: object[] = [ 
        { 
            shapeData: new MapAjax('https://ej2.syncfusion.com/demos/src/dashboard-layout/worldmap.json'), 
            shapePropertyPath: 'continent', 
            shapeDataPath: 'continent', 
            dataSource: new MapAjax('https://ej2.syncfusion.com/demos/src/dashboard-layout/datasource.json'), 
            shapeSettings: { 
                colorValuePath: 'color', 
            }, 
}] 

You can also find the local map data in below link. 
 
For your reference, we have prepared a sample. 
 
Query 2 - significance of this icons 
 
We have used icons on each node of list available within the docked Sidebar to depict use-case scenario of building Dashboard Layout in any real-time application.  So, We have not added any functionality to that list(with icons) within Sidebar. 
 
You can check our Sidebar samples, to understand the purpose of using icons within Sidebar element. 
 
 
Please let us know, if you have need any further assistance. 
 
Regards,  
Sowmiya.P 
 



Loader.
Up arrow icon