Olá a todos,
Tenho uma nova dúvida, e agora é com os charts e em várias tabs.
Consegui na minha primeira tab, mostrar gráficos que vêem do Chartjs.org e até lá tudo bem como mostra a print:
http://prntscr.com/6budad
Agora pus no outro lado outro chart (um linear chart) e usei o mesmo esquema recorrendo apenas a documentação (porque agora os dados não são importantes) e ele basicamente não mostra. Acho que já não é erro dos id's que ponho, acho que é mesmo problema das tabs.
Tentei fazer um id na tab, e quando tivesse uma certa class (no meu caso a class .tab-current) destrui o gráfico e refazia-o (isto em javascript) mas também não resultou.
As tabs que usei foram estas: http://tympanus.net/Blueprints/FullWidthTabs/
charts: http://www.chartjs.org/
Código (HTML):
Código (Javascript):
Tenho uma nova dúvida, e agora é com os charts e em várias tabs.
Consegui na minha primeira tab, mostrar gráficos que vêem do Chartjs.org e até lá tudo bem como mostra a print:
http://prntscr.com/6budad
Agora pus no outro lado outro chart (um linear chart) e usei o mesmo esquema recorrendo apenas a documentação (porque agora os dados não são importantes) e ele basicamente não mostra. Acho que já não é erro dos id's que ponho, acho que é mesmo problema das tabs.
Tentei fazer um id na tab, e quando tivesse uma certa class (no meu caso a class .tab-current) destrui o gráfico e refazia-o (isto em javascript) mas também não resultou.
As tabs que usei foram estas: http://tympanus.net/Blueprints/FullWidthTabs/
charts: http://www.chartjs.org/
Código (HTML):
<div id="tabs" class="tabs">
<nav>
<ul>
<li><a href="#daily"><i class="fa fa-bar-chart"></i><span>Daily Share</span></a></li>
<li><a href="#rating"><i class="fa fa-bar-chart"></i><span>Rating Curves</span></a></li>
<li><a href="#section-3"><i class="fa fa-bar-chart"></i><span>Top Programs</span></a></li>
<li><a href="#section-4"><i class="fa fa-bar-chart"></i><span>Top Breaks</span></a></li>
</ul>
</nav>
<div class="content">
<section id="daily">
<div class="text-center" id="barchart">
<canvas id="income" class="income"></canvas>
</div>
<div class="text-center" id="piechart">
<canvas id="income1" class="income"></canvas>
</div>
</section>
<section id="rating">
<div class="text-center" id="linechart">
<canvas class="chartReal" id="chartReal"></canvas>
</div>
</section>
</div>
<nav>
<ul>
<li><a href="#daily"><i class="fa fa-bar-chart"></i><span>Daily Share</span></a></li>
<li><a href="#rating"><i class="fa fa-bar-chart"></i><span>Rating Curves</span></a></li>
<li><a href="#section-3"><i class="fa fa-bar-chart"></i><span>Top Programs</span></a></li>
<li><a href="#section-4"><i class="fa fa-bar-chart"></i><span>Top Breaks</span></a></li>
</ul>
</nav>
<div class="content">
<section id="daily">
<div class="text-center" id="barchart">
<canvas id="income" class="income"></canvas>
</div>
<div class="text-center" id="piechart">
<canvas id="income1" class="income"></canvas>
</div>
</section>
<section id="rating">
<div class="text-center" id="linechart">
<canvas class="chartReal" id="chartReal"></canvas>
</div>
</section>
</div>
Código (Javascript):
var BarOption = {
responsive: true,
tooltipTitleFontFamily: "Lato, sans-serif",
maintainAspectRatio: true
}
var BarData = {
labels: ["RTP1", "RTP2", "SIC", "TVI", "Hollywood", "Sic Notícias", "RTP Informação", "AXN", "TVI24", "CMTV", "TVCabo"],
datasets: [
{
label: "Rat%",
fillColor: "rgba(135,155,155,0.5)",
data: [3.3, 0.3, 3.3, 5.0, 0.5, 0.6, 0.3, 0.3, 0.3, 0.3, 6.2]
},
]
};
var income = document.getElementById("income").getContext("2d");
var Barchart = new Chart(income).Bar(BarData, BarOption);
var PieOption = {
responsive: true,
maintainAspectRatio: true,
tooltipTitleFontFamily: "Lato, sans-serif"
}
var PieData = [
{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
]
var income1 = document.getElementById("income1").getContext("2d");
var Piechart = new Chart(income1).Pie(PieData, PieOption);
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}
]
}
var income2 = document.getElementById("chartReal").getContext("2d");
var linechart = new Chart(income2).Line(lineChartData, { responsive: true });
responsive: true,
tooltipTitleFontFamily: "Lato, sans-serif",
maintainAspectRatio: true
}
var BarData = {
labels: ["RTP1", "RTP2", "SIC", "TVI", "Hollywood", "Sic Notícias", "RTP Informação", "AXN", "TVI24", "CMTV", "TVCabo"],
datasets: [
{
label: "Rat%",
fillColor: "rgba(135,155,155,0.5)",
data: [3.3, 0.3, 3.3, 5.0, 0.5, 0.6, 0.3, 0.3, 0.3, 0.3, 6.2]
},
]
};
var income = document.getElementById("income").getContext("2d");
var Barchart = new Chart(income).Bar(BarData, BarOption);
var PieOption = {
responsive: true,
maintainAspectRatio: true,
tooltipTitleFontFamily: "Lato, sans-serif"
}
var PieData = [
{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
]
var income1 = document.getElementById("income1").getContext("2d");
var Piechart = new Chart(income1).Pie(PieData, PieOption);
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}
]
}
var income2 = document.getElementById("chartReal").getContext("2d");
var linechart = new Chart(income2).Line(lineChartData, { responsive: true });