0

So i'm trying to generate a graph with data from my angularJS controller. This graph-library uses jquery.

jquery.sparkline documentation

From what i can tell, there are two ways of entering data here that works.

  1. <elem class="sparkline-class">1,2,3,4,5,6,7</elem>

  2. var passedData = [1,4,5,5,6,3,2]; $(".sparkline-big-passedData").sparkline(passedData, {

What i actually want:

  1. <elem class="sparkline-class">{{$ctrl.myControllerVariable}}</elem>

Ideally example 3 here above, would be equivilent to example 1 above.

I want to pass the array from my controller - into the jquery as in example 2, OR make it act like inline-text like in example 1 (neither works atm)?

For some reason I can't make the data my controller spits out with eg. {{$ctrl.waterPressure}} work.

This is my code and I've set up 3 examples:

Controller: 

export class MachinePark implements OnInit{
    processTemperature:number[] = [7,9,14,7,4,5,12,6,9,4,12,13,14];
    waterPressure:number[] = [2.2,2.4,2.6,2.7,2.1,2.6,2.1,2.8,1.1,2.6,2.3,2.2,2.2];
...
}

Snippet:

var passedData = [7, 4, 3, 5, 5, 6, 2, 5];

$(function() {
    "use strict";
    $(".sparkline-big-processTemperature").sparkline("html", { //documentation sais, i can use a variable here, or opt for inline-html
      type: "line",
      width: "100%",
      height: "80",
      highlightLineColor: "#ffffff",
      lineColor: "#ffffff",
      fillColor: "transparent",
      lineWidth: 1,
      spotColor: "#ffffff",
      minSpotColor: "#ffffff",
      maxSpotColor: "#ffffff",
      highlightSpotColor: "#000000",
      spotRadius: 4
    })
  }),
  $(function() {
    "use strict";
    $(".sparkline-big-waterPressure").sparkline("html", { //this uses elem-inline data
      type: "line",
      width: "100%",
      height: "80",
      highlightLineColor: "#ffffff",
      lineColor: "#ffffff",
      fillColor: "transparent",
      lineWidth: 1,
      spotColor: "#ffffff",
      minSpotColor: "#ffffff",
      maxSpotColor: "#ffffff",
      highlightSpotColor: "#000000",
      spotRadius: 4
    })
  }),
  $(function() {
    "use strict";
    $(".sparkline-big-passedData").sparkline(passedData, { //this uses data passed from a variable
      type: "line",
      width: "100%",
      height: "80",
      highlightLineColor: "#ffffff",
      lineColor: "#ffffff",
      fillColor: "transparent",
      lineWidth: 1,
      spotColor: "#ffffff",
      minSpotColor: "#ffffff",
      maxSpotColor: "#ffffff",
      highlightSpotColor: "#000000",
      spotRadius: 4
    })
  });
.panel-box {
  min-width: 248px;
  display: table-cell;
  float: none!important;
  padding: 0!important;
  table-layout: fixed;
}

.panel-content {
  position: relative;
  padding: 20px;
  width: 400px;
  height: 120px;
  text-align: center;
}

.bg-black {
  color: #ccc;
  border-color: #000;
  background: #272634!important;
  vertical-align: top!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-box col-xs-8">
  <div class="panel-content bg-black">
    <div class="sparkline-big-waterPressure">{{$ctrl.waterPressure}}</div>
  </div>
</div>
<br>
<div class="panel-box col-xs-8">
  <div class="panel-content bg-black">
    <div class="sparkline-big-processTemperature">2,8,3,4,5,6,2,3,4</div>
  </div>
</div>
<br>
<div class="panel-box col-xs-8">
  <div class="panel-content bg-black">
    <div class="sparkline-big-passedData"><!-- PASSED DATA FROM JQUERY --></div>
  </div>
</div>

<script type="text/javascript" src="https://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js"></script>

Is it possible to either 1. access the values of my angularJS controller, in jquery? 2. can i somehow make it so that my controller-values work as inline-data?

Joel
  • 5,732
  • 4
  • 37
  • 65
  • @Lewis I'm reading these values from an API-endpoint, they are later formatted and exported into number-arrays in my controller as you can see above. Ideally I would just like to be able to call this number-array, and the values would show up, so that the grpah-library could process them. – Joel Aug 23 '18 at 08:56
  • Yes Apologies, I re-read your question more thoroughly and realised I had not understood correctly. – Lewis Aug 23 '18 at 08:57
  • @Lewis No problem. let me know if there is anything i can clarify for you further – Joel Aug 23 '18 at 08:57
  • I may be out of my depth here, but according to the documentation that should work fine. Have you tried joining the array in to a string before outputting? I.e, `waterPressure.join()`? – Lewis Aug 23 '18 at 09:02
  • @Lewis Good thought, I've already tried `{{$ctrl.waterPressure.join(", ")}}` tho :/ – Joel Aug 23 '18 at 09:03
  • Hmm, perhaps join them in your controller first (rather than on output) in to a separate variable and output that? Strange one. – Lewis Aug 23 '18 at 09:06

0 Answers0