title: binding angular 2 data to predix ui component
body: <p>I am trying to develop a page in angular 2 which uses predix UI component for plotting a graph. Currently I am trying with a static json data to be displayed in the graph. But I am not able to bind the data and hence the graph is not getting displayed in the page. In the console, their is not error as well. When I give the chartData json value directly to the px-vis-timeseries tag, it's displaying the graph. So its the problem with binding the data to the predix component. I am new to both angular 2 and predix UI. So I am not sure how to bind this.Can someone please help me in this?
  @jenny do u have any idea? I saw u also had a similar Post and if u have an answer please help me on this
  Thanks in advance...</p>
  
  <p>app.component.ts file</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
          &lt;h2 id="title_tag" &gt;Timeseries - Chart&lt;/h2&gt;
          &lt;px-vis-timeseries
            prevent-resize
            width = "1200"
            height = "800"
            include-all-series
            render-to-canvas
            selection-type= "xy"
            chart-data='{{chartData}}'
            series-config='{{seriesConfig}}'
            x-axis-config='{"title":"Date"}'
            y-axis-config='{"title":"Single","titleTruncation":false,"unit":"F","axis1":{"title":"Temperature","titleTruncation":false,"unit":"C"}}'
            disable-navigator&gt;
          &lt;/px-vis-timeseries&gt;
      &lt;/div&gt;
    `
  </code></pre>
  
  <p>})</p>
  
  <pre><code>export class AppComponent{
      var chartData = '[{"x":1397102460000,"y0":11.4403,"y1":96.5,"y2":0.56,"y3":0.56},{"x":1397139660000,"y0":13.1913,"y1":96.5,"y2":0.4,"y3":0.4},{"x":1397177400000,"y0":12.8485,"y1":96.5,"y2":0.43,"y3":0.43},{"x":1397228040000,"y0":10.975,"y1":96.5,"y2":0.33,"y3":0.33},{"x":1397248260000,"y0":12.9377,"y1":96.5,"y2":0.47,"y3":0.47},{"x":1397291280000,"y0":13.3795,"y1":96.5,"y2":0.41,"y3":0.41},{"x":1397522940000,"y0":16.4446,"y1":96.5,"y2":0.32,"y3":0.32},{"x":1397542800000,"y0":12.2771,"y1":96.5,"y2":0.35,"y3":0.35},{"x":1397640960000,"y0":13.0709,"y1":96.5,"y2":0.34,"y3":0.34},{"x":1397663100000,"y1":88.8,"y2":0.28,"y3":0.28},{"x":1397700000000,"y0":12.6198,"y1":95.2,"y2":0.49,"y3":0.49},{"x":1397753040000,"y0":11.0486,"y1":96.5,"y2":0.35,"y3":0.35},{"x":1397772540000,"y0":14.6892,"y1":96.5,"y2":0.21,"y3":0.21},{"x":1397794860000,"y0":14.3738,"y1":96.5,"y2":0.42,"y3":0.42},{"x":1397813580000,"y0":10.4259,"y1":76.5,"y2":0.58,"y3":0.58},{"x":1397890680000,"y0":13.4261,"y1":96.5,"y2":0.37,"y3":0.37},{"x":1397932020000,"y0":13.0062,"y1":96.5,"y2":0.27,"y3":0.27},{"x":1397973480000,"y0":14.475,"y1":96.5,"y2":0.35,"y3":0.35}]';
   }
  </code></pre>