I have some python code which sucessfully passes two array to my html template
#app.route('/line')
def line():
df= av_query(av_start_date,av_end_date,'44201')
df['dt']=pd.to_datetime(df['Date'])
df['RawValue']=np.where(df['Units']=='007',df['RawValue']*1000,df['RawValue'] )
temp_df=df[df['Site']=='SM']
dates = temp_df['dt']
values = temp_df['RawValue']
return render_template('line.html', title='Ozone Data',dates=dates[:5], values=values[:5], max_n=100)
and in my html template I have tested this plotting code
<center>
<h1>{{ title }}</h1>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var s1 = {
label: 's1',
borderColor: 'blue',
data: [
{ x: '2017-01-06 18:39:30', y: 100 },
{ x: '2017-01-07 18:39:28', y: 101 },
]
};
var s2 = {
label: 's2',
borderColor: 'red',
data: [
{ x: '2017-01-07 18:00:00', y: 90 },
{ x: '2017-01-08 18:00:00', y: 105 },
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: { datasets: [s1, s2] },
options: {
scales: {
xAxes: [{
type: 'time'
}]
}
}
});
</script>
</center>
How do I replace the dummy data in s1 and s2 with my data?
I tried to push each line to the dataset but that did not seem work.
var s1 = {
label: 's1',
borderColor: 'blue',
dates=dates
values=values
data: []
for (i=0; i<=dates.length; i++){
data.push({x:dates[i], y:values[i]})
}
};
I found the easiest way to do this is render a variable in the page using the template.
If your data is in an array or dictionary, make sure to convert it to json before passing it to the template, then pass it to the javascript when the template renders like so:
<script>
const data = {{ data|safe }};
</script>
JSON will natively render as Javascript and you can do with it what you will then.
Make sure you pass it through the safe filter or it will just be escaped.
Related
I am using chart.js to develop a TreeMap. It works great but the issue is each rectangle only shows the value of the data. I want to add some custom text next to the value. How do I achieve this?
var topTags = [
{tag:'python',num:133269},{tag:'javascript',num:109742},{tag:'java',num:65490},{tag:'c#',num:45445},{tag:'html',num:43767},{tag:'android',num:42657},{tag:'reactjs',num:38844},{tag:'php',num:34381},{tag:'sql',num:29996},{tag:'python',num:29942},{tag:'css',num:29654},{tag:'r',num:28319},{tag:'c++',num:27389},{tag:'node.js',num:25415},{tag:'angular',num:24093},{tag:'pandas',num:23826},{tag:'arrays',num:23075},{tag:'jquery',num:18968},{tag:'mysql',num:18863},{tag:'swift',num:17971},{tag:'ios',num:17600},{tag:'json',num:15589},{tag:'laravel',num:15537},{tag:'flutter',num:15201},{tag:'c',num:15195},{tag:'django',num:14748},{tag:'sql',num:12752},{tag:'reactjs',num:10974},{tag:'excel',num:10962},{tag:'list',num:10726},{tag:'regex',num:10676}
];
var canvas = document.getElementById("treemap");
var ctx = canvas.getContext("2d");
var chart = window.chart = new Chart(ctx, {
type: "treemap",
data: {
datasets: [{
tree: topTags,
key: "num",
groups: ['num'],
spacing: 0.5,
borderWidth: 1.5,
fontColor: "black",
borderColor: "grey"
}]
},
options: {
maintainAspectRatio: false,
legend: { display: false },
tooltips: { enabled: false }
}
});
When running this code, I get the numbers in each rectangle but I need some text to be appended next to the numbers for each rectangle. How do I achieve this?
You can use the formatter options in the labels section:
const options = {
type: 'treemap',
data: {
datasets: [{
label: '# of Votes',
tree: [12, 19, 3, 5, 2, 3],
backgroundColor: 'pink',
labels: {
display: true,
formatter(ctx) {
const data = ctx.chart.data;
return `Custom Text: ${data.datasets[ctx.datasetIndex].tree[ctx.dataIndex]}`;
}
},
}]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap#2.0.1/dist/chartjs-chart-treemap.js"></script>
</body>
what excatly i am trying to do is to send csv data from views.py in my django app to a chart.js file i am using in the front this is chartjs file :
// comboBarLineChart
var ctx_combo_bar = document.getElementById("comboBarLineChart").getContext('2d');
var comboBarLineChart = new Chart(ctx_combo_bar, {
type: 'bar',
data: {
labels: ["a", "b", "c", "d", "e", "f", "j"],
datasets: [{
type: 'bar',
label: 'Followers',
backgroundColor: '#FF6B8A',
data: {{ lf }},
borderColor: 'white',
borderWidth: 0
}, {
type: 'bar',
label: 'Likes',
backgroundColor: '#059BFF',
data: {{ ll }},
}],
borderWidth: 1
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
im trying to get the lists of number lf and ll but in my console its showing an error i couldn't figure it out :
enter image description here
and here is my views.py function:
context={}
file_directory = 'media/fl.csv'
readfile(file_directory)
dashboard = []
dashboard1 = []
for x in data['likes']:
dashboard.append(x)
my_dashboard = dict(Counter(dashboard))
print(my_dashboard)
values = my_dashboard.keys()
print(values)
listlikes = []
for x in values:
listlikes.append(x)
print(listlikes)
for x in data['followers']:
dashboard1.append(x)
my_dashboard1 = dict(Counter(dashboard1)) # {'A121': 282, 'A122': 232, 'A124': 154, 'A123': 332}
values1 = my_dashboard1.keys()
print(values1)
listfollowers = []
for x in values1:
listfollowers.append(x)
print(listfollowers)
context = {
'lf': listfollowers,
'll': listlikes,
}
return render(request,'static/assets/data/data_datatables.js',context)
just try to inject the data in a javascript block from html it works so fine
I have a flask app that utilizes chart.js,
live app can viewed here: https://flaskapp.gullp.repl.co/
I'm trying to pull the clicked value from the chart and put it into a variable that resides outside of the chart function.
Here is my chart logic:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: /* {{ labels }}*/ ['Big Home', 'Medium Home', 'Small Home'] ,
datasets: [{
label: 'count per label',
data: /*{{ values }} */ [3,2,1]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
//below allows you to click the chart and get the respective value. you will pass this value to python
,onClick: function(c,i) {
e = i[0];
//console.log(e._index)
var x_value = this.data.labels[e._index];
var y_value = this.data.datasets[0].data[e._index];
// console.log(x_value);
//console.log(y_value);
console.log('you clicked the graph, now the x value is = ' + x_value)
console.log('since you clicked, this is the chart clicked data = ' + JSON.stringify(chart_clicked_data) )
document.querySelectorAll("tr").forEach((tr, i) => {
if(i === 0){
// skip column names
return
}
if(tr.children[0].innerText != x_value){
tr.style.display = 'none';
}else {
tr.style.display = 'table-row';
}
})
}
}
});
Here is my code trying to extract the x-value:
var chart_clicked_data = { 'score' : myChart.options.x_value}
console.log('this is the json chart clicked data that we want to pass back to flask = ' + JSON.stringify(chart_clicked_data) )
seems like this is not doing the trick:
myChart.config.options.x_value
when i check the console after i click the value, its not showing to be picking up.
entire live code here:
https://repl.it/join/rbkobiqi-gullp
Add an variable outside of your chartFunctions, set that variable in the click handler and then use it
let xVal = ''
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
onClick: function(c, i) {
e = i[0];
//console.log(e._index)
var x_value = this.data.labels[e._index];
var y_value = this.data.datasets[0].data[e._index];
// console.log(x_value);
//console.log(y_value);
console.log('you clicked the graph, now the x value is = ' + x_value)
xVal = x_value
},
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
document.getElementById('temp').addEventListener('click', () => {
console.log('X val: ', xVal);
alert('X val: ' + xVal)
})
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
background-color: #eee;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<button id="temp">
show pressed X value
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
I'm building a flask app in python and i return 2 arrays using render_template, names and deals to my HTML file. I know these work because of the code beneath that I tried, giving the right values.
{% for deal in deals %}
<p>Value: {{ deal }}</p>
{% endfor %}
This shows that I've got access to them in HTML. What I want to do next is get some graphics and see the values on the y-axel and the names as labels of each bar on the chart. I found a graph example from Chart.js and started working with it. But I am not getting anywhere, and the only thing I truly want is to change the data points, so instead of hardcoding it like this:
{ y: 233244, label: "Venezuela" }
it could be:
{ y: deals[i], label: names[i] }
This is the whole chart function.
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Top Oil Reserves"
},
axisY: {
title: "Reserves(MMbbl)"
},
labels: names,
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: [
{ y: 233244, label: "Venezuela" },
{ y: 266455, label: "Saudi" },
{ y: 169709, label: "Canada" },
{ y: 158400, label: "Iran" },
{ y: 142503, label: "Iraq" },
{ y: 101500, label: "Kuwait" },
{ y: 97800, label: "UAE" },
{ y: 80000, label: "Russia" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
I SOLVED IT, this was the easiest and probably best way to achieve it in. I finally got through it and can claim both arrays in the graph. My solution looks like this:
var jsDeals = {{ deals|tojson }};
var jsNames = {{ names|tojson }};
var sum = {{ sum|tojson }};
var limit = jsDeals.length;
var dataP = [];
function parseDataPoints () {
for (var i = 0; i <= limit; i++)
dataP.push({y: jsDeals[i], label: jsNames[i]});
}
parseDataPoints();
its the tojson part that did the part. Thanks for your help!
You can create a script tag and declare the variables dynamically in the head of your HTML:
<script>
let chartData = { deals: [], names: [] };
{% for deal in deals %}
chartData.deals.push("{{ deal }}");
{% endfor %}
{% for name in names %}
chartData.names.push("{{ name }}");
{% endfor %}
chartData.dataPoints = chartData.deals.map((deal, index) => ({
y: deal,
label: chartData.names[index]
}));
</script>
Then change your existing code to simply use the created variables.
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Top Oil Reserves"
},
axisY: {
title: "Reserves(MMbbl)"
},
labels: names,
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: chartData.dataPoints
}]
});
chart.render();
}
Make your own function to do this. First, initialize the chart:
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Your title"
},
axisY: {
title: "Deals"
},
labels: names,
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: []
}]
});
Then, you could have a function to initialize your data:
function initData(deals, names, chart) {
var n = deals.length;
for(var i = 0; i < n; i++) {
chart.data[0].dataPoints.push({y: deals[i], label: names[i]})
}
chart.render();
}
After creating the new chart, simply call initData(deals,names,chart);
If you want to add more data to the chart after initializing it, use this function:
function addNewDeal(deal, name, chart) {
chart.data[0].dataPoints.push({y: deal, label: name});
chart.render();
}
Hope this answered your question. Remember, every time that you want to change the data, to see the change you must call chart.render().
edit:
The final result, including the html, should look something like:
<!DOCTYPE html>
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
function initData(deals, names, chart) {
var n = deals.length;
for(var i = 0; i < n; i++) {
chart.data[0].dataPoints
.push({ y: deals[i], label: names[i]});
}
chart.render();
}
window.onload = () => {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Your title"
},
axisY: {
title: "Deals"
},
labels: names,
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: []
}]
});
chart.render()
var names = ["name1", "name2", "name3"];
var deals = [1,2,3];
initData(deals, names, chart);
}
</script>
</head>
<body>
<div id="chartContainer"></div>
</body>
</html>
I have the following array:
Where the arrays keys are the dates and the only element I want to plot, of each set, is the weight. Look:
I am putting the code as follows. Notice that I am already grouping in the date attribute the whole set belonging to each that key.
var ctx = document.getElementById("barChart").getContext("2d");
var data = {
labels: ['21/03/2018','01/04/2018','02/04/2018','04/04/2018','05/04/2018','06/04/2018'],
datasets: [
{
label: '21/03/2018',
data: [12, 0, 0]
},
{
label: '01/04/2018',
data: [15.00, 15.00,15.00]
},
{
label: '02/04/2018',
data: [25.00, 25.00, 25.00]
},
{
label: '04/04/2018',
data: [25.00, 25.00, 25.00]
},
{
label: '05/04/2018',
data: [-8.14,-7.93, -7.84]
},
{
label: '06/04/2018',
data: [-35.9 ,-38.1, -37.5]
},
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
});
But in this way ChartJs does not understand that it only needs to plot the data set present in the "data" attribute and grouping them by the key. Plotting the graph in the wrong way.
How could I plot the data correctly knowing that they are already grouped?
You need to organize your data as such:
var ctx = document.getElementById("canvas").getContext("2d");
var data = {
labels: ['21/03/2018','01/04/2018','02/04/2018','04/04/2018','05/04/2018','06/04/2018'],
datasets: [
{
data: [12, 15.00, 25.00, 25.00, -8.14, -35.9]
},{
data: [0, 15.00, 25.00, 25.00, -7.93, -38.1]
},{
data: [0, 15.00, 25.00, 25.00, -7.84, -37.5]
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options:{
legend: 'none'
}
});
I took your legend out as it's useless in this case. To look at it in the coding persepective, whatever index the date in labels is at needs to correlate with the index of the information you want to display in that grouping. data[0] refers to labels[0] and so on.