unable to represent c3 chart directives in angular gridster (Angularjs 1.x)

37 views
Skip to first unread message

Mn Kishore

unread,
Dec 29, 2016, 1:02:30 AM12/29/16
to Angular

I am trying to show angularjs c3 charts in angular gridster. Even though the gridster is appearing the charts with in the gridster are missing. Please find the gridster+C3-simpl

Sander Elias

unread,
Dec 29, 2016, 2:48:15 AM12/29/16
to Angular
Hi Mn,

Works for me, but you need to provide the data...
 $scope.c3Chart1 =  {
  data
: {
        columns
: [
           
['data1', 30, 200, 100, 400, 150, 250],
           
['data2', 130, 100, 140, 200, 150, 50]
       
],
    type
: 'line'
   
}
 
};
...
 $scope
.dashboard = {
 widgets
: [{
 col
: 0,
 row
: 0,
 sizeY
: 2,
 sizeX
: 2,
 id
: "widget1",
 name
: "Line",
 options
:  $scope.chart1 // <--- wrong variable name!
 
}, {
...


If you fix that, it will start working. However, you need something to make the size of the graph equal to the size of the grid-tile. 

Regards
Sander

Mn Kishore

unread,
Dec 29, 2016, 4:51:21 AM12/29/16
to ang...@googlegroups.com
Yes Sander, thanks for pointing out the over looked error. I have corrected it but still I could not able to see the charts in the gridster (4 grey coloured boxes in plunker do not have c3 charts in them) . Plunker

--
You received this message because you are subscribed to a topic in the Google Groups "Angular" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/zhtc_ZnyyZo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Sander Elias

unread,
Dec 29, 2016, 9:32:12 AM12/29/16
to Angular
Fixed the names again: http://plnkr.co/edit/U38VmtyeavypaFhLNipa?p=preview
Again, it works for me.

Regards
Sander

chanda...@yahoo.com

unread,
Dec 29, 2016, 10:23:59 AM12/29/16
to ang...@googlegroups.com

--------------------------------------------
On Thu, 12/29/16, Sander Elias <sande...@gmail.com> wrote:

Subject: Re: [AngularJS] Re: unable to represent c3 chart directives in angular gridster (Angularjs 1.x)
To: "Angular" <ang...@googlegroups.com>
Date: Thursday, December 29, 2016, 4:32 PM
--

You received this message because you are subscribed to the
Google Groups "Angular" group.

To unsubscribe from this group and stop receiving emails
from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at https://groups.google.com/group/angular.

For more options, visit https://groups.google.com/d/optout.
n numar de reprezentanti proportional cu populatia alesi pe baza votului universal egal secret si

Mn Kishore

unread,
Dec 30, 2016, 12:37:33 AM12/30/16
to ang...@googlegroups.com
Sander, The trick is with your  <c3-simple id= "{{widget.id}}" config="widget.options"></c3-simple> where as 
          in my plunker I  have  <c3-simple id= "{{widget.id}}" config="widget.options"></c3-simple>  or  even changing it to <c3-simple id= "widget.id" config="widget.options"></c3-simple> does not giving the charts. When I change the directive to <c3-simple id= "{{widget.id}}" config="widget.options"></c3-simple>, the charts are showing up. 

Thank you very much for sol. 

--

Mn Kishore

unread,
Dec 30, 2016, 2:47:04 AM12/30/16
to Angular

I mean,    in my plunker I  have  <c3-simple id= "{{widget.id}}" config="{{widget.options}}"></c3-simple>  or  even changing it to <c3-simple id= "widget.id" config="widget.options"></c3-simple> does not giving the charts.  The correct way is <c3-simple id= "{{widget.id}}" config="widget.options"></c3-simple>. There was a typo in syntax in my earlier reply

chanda...@yahoo.com

unread,
Dec 30, 2016, 5:38:11 PM12/30/16
to ang...@googlegroups.com

--------------------------------------------
On Fri, 12/30/16, Mn Kishore <mad...@gmail.com> wrote:

Subject: Re: [AngularJS] Re: unable to represent c3 chart directives in angular gridster (Angularjs 1.x)
To: "Angular" <ang...@googlegroups.com>
Date: Friday, December 30, 2016, 9:47 AM


I mean,    in my plunker I  have
 <c3-simple id= "{{widget.id}}"
config="{{widget.options}}"></c3- simple>
 or  even changing it to <c3-simple id= "widget.id"
config="widget.options"></c3- simple>
does not giving the charts.  The correct way is
<c3-simple id= "{{widget.id}}"
config="widget.options"></c3- simple>.
There was a typo in syntax in my earlier reply

On Friday,
December 30, 2016 at 11:07:33 AM UTC+5:30, Mn Kishore
wrote:Sander, The trick is
with your  <c3-simple id= "{{widget.id}}"
config="widget.options"></c3- simple>
where as           in my plunker I  have
 <c3-simple id= "{{widget.id}}"
config="widget.options"></c3- simple>
 or  even changing it to <c3-simple id= "widget.id"
config="widget.options"></c3- simple>
does not giving the charts. When I change the directive to
<c3-simple id= "{{widget.id}}"
config="widget.options"></c3- simple>,
the charts are showing up. 
Thank you very much for
sol. 
On Thu, Dec 29, 2016 at
8:02 PM, Sander Elias <sande...@gmail.com>
wrote:
Fixed the names again: http://plnkr.co/edit/
U38VmtyeavypaFhLNipa?p=previewAgain, it works for
me.
RegardsSander



--

You received this message because you are subscribed to a
topic in the Google Groups "Angular" group.

To unsubscribe from this topic, visit https://groups.google.com/d/
topic/angular/zhtc_ZnyyZo/ unsubscribe.

To unsubscribe from this group and all its topics, send an
email to angular+unsubscribe@
googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at https://groups.google.com/
group/angular.

For more options, visit https://groups.google.com/d/
optout.







--

You received this message because you are subscribed to the
Google Groups "Angular" group.

To unsubscribe from this group and stop receiving emails
from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at https://groups.google.com/group/angular.

For more options, visit https://groups.google.com/d/optout.
ebeliunea legionara din ianuarie 1941 si consecintele s- Intensificarea violentelor legionarilor si faptul ca acestia deveneau tot mai indezirabili in ochii opiniei publice l-au determinat pe Ion Antonescu inca din decembrie 1940 sa ia primele masuri contra Garzii de Fier. Astfel a ordonat desfiintarea politie*i legionare si a instituit pedeapsa cu moartea pentru instigarea la rebeliune. Legionarii profitand de complicitatea sefului politiei secrete germane Heinrich Himmler s-au inarmat prega-tindu-se pentru confruntarea decesiva.

reginem...@yahoo.com

unread,
Dec 31, 2016, 3:10:56 AM12/31/16
to ang...@googlegroups.com

--------------------------------------------
On Sat, 12/31/16, chandaniel112 via Angular <ang...@googlegroups.com> wrote:

Subject: Re: [AngularJS] Re: unable to represent c3 chart directives in angular gridster (Angularjs 1.x)
To: ang...@googlegroups.com
Date: Saturday, December 31, 2016, 12:37 AM
https://groups.google.com/d/optout.ra cea de orientare radicala in frunte cu . C. Bratianu si C.A.Rosetti. Cat priveste gruparea condusa de . Ghica ea nu este singura de orientare moderata printre fractiunile liberale. Altele asemenea se contureaza in jurul lui Mihail Kogalniceanu sau Nicolae lonescu. Moderatii se strang insa si in preajma lui Vasile Boerescu care - impreuna cu fosti revolutionari de la 1848 si vechi unionisti - se va indeparta treptat de liberali apropiindu-se de conservatori. in unele momente aceasta apropiere duce la constituirea unor noi guverne mixte conservatori-liberali . Aliante se formeaza chiar intre liberali cea mai cunoscuta fiind cum vom vedea coalitia intemeiata pe tratatul de la hotelul Concordia .
Reply all
Reply to author
Forward
0 new messages