0

I am trying to populate a number of charts with data in a .json file. I have the chart working as required with some dummy/hard coded values (commented out in plunker), but when I try to add the values from the .json file/model it does not work.

html template:

<highchart config="chartConfig"></highchart>

controller:

 series:[
    {
        data: ['part.before_hp','part.before_torque'], //this doesn't work
        //data: [2,3], //this works
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            y: 40,
            style: {
                fontSize: '24px',
                fontFamily: 'tg, sans-serif',
                textShadow: '0 0 3px black'
            }
        },
        borderColor: 'transparent',
        pointPadding: 0.03
    },
    {
        data: ['part.after_hp','part.after_torque'], //this doesn't work
        //data: [5,6], //this works
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            y: 40,
            style: {
                fontSize: '24px',
                fontFamily: 'tg, sans-serif',
                textShadow: '0 0 3px black'
            }
        },
        borderColor: 'transparent',
        pointPadding: 0.03
    }
],

I am really stuck on this, have been trying for days to fix it, if anybody can help I would really appreciate it.

I have created this plunker to demonstrate what I am doing.

mcneela86
  • 1,029
  • 3
  • 18
  • 35

1 Answers1

1

ok, I figured it out. Here is an updated plunker - really hope this helps somebody else out.

Basically I added an 'update(part);' function that will be called when any of the parts buttons are clicked or on init, that passes the current part and configures the chart options with it.

Button to select parts:

<button class="btn btn-info" ng-click="selectLevel2($index); car.parts.selected=part.id; update(part);" ng-class="{selected: $index == partsSelected}">{{part.name}}</button>'

ng-init that will load the chart without user input:

<div id="{{part.id}}" ng-if="car.parts.selected == part.id" class="my-switch-animation" ng-init="update(part);">
    <div ng-if="car.parts.selected == part.id" ng-class="{selected: $index == partSelected}" class="json">
        {{part}}
    </div>
    <highchart config="chartConfig"></highchart>
</div>

You can see the update function in the plunker code, I don't want to clutter the post too much :-)

mcneela86
  • 1,029
  • 3
  • 18
  • 35