Im about to start building a statisk page where I get my data from the db and I want to display it in graphs, like the gauge or perhaps as staples and pie charts.
I wonder if you can have multiple values i a Gauge?
So you can display 70%(green) and 25%(red) and the rest (blue) etc.
Do you (Vladimir) have any other graphs coming? Staples and pie charts perhaps?
Have anybody used any chart library that you can recommend?
Any input appreciated, thanks.
Hi pvtallulah
Thanks.
I tested with there demo chart from http://www.chartjs.org/docs/latest/getting-started/usage.html and if I have the js code in my js file then it loads as it should, but it doesn´t load if I have the js code in the page that I´m loading as they say in there example.
So how can I run js code in the page that I´m loading?
sry didn’t get that.
whats wrong? can you share some code explaining how you add de lib?
Ok.
I have added the chart.js in my index.html file.
And if you look at http://www.chartjs.org/docs/latest/getting-started/usage.html they have all the code in the page that is displaying the chart. Even the js/script code.
If I have that code in my .js file then it works. But I want to have the js code in the actual page that I´m loading instead, and if I do. I doesnt work.
This is my barchart.asp page that Im loading.
<div data-name="barchart" class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title ">BAR CHART</div>
</div>
</div>
<div class="page-content">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>
And if I have this in my .js file then it works.
$$(document).on('page:init', '.page[data-name="barchart"]', function (e) {
var page = e.detail;
var ctx = $$(document).find('#myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
But I want to load the js code in my barchart.asp page so the barchart.asp looks like this.
<div data-name="barchart" class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title ">BAR CHART</div>
</div>
</div>
<div class="page-content">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>
<script>
var ctx = $$(document).find('#myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
So how can I make the js/script code to run and work when I include it in the page that Im loading?
do you get any error in the console?
console.log(myChart) what do you get?
maybe you need to wrap all your code in
$$(document).on('page:init', fnc(a){})
I finally got it to work with http://framework7.io/docs/router-component.html#single-file-component
So I now have this page that shows a staple, pie and doughnut charts 
So now I can easily get the data from my database and render any chart I want!
<!-- component template -->
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
<div class="title">{{title}}</div>
</div>
</div>
<div class="page-content">
<div class="block" style="max-width: 630px !important; margin: 0 auto; margin-top: 10px;">
<!--<a @click="openAlert">Open Alert</a>
<div class="list simple-list">
<ul>
{{#each names}}
<li>{{this}}</li>
{{/each}}
</ul>
</div>-->
<canvas id="myChart" width="300" height="200"></canvas>
<br><br>
<canvas id="myPieChart" width="300" height="200"></canvas>
<br><br>
<canvas id="myDoughnutChart" width="300" height="200"></canvas>
</div>
</div>
</div>
</template>
<!-- component styles -->
<style>
.red-link {
color: red;
}
</style>
<!-- rest of component data and methods -->
<script>
// script must return component object
return {
data: function () {
return {
title: 'BARCHART',
names: ['John', 'Vladimir', 'Timo'],
}
},
methods: {
openAlert: function () {
var self = this.$app.dialog.alert('Hello world!');
},
},
on: {
pageInit: function () {
// do something on page init
//stapel diagram--------------------------------
// Any of the following formats may be used
var ctx1 = document.getElementById("myChart");
//var ctx = document.getElementById("myChart").getContext("2d");
//var ctx = $("#myChart");
//var ctx = "myChart";
var myChart = new Chart(ctx1, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
//stapeldiagram END---------------------------------
//pie diagram--------------------------------------
// For a pie chart
data2 = {
datasets: [{
data: [10, 20, 30, 35],
backgroundColor: [
('#ff6384'),
('#ffce56'),
('#36a2eb'),
('#cc65fe'),
]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue',
'Purple'
]
};
var ctx2 = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx2,{
type: 'pie',
data: data2,
});
//pie diagram END----------------------------------
//doughnut diagram---------------------------------
data3 = {
datasets: [{
data: [10, 20, 30, 35],
backgroundColor: [
('#ff6384'),
('#ffce56'),
('#36a2eb'),
('#cc65fe'),
]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue',
'Purple'
]
};
var ctx3 = document.getElementById("myDoughnutChart");
var myDoughnutChart = new Chart(ctx3,{
type: 'doughnut',
data: data3,
});
//doughtnut diagram END----------------------------
},
pageAfterOut: function () {
// page has left the view
},
}
}
</script>