CODEWITHSUNDEEP
javascriptflaskbrowser
bbartling
bbartling

Reputation: 3504

javascript render data in browser

I am using a flask app with an attempt to render a chart with javascript in the front end. Back end I am sending to to the front end like this:

import pandas
from ast import literal_eval

data = literal_eval(df2.to_json(orient='records'))

print(data)

Looks like this:

[{'Date': '2020-06-29 14:04:21.000000', 'meter_reading': 71.6599960327}, {'Date': '2020-06-29 14:19:26.000000', 'meter_reading': 71.2999954224}, {'Date': '2020-06-29 14:34:30.000000', 'meter_reading': 70.9599914551}, {'Date': '2020-06-29 14:49:35.000000', 'meter_reading': 71.1199951172}, {'Date': '2020-06-29 15:04:39.000000', 'meter_reading': 70.9599914551}, {'Date': '2020-06-29 15:19:44.000000', 'meter_reading': 70.9599914551}, {'Date': '2020-06-29 15:34:48.000000', 'meter_reading': 70.6699981689}, {'Date': '2020-06-29 15:49:53.000000', 'meter_reading': 70.5699920654}]

This is my full html code. Sorry not a lot of wisdom here any tips help! Jijna is used in this portion of the html file... to send the data to be charted from the front to back.

// Add data
chart.data = [{% for item in data %}
                   "{{item}}",
                  {% endfor %}];

Full html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>chart data</title>
    <!-- import plugin script -->
    <script src='static/Chart.min.js'></script>
  </head>
  <body>
    <h1>Metering Reading</h1>
    <!-- bar chart canvas element -->
    <canvas id="myChart" width="1200" height="600"></canvas>
    <p id="pointSelected"> </p>


<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{% for item in data %}
                   "{{item |safe}}",
                  {% endfor %}];

// Set input format for the dates
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "meter_reading";
series.dataFields.dateX = "Date";
series.tooltipText = "{meter_reading}"
series.strokeWidth = 2;
series.minBulletDistance = 15;

// Drop-shaped tooltips
series.tooltip.background.cornerRadius = 20;
series.tooltip.background.strokeOpacity = 0;
series.tooltip.pointerOrientation = "vertical";
series.tooltip.label.minWidth = 40;
series.tooltip.label.minHeight = 40;
series.tooltip.label.textAlign = "middle";
series.tooltip.label.textValign = "middle";

// Make bullets grow on hover
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.strokeWidth = 2;
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");

var bullethover = bullet.states.create("hover");
bullethover.properties.scale = 1.3;

// Make a panning cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;

// Create vertical scrollbar and place it before the value axis
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;
chart.scrollbarY.toBack();

// Create a horizontal scrollbar with previe and place it underneath the date axis
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);
chart.scrollbarX.parent = chart.bottomAxesContainer;

dateAxis.start = 0.79;
dateAxis.keepSelection = true;


}); // end am4core.ready()
</script>

  </body>
</html>

In the browser there is no errors.. The chart doesnt render.. How can I troublehshoot the javascript function? See snip below for browser develop tool firefox of how the chart data is coming thru...

enter image description here

EDIT, updated screenshot of browser dev tool with Jinja templating change

enter image description here

Upvotes: 0

Views: 331

Answers (1)

mmfallacy
mmfallacy

Reputation: 186

try {{item |safe}}

or simply chart.data = {{data}}?

Upvotes: 1

Related Questions