0

I'm using the Highchart charting library with AngularJS, using Pablojim's 'Highchart-ng' module.

Everything is set up properly, and the following code works as intended:

<highchart config="{
    type    : 'line',
    series  : [{
        name    : 'Visitors', 
        data    : [1, 4, 10, 3]
    }]
}"></highchart>

But 

<highchart config="{
    type    : 'line',
    series  : [{
        name    : 'Visitors', 
        data    : {{visitors}}
    }]
}"></highchart>

does not. (notice the difference at 'data')

I keep getting the following error:

Error: [$parse:syntax] Syntax Error: Token 'visitors' is unexpected, expecting [:] at column 122 of the expression [{
    type    : 'line',
    series  : [{
        name    : 'Visitors', 
        data    : {{visitors}}
    }]
}] starting at [visitors}}
    }]
}].

Note: The variable {{visitors}} is set up properly in my controller, and when using it in my template, the data works fine. It also used to work with my previous charting library, Flot.

I've tried multiple workarounds:

  • Normally I can work around this (initialization) problem by adding something like ng-repeat="data in visitors | limitTo: 1" to the directive, so it inits only when the variable becomes available (this works with Flot and EasyPieCharts).
  • Adding ui-refresh="visitors" doesn't work,
  • and data: {{visitors || 0}} doesn't work either.

So, how can I add variables inline, within my template files?

Andreas Louv
  • 46,145
  • 13
  • 104
  • 123
Jeffrey Roosendaal
  • 6,872
  • 8
  • 37
  • 55
  • You are running into this problem because you're depending on someone's personal side project as a dependency. You're best off using D3 instead – Code Whisperer Feb 12 '15 at 15:06
  • 1
    I've used that before, however I kept running into problems as soon as I wanted to customize my charts. I've tried lots of libraries, and Highcharts is just really easy to use and *very very well documented* – Jeffrey Roosendaal Feb 12 '15 at 15:28

1 Answers1

0

you can try with:

<highchart config="{
    type    : 'line',
    series  : [{
        name    : 'Visitors', 
        data    : visitors
    }]
}"></highchart>

like a var

OR

in your ng-controller

$scope.config = { 
    options: { 
        chart: { type: 'bar' } 
    }, 
    series: [{ 
        data: visitors 
    }], 
    title: { text: 'Hello' }, 
    loading: false }

and then in your html 

<highchart config="config"></highchart>
bPratik
  • 6,894
  • 4
  • 36
  • 67
Solitary90
  • 26
  • 1
  • I've tried, but that gives me both an error (*Error: [$compile:nonassign] Expression ... used with directive 'highchart' is non-assignable!*) and 'No data to display' – Jeffrey Roosendaal Feb 12 '15 at 15:00
  • 1
    `$scope.config = { options: { chart: { type: 'bar' } }, series: [{ data: visitors }], title: { text: 'Hello' }, loading: false }` in your html `` – Solitary90 Feb 12 '15 at 15:09
  • Thanks for the suggestion, I keep that in mind when there's no other solution, but I still highly prefer to do it inline in my template files. I don't want cluttered controllers, since I have a *lot* of pages and charts. – Jeffrey Roosendaal Feb 12 '15 at 15:26
  • an object Constructor? – Solitary90 Feb 12 '15 at 15:38
  • @JeffreyRoosendaal I comment later an example, i'm on work now :) – Solitary90 Feb 12 '15 at 15:45