the drill down for pie isnt working that well, can you please let me know what im missing?
i want to have a drill down bar chart however, i changed it to pie as its what i need but running into some issues - wondering if someone has done this before, and/ can help find issues with my code.
this is what it looks like right now, cant add legend or get rid of those x axis.
functionality is there but just want to make it work.
json.
{
"highLevelNumbers": [
1269,15,54624,827,42,20895,4856
],
"highLevel":
["Electrical Equipment",
"Enclosures",
"Instrument Equipment",
"Mechanical Equipment",
"Miscellaneous Equipment",
"Piping and Pipeline Equipment",
"Valve"],
"ElectricalEquipment":
[["earthing resistor",52],
["electric battery", 66],
["electric generator", 1],
["electrical control panel", 305],
["electrical isolator", 38],
["electrical switch", 43],
["electronic flow controller", 341],
["electronic level controller", 225],
["electronic pressure controller", 232],
["electronic temperature controller", 121]],
"Enclosures":
[["electrical control panel", 305],
["electrical isolator", 38],
["electrical switch", 43]],
"InstrumentEquipment":
[["electrical isolator", 38],
["electrical switch", 43],
["electronic flow controller", 341]],
"MechanicalEquipment":
[["earthing resistor",52],
["electrical control panel", 305]],
"MiscellaneousEquipment":
[["earthing resistor",52],
["electronic flow controller", 341]],
"PipingandPipelineEquipment":
[["earthing resistor",52],
["electronic flow controller", 341]],
"Valve":
[["earthing resistor",52],
["electrical switch", 43],
["electronic flow controller", 341]]
}
javascript:
function drilldownbar_Graph() {
//values from data_import
//fetch function
fetch("drilldown.json")
.then(function (u) {
return u.json();
})
.then(function (json) {
sketchingDrillDownGraph(json);
//calling and passing json to another function data_function
});
//start of function
function sketchingDrillDownGraph(data) {
//graph
var chartDom = document.getElementById("main6");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "Drill Down Category",
left: "center",
borderColor: "#796b94",
borderWidth: 0.1,
},
legend: {
show: true,
},
label: {
show: true,
},
toolbox: {
show: true,
feature: {
mark: { show: true },
restore: { show: true },
saveAsImage: { show: true },
},
},
xAxis: {
data: data.highLevel,
splitLine: {
show: false,
},
},
yAxis: {
splitLine: {
show: false,
},
},
dataGroupId: "",
animationDurationUpdate: 500,
series: {
type: "pie",
radius: ["35%", "65%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 9,
borderColor: "black",
borderWidth: 0.5,
},
id: "jafurah",
data: [
{
value: 5,
groupId: "electricalEquipment",
},
{
value: 2,
groupId: "Enclosures",
},
{
value: 4,
groupId: "InstrumentEquipment",
},
{
value: 4,
groupId: "MechanicalEquipment",
},
{
value: 4,
groupId: "MiscellaneousEquipment",
},
{
value: 4,
groupId: "PipingandPipelineEquipment",
},
{
value: 5,
groupId: "Valve",
},
],
universalTransition: {
enabled: true,
divideShape: "clone",
},
},
};
const drilldownData = [
{
dataGroupId: "electricalEquipment",
data: data.electricalEquipment,
},
{
dataGroupId: "Enclosures",
data: data.Enclosures,
},
{
dataGroupId: "InstrumentEquipment",
data: data.InstrumentEquipment,
},
{
dataGroupId: "MechanicalEquipment",
data: data.MechanicalEquipment,
},
{
dataGroupId: "MiscellaneousEquipment",
data: data.MiscellaneousEquipment,
},
{
dataGroupId: "PipingandPipelineEquipment",
data: data.PipingandPipelineEquipment,
},
{
dataGroupId: "Valve",
data: data.Valve,
},
];
myChart.on("click", function (event) {
if (event.data) {
var subData = drilldownData.find(function (data) {
return data.dataGroupId === event.data.groupId;
});
if (!subData) {
return;
}
myChart.setOption({
xAxis: {
data: subData.data.map(function (item) {
return item[0];
}),
},
series: {
type: "pie",
id: "jafurah",
dataGroupId: subData.dataGroupId,
data: subData.data.map(function (item) {
return item[1];
}),
universalTransition: {
enabled: true,
divideShape: "clone",
},
},
graphic: [
{
type: "text",
left: 50,
top: 20,
style: {
text: "Back",
fontSize: 18,
},
onclick: function () {
myChart.setOption(option);
},
},
],
});
}
});
option && myChart.setOption(option);
// getting the data [docs total by day]
}
}
To get rid of xAxis : just remove it in the chart options. (Both xAxis and yAxis actually, no need of that in a pie chart)
To display the legend, you have to set a name to each series.
series : {
data: [
{
value: 5,
groupId: "electricalEquipment",
name: "electricalEquipment", // add this line to each series data
},
...
]
}
Here is the full working code (note that I hardcoded the values instead of using your json file to make it easier for me).
I added a param (notMerge=true) in this method : myChart.setOption(option, true); (in the click event function) so that the "Back" button disappears when it cannot be used.
Related
I want to have REST operations on child object of a parent object on Ext Grid. I need to use rowExpander not rowWidget since I am using modern toolkit.
Here is my sample JSON data from my API:
{
"pagination": {
"page": 1,
"limit": 20,
"total": 1,
"hasPreviousPage": false,
"hasNextPage": false
},
"data": [
{
"id": 2,
"customer": "Mark",
"dateRented": "2021-02-09T21:18:40.667",
"movieRentals": [
{
"id": 5,
"rentalDetailDtoId": 2,
"movie": "Shingeki no Kyojin",
"dateReturned": null
},
{
"id": 6,
"rentalDetailDtoId": 2,
"movie": "Insidous 2",
"dateReturned": null
}
]
},
{
"id": 1,
"customer": "Samuel",
"dateRented": "2021-02-09T21:17:18.403",
"movieRentals": [
{
"id": 3,
"rentalDetailDtoId": 1,
"movie": "Home Alone",
"dateReturned": null
},
{
"id": 4,
"rentalDetailDtoId": 1,
"movie": "Neighbors",
"dateReturned": null
}
]
}
]
}
I would like to display it per Customer and I have a REST action of POST on the movieRentals object. I would like to use RowExpander but I am not sure how to make it work.
Here is my current ExtJS Grid code:
Ext.define('Vidly.view.rental.DisplayRentalsView', {
extend: 'Ext.grid.Grid',
xtype: 'displayrentalsview',
reference: 'rentallist',
title: 'Rental List',
controller: 'displayrentalsviewcontroller',
viewModel: 'rentalsviewmodel',
reference:'displayrentalsviewgrid',
selType: 'rowmodel',
selModel:
{
mode: 'SINGLE'
},
viewConfig:
{
stripeRows: true
},
listeners: {
selectionchange: 'onSelectionChange',
show: 'onShow',
},
bind: {
store: '{RentalListStore}'
},
itemConfig: {
viewModel: true
},
plugins: {
pagingtoolbar: true
},
items: [
{
xtype: 'container',
docked: 'top',
items: [
{
docked: 'left',
xtype: 'button',
ui: 'decline',
itemId: 'returnRental',
text: 'Return Rental',
reference: 'btnReturnRental',
handler: 'onReturnClick',
disabled: true,
}
]
},
],
columns: [
{
text: "Customer",
flex: 1,
dataIndex: 'customer',
editor:
{
allowBlank: false
},
},
{
text: "Movie",
flex: 1,
dataIndex: 'movieRental',
editor:
{
allowBlank: false
},
},
{
text: "Date Rented",
flex: 1,
dataIndex: 'dateRented',
editor:
{
allowBlank: false
},
renderer: function (value, metaData, record) {
if (value != null && value != "") {
var dateRented = new Date(Date.parse(value))
return Ext.Date.format(dateRented, 'm/d/Y')
}
else {
return "";
}
}
},
{
text: "Date Returned",
flex: 1,
dataIndex: 'dateReturned',
editor:
{
allowBlank: false
},
renderer: function (value, metaData, record) {
if (value != null && value != "") {
var dateRented = new Date(Date.parse(value))
return Ext.Date.format(dateRented, 'm/d/Y')
}
else {
return "";
}
}
}
],
});
Its always good to provide an fiddle when your asking something in ExtJs
I Provided a fiddle here, I hope this helps you along
https://fiddle.sencha.com/#view/editor&fiddle/3bpk
Ext.application({
name: 'Fiddle',
launch: function () {
const store = Ext.create('Ext.data.Store', {
data: [{
"id": 2,
"customer": "Mark",
"dateRented": "2021-02-09T21:18:40.667",
"movieRentals": [{
"id": 5,
"rentalDetailDtoId": 2,
"movie": "Shingeki no Kyojin",
"dateReturned": null
}, {
"id": 6,
"rentalDetailDtoId": 2,
"movie": "Insidous 2",
"dateReturned": null
}]
}, {
"id": 1,
"customer": "Samuel",
"dateRented": "2021-02-09T21:17:18.403",
"movieRentals": [{
"id": 3,
"rentalDetailDtoId": 1,
"movie": "Home Alone",
"dateReturned": null
}, {
"id": 4,
"rentalDetailDtoId": 1,
"movie": "Neighbors",
"dateReturned": null
}]
}]
});
Ext.create('Ext.grid.Grid', {
store: store,
plugins: {
rowexpander: true
},
height: 500,
width: '100%',
itemConfig: {
body: {
tpl: '<ul>' +
'<tpl foreach="movieRentals">' +
'<li>Movie: {movie}</li>' +
'</tpl>' +
'</ul>'
}
},
columns: [{
text: 'Name',
dataIndex: 'customer',
width: 200
}, {
text: 'dateRented',
dataIndex: 'dateRented',
width: 250
}],
layout: 'fit',
fullscreen: true
});
}
});
and by the way, move those renderers into your viewController. Duplicate code is always ugly :-)
Ok, you should take a deeper look at the https://docs.sencha.com/extjs/7.3.1/modern/Ext.grid.Row.html#events
itemConfig: {
body: {
tpl: '<p>Hello World</p>',
listeners: {
beforeshow: sender => {
console.log(sender);
// Here you can tell your record to fetch data
}
}
}
}
feel free to play arround with the fiddle
https://fiddle.sencha.com/#fiddle/3bq5&view/editor
I'm writing a frontend with Angular 9 that demonstrating exchange rates ratio dynamically. And I'm using a line chart. Line chart's and auto-refreshing is working totally fine. But my chart has a weird bug. I couldn't find any problem looks like mine. I'll write my chart options and screenshots of the weird line.
chart's picture
The gap between the 2 data occurred because the server was closed.
Updated Picture
I figured out that this weird line showing when I gave the xAxes' type as 'time'. I hope you understand my problem.
Chart's options:
lineChartOptions = {
animation: {
duration: 0,
},
responsive: true,
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: false,
},
legend: {
labels: {
fontColor: 'white',
fontSize: 18,
fontFamily: 'Sawarabi Mincho',
},
},
scales: {
xAxes: [
{
type: 'time',
ticks: {
autoSkip: false,
maxTicksLimit: 7,
source: 'auto',
beginAtZero: true,
},
time: {
parser: 'HH',
unit: 'minute',
},
displayFormats: {
hour: 'h:mm a',
},
distribution: 'linear',
},
],
},
};
Also, this is the function that I'm sending data of chart Label
//Defining variables
chartData: any = [];
sells: Array<number> = [];
dates: Array<any> = [];
sendDatasToChart() {
this.currencyService
.getMyData()
.subscribe((data) => (this.chartData = data));
for (let i of this.chartData) {
this.sells.push(i['sell']);
const date = new Date(i['date']);
const momentDate = moment(date.toISOString());
this.dates.push(momentDate);
}
this.lineChartData = [
{
data: this.sells,
label: 'USD/TRY Currency Chart',
pointRadius: 0,
},
];
this.lineChartLabels = this.dates;
this.sells = [];
this.dates = [];
this.chartData = [];
}
This is a little part of the API's response that I'm sending to chart:
{
"success": true,
"data": [
{
"_id": "5eea3c070a60764b08475e88",
"dollar": {
"buy": "6,8526",
"sell": "6,8567",
"update": "18:45"
},
"euro": {
"buy": "7,6832",
"sell": "7,6911",
"update": "18:45"
},
"gbp": {
"buy": "8,5824",
"sell": "8,5917",
"update": "18:45"
},
"createdAt": "2020-06-17T15:51:35.226Z",
"__v": 0
},
{
"_id": "5eea3f8b0a60764b08475e89",
"dollar": {
"buy": "6,8528",
"sell": "6,8570",
"update": "19:00"
},
"euro": {
"buy": "7,6898",
"sell": "7,6957",
"update": "19:00"
},
"gbp": {
"buy": "8,5833",
"sell": "8,5900",
"update": "19:00"
},
"createdAt": "2020-06-17T16:06:35.275Z",
"__v": 0
}
}
Also, this is the Angular service that I'm receiving data:
updateChart(){
return this.http
.get(this.path + "/chart-data").subscribe(
(response) => {
for (let i of response['data']) {
this.chartData.push({
sell: Number(i['dollar']['sell'].replace(/,/, '.')),
date: i['createdAt']
})
}
this.myData.next(this.chartData)}
)
}
I am trying to show VIZ chart from SAPUI5 but unable to bind data received from model. It throws [50017] - Invalid data binding error. I am posting my code below please have a look at it and help me find the causs.
var assignedContentData = {
"AssignedContentData": [{
"description": "Capital",
"newsletter": 2,
"press_release": 12,
"letter": 1,
"notice": 0,
"bulletin_memorandum": 0
}, {
"description": "NA",
"newsletter": 0,
"press_release": 0,
"letter": 0,
"notice": 1,
"bulletin_memorandum": 0
}, {
"description": "Equity",
"newsletter": 0,
"press_release": 4,
"letter": 0,
"notice": 5,
"bulletin_memorandum": 12
}]
};
var oAssignContentModel = new sap.ui.model.json.JSONModel({
data: assignedContentData
});
sap.ui.getCore().setModel(oAssignContentModel, "oAssignContentModel");
var assignedContentBarChart = new sap.viz.ui5.controls.VizFrame("assignedContentBarChart", {
vizType: "stacked_column"
});
var oDatasetAssignedContentBar = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Description",
value: "{description}"
}],
measures: [{
name: "Newsletter",
value: "{newsletter}"
}],
data: {
path: "/data/AssignedContentData"
}
});
var feedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Newsletter"]
});
var feedCategoryAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Description"]
});
var feedColorAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["Newsletter", "Press_Release", "Letter", "Notice", "Bulletin_memorandum"]
});
assignedContentBarChart.setVizProperties({
plotArea: {
dataLabel: {
visible: true,
formatString: "#,##0"
}
},
legend: {
title: {
visible: false
}
},
title: {
visible: true,
text: 'Bar Chart'
}
});
assignedContentBarChart.setDataset(oDatasetAssignedContentBar);
assignedContentBarChart.addFeed(feedValueAxis1);
assignedContentBarChart.addFeed(feedCategoryAxis1);
Your binding is incorrect. As your model name is oAssignContentModel, it must be reflected in the binding as well in the data property assignment:
var oDatasetAssignedContentBar = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Description",
value: "{description}"
}],
measures: [{
name: "Newsletter",
value: "{newsletter}"
}],
data: {
path: "oAssignContentModel>/data/AssignedContentData"
}
});
Or you can remove the name from the model, and you can leave the data binding as it is now:
sap.ui.getCore().setModel(oAssignContentModel);
I'm trying to put two Rally charts inside a container to have a control over their layout. Unfortunately, for some reason, it doesn't work.
Plase see the code (the full HTML provided for convinience):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
_atTheStartAddedChart: null,
_stateChart: null,
launch: function () {
//Write app code here
var me = this;
me._createAtTheStartAddedChart();
me._createStateChart();
console.log('chart 1', me._atTheStartAddedChart);
console.log('chart 2', me._stateChart);
me._chartContainer = Ext.create('Ext.Container', {
itemId: 'cont',
renderTo: Ext.getBody(),
layout: {
type: 'hbox',
align: 'middle'
}
,
items: [
me._atTheStartAddedChart,
me._stateChart
]
});
me.add(me._chartContainer);
},
_createAtTheStartAddedChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'At the Start',
y: 20,
color: '#0CDBE8'
},
{
name: 'Added During Release',
y: 30,
color: '#FFE11A'
}
]
}
];
var chart = me._createChart(series);
me._atTheStartAddedChart = chart;
},
_createStateChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'Not Completed in Time',
y: 10,
color: '#FFE11A'
},
{
name: 'Completed in Time',
y: 15,
color: '#98C000'
},
{
name: 'Removed from Release',
y: 20,
color: '#EA2E49'
},
{
name: 'Completely Removed',
y: 5,
color: '#3D4C53'
}
]
}
];
var chart = me._createChart(series);
me._stateChart = chart;
},
_createChart: function (series) {
var chart = Ext.create('Rally.ui.chart.Chart', {
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Release Features'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
}
},
chartData: {
series: series
}
});
return chart;
}
});
Rally.launchApp('CustomApp', {
name:"Random App Name42726",
parentRepos:""
});
});
</script>
</head>
<body>
</body>
</html>
The charts are created successfully, but they are not displayed at all. There is no error related to their display, so I don't even know where to look for the issue.
Maybe someone knows how to put the charts horizontally (I don't really need Ext.Container here, any other container will be fine as well)?
There is also an error Uncaught Highcharts error #16: www.highcharts.com/errors/16 (Highcharts already defined in the page), not sure what's the reason for it as well.
I made those charts display - you may see full app and the screenshot showing both pie charts in this repo.
Here is the js file. The main change was where in the code the chart was added to container. I moved that to _createChart function. Highchart error 16 does not prevent the charts from loading. You may eventually create two containers and add the charts to separate containers, but this works in its simplest form:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
_atTheStartAddedChart: null,
_stateChart: null,
items: [
{
xtype: 'container',
itemId: 'mychart',
columnWidth: 1
}
],
launch: function() {
this._createAtTheStartAddedChart();
this._createStateChart();
},
_createAtTheStartAddedChart: function () {
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'At the Start',
y: 20,
color: '#0CDBE8'
},
{
name: 'Added During Release',
y: 30,
color: '#FFE11A'
}
]
}
];
this._createChart(series);
},
_createStateChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'Not Completed in Time',
y: 10,
color: '#FFE11A'
},
{
name: 'Completed in Time',
y: 15,
color: '#98C000'
},
{
name: 'Removed from Release',
y: 20,
color: '#EA2E49'
},
{
name: 'Completely Removed',
y: 5,
color: '#3D4C53'
}
]
}
];
this._createChart(series);
},
_createChart: function (series) {
var chartDiv = this.down("#mychart");
chartDiv.add({
xtype: 'rallychart',
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Release Features'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
}
},
chartData: {
series: series
}
});
}
});
i get my JSON object from my php code in this format (JSONlint ok) :
[
[1375653600000,3.20104,175.00,116.00,11.00,31.00],[...],[1376776800000,2.85625,10.00,1.00,0.00,8.00]
]
i Have to split in 5 different series:
[1375653600000, 3.201014]
[1375653600000, 175.00]
[1375653600000, 116.00]
[1375653600000, 11.00]
[1375653600000, 31.00]
...
and (obviously) each array is for a different highcharts series.
i follow this post to get an idea about split the JSON:
Retrieving JSON data for Highcharts with multiple series?
This is my code:
$(function() {
// See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
$.getJSON('grafico_nuovo.php?callback=?', function(data) {
// Add a null value for the end date
data = [].concat(data, [[Date.UTC(2012, 9, 14, 19, 59), null, null, null, null]]);
// create the chart
$('#container').highcharts('StockChart', {
chart : {
type: 'spline',
zoomType: 'xy'
},
navigator : {
adaptToUpdatedData: false,
series : {
data : data
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'analisi consumi e temperature'
},
subtitle: {
text: 'Analisi test solo temperatura media'
},
rangeSelector : {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'week',
count: 1,
text: '1w'
},{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
selected : 2 // day
},
/*xAxis : {
events : {
afterSetExtremes : afterSetExtremes
},
minRange: 3600 * 1000 // one hour
},*/
xAxis: {
events : {
afterSetExtremes : afterSetExtremes
},
minRange: 3600 * 1000, // one hour
type: 'datetime',
dateTimeLabelFormats: { minute: '%H:%M', day: '%A. %e/%m' },
// minRange: 15*60*1000,
//maxZoom: 48 * 3600 * 1000,
labels: {
rotation: 330,
y:20,
staggerLines: 1 }
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Consumo',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} Kw',
style: {
color: '#4572A7'
}
},
opposite: true
}],
series: [{
name: 'val1',
data: []
}, {
name: 'val2',
data: []
},
{
name: 'val3',
data: []
},
{
name: 'val4',
data: []
},
{
name: 'val5',
data: []
}]
});
});
});
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var currentExtremes = this.getExtremes(),
range = e.max - e.min,
chart = $('#container').highcharts();
chart.showLoading('Loading data from server...');
$.getJSON('grafico_nuovo.php?start='+ Math.round(e.min) +
'&end='+ Math.round(e.max) +'&callback=?', function(data) {
val1 = [];
val2 = [];
val3 = [];
val4 = [];
val5 = [];
$.each(data, function(key,value) {
val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
val3.push([value[0], value[3]]);
val4.push([value[0], value[4]]);
val5.push([value[0], value[5]]);
});
console.log('val1');
chart.series[0].setData(val1);
chart.series[1].setData(val2);
chart.series[2].setData(val3);
chart.series[3].setData(val4);
chart.series[4].setData(val5);
chart.hideLoading();
});
}
The navigator works fine (with little trouble after 3-4 clicks) but the other series doesn't show.
Everything should be ok, but i've probably missed something