Highcharts Ordinal Issue - json

I am struggling to understand why I cannot get the ordinal aspect of my spline type chart to work correctly! I created a series of bar charts a long time ago but having not done anything like this in years I'm a tad clueless and needing some guidance, I've spent hours trying different methods and nothing works wether using Highcharts or highstock.
The code I have in the head of my page is as follows:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'spline'
},
title: {
text: theTitle,
x: -20
},
xAxis: {
ordinal: false,
type:'datetime',
labels: {formatter: function() {return Highcharts.dateFormat('%b %e (%y)', this.value);}}
},
series: []
}
$.getJSON("data_weight_loss.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
The dates are in datestamp format in my MySQL database as "2022-06-28 09:02:45" and despite trying all sorts I'm confused to how I can get the dates in my chart to add the dates in that don't already exist?
This image shows the chart on how it currently looks but has no relevance as the dates that are missing means the chart is not very helpful. It's been a long time since I used Highcharts and even did anything like this but as a personal project I'd love to get my chart working with the ordinal aspect in place. Is there anything glaringly obvious that I have done wrong?
The data for instance is like this if I look directly in the data call from the php page.
[{"name":"Date","data":[1651695362000,1652140800000,1652227200000,1652313600000,1652400000000,1652918400000,1653264000000,1654214400000,1654473600000,1654560000000,1654819200000,1655164800000,1655251200000,1655424000000,1655683200000,1656288000000]},{"name":"Weight","data":[2188,2000,1986,1962,1948,1868,1834,1744,1728,1720,1702,1682,1676,1666,1652,1622]}]
Any help would be appreciated, thank you.

Related

dataTable tableedit error, adding a new column while searching in jQuery

I'm developing a stock manager webapp for a company.
I have this page where the administrator can edit and delete products that they added in a table (dataTable), I managed to make this possible by using this tutorial:
https://www.webslesson.info/2017/05/live-table-data-edit-delete-using-tabledit-plugin-in-php.html
Everything works fine but I had this issue where the 2 edit and delete buttons weren't showed on other pages of my table except from the 1st, I managed to resolve this issue with attached code
Everything right now works fine but i have a huge graphic problem. While i'm searching, every time I tap a letter or a backspace, the last column as you can see from the attachment is cloning itself every time.
Error of multiple columns
I've already tried to debug the search method but I don't think it's related to that... it's a standard method.
Do you think it can possibly be a problem related to the fact that the last column with the 2 button (edit and delete) is automatically added with a js of the library extension I'm using and it's not hardcoded? so every time I redraw the table it is like an external element to redraw?
var table = $('#dataTable').DataTable();
// Document ready
$(function() {
editTable();
});
// Assuming "table" is the variable name of your datatable
table.on('draw', editTable);
function editTable() {
$('#dataTable').Tabledit({
url: 'updateDB.php',
columns: {
identifier: [0, "id"],
editable: [
[1, 'name'],
[4, 'quantity'],
[5, 'threshold'],
]
},
restoreButton: false,
onSuccess: function(data, textStatus, jqXHR) {
if (data.action == "delete") {
document.getElementById(data.id).remove();
}
}
});
};

Exclude a specific series from exporting to csv

I'm using HighCharts library to plot some data in gauge chart. My chart looks like the image below.
To achieve this plot, I'm using solid gauge and gauge together using series option, (solid gauge for the semicircular and gauge for the dial.)
...
series: [
{
name: 'solidgauge',
type: 'solidgauge',
data: [data.value],
...
},
{
name: 'gauge',
type: 'gauge',
data: [data.value],
...
},
]
...
Obviously the data for both series is identical, so when I export the chart into csv file, the library create two columns with same data and I want to change this behavior and export only one of series, but after a lots of search, I couldn't find any option in highcharts to exclude a specific series.
How can I do that? (I'm not familiar with exporting customization, answer with little code sample would be great for start creating my own.)
You can wrap the getCSV method and hide the series befere the proceed:
var H = Highcharts;
H.wrap(H.Chart.prototype, 'getCSV', function(proceed) {
var result;
this.series[1].hide();
result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
this.series[1].show();
return result;
});
Live demo: https://jsfiddle.net/BlackLabel/109a7vek/
Also, you can edit the generated data in the exportData event:
H.addEvent(H.Chart, 'exportData', function(e){
e.dataRows.forEach(function(el){
el.splice(2, 1);
});
});
Live demo: https://jsfiddle.net/BlackLabel/du7nz2hy/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Highcharts add series dynamically

I want to add some series (I get the series data from a webservice as a 3dim array (and returning it as json) - I dont know the number of series I will get, so I have to load the series data dynamically).
In javascript I am building an object: (like this highstock example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/compare/)
seriesOptions[i] = {
name: namearray[i],
data: dataarray
};
e.g. result: [Object { name="Series", data=[[1041375600000, 29,9]]}]
I was trying to add the series like this:
$.each(seriesOptions, function (itemNo, item) {
chart.addSeries({
name: item.name,
data: item.data
}, false);
});
chart.redraw();
But the chart draws the series kinda weird and doesnt convert to timestamp to date.
Are there any problems with my chart data from the webservice?
Here is my code: http://jsfiddle.net/DGdaf/2/
Thanks for any help so far.
EDIT
It seems like the chart ignoeres all the default values of timeline/zoom value.
I have no idea why it doesnt display these components.
The problem could be, that I am drawing the chart after the initialization?
chart = new Highcharts.Chart(options);
But I have to do it cause of the dynamic series loading.
EDIT2
I am not sure if I am loading too much data or something. I cant create my series dynamically.
for(i=0; i<seriesOptions.length; i++){
chart.addSeries({
name: seriesOptions[i].name,
data: seriesOptions[i].data
}, true);
};
Set for your yAxis:
yAxis: {
type: 'datetime'
}
See fiddle
EDIT:
Timeline / zoom
http://jsfiddle.net/DGdaf/5/
Edit:
Use callback to add series, when chart is ready. However, why don't you add these series when chart is created?
chart = new Highcharts.Chart(options, function(ch) {
$.each(seriesOptions, function (itemNo, item) {
ch.addSeries({
name: item.name,
data: item.data
}, false);
});
chart.redraw();
});

DOJO 1.8. FilteringSelect in DataGrid fed by FileItemReadStore is not working

I'm struggeling with DOJO 1.8 and Datagrid. I would like to put a filteringSelect into a Datagrid cell. The widget should be fed by a Store. The store is fed by an AJAX request and works find. Also the select widget shows up, but it is empty. There's neither a value nor an option to see in the browser:
The Code for the Store:
// AJAX REQUEST TO GET PROJECTS AND SAVE AS STORE
require(['dojo/request', 'dojo/data/ItemFileReadStore'], function(request, ItemFileReadStore){
request('project/json/getprojects', {
handleAs: 'json'
}).then(function(json){
var projectStore = new ItemFileReadStore({data: {'identifier':'id', 'label':'label', 'items': json}});
});
The JSON I retrieve looks like this:
[{"id":2,"name":"Bilder-App","customer":"Company A","label":"Company A >> Bilder-App"},{"id":8,"name":"Zeiterfassung","customer":"Company B","label":"Company B >> Zeiterfassung"}]
The goal is that the select-box shows the "label" field visually and saves "id" to the store/grid.
Here's the code of the grid_layout for the cell:
{field: "project_id", name: "Kunde/Projekt", type: dojox.grid.cells._Widget, widgetClass: dijit.form.Select, widgetProps: {store: projectStore, searchAttr: "label"} },
Is anyone able to help me with that?
MANY THANKS!
AFX
Here is the working formatter:
// PROJECT-ID FORMATTER
function formatProjectId(value, index){
var item = projectStore.get(value);
var label = item['label'];
return label;
}
However, there's one slight problem: Right when I selected the item in the select box it shows the id in the field. When I leave the field it gets formatted correctly.
Does anyone know how to solve this?
OK!
I was able to find a solution.
First of all, I changed to Memory-Store, since I figured out that the ItemFileReadStore wasn't working correctly.
I read somewhere, that you need to require the 'dijit/form/FilteringSelect' specifically. So I did that.
So my field in the layout variable looks like this:
{field: "project_id", name: "Kunde/Projekt", type: dojox.grid.cells._Widget, widgetClass: dijit.form.FilteringSelect, widgetProps: {searchAttr: "id", labelAttr: "label", store: projectStore}},
My Store has an array of data consisting of the fields 'id' and 'label'...so it gave the field those attributes! And BOOOOM...it works!
Now I have to add a formatter-function to format the displayed IDs onces they were edited.
Posting about this soon!
Have a good one,
AFX

Highcharts: Updating a Pie Chart with setData()

I am trying to work out how to update a Highcharts pie chart but for the life of me cannot seem to get it working right.
I have looked over the documentation and have been able to get a bar and line and spline graph to update fine but when using this function for pie charts it just does not work.
I am currently feeding in:
item.setData([["none", 100]], true);
Where item equals the series like so:
$.each(browser_chart.series, function(i, item){
if(item.name == 'Browser share'){
console.log(data.browsers);
item.setData([["none", 100]], true);
}
});
Which as shown in the demos is how the data for a pie chart is formatted. Problem is it cannot seem to read the series correctly. I try:
item.setData([\"none\", 100], true);
And it seems to do something but cannot read the x and y values right (which of course means it's wrong).
Can anyone here point me in the direction to get this working?
Thanks,
Edited:
When you set a new data you have to set as array of arrays for all pie parts in this case.
In my Example I have six categories, so I've to set data for all of them.
So, in this case you have to do something like:
var seriesData = [];
$.each(browser_chart.series, function(i, item) {
if(item.name == 'Browser share'){
seriesData.push(["serie"+i, someNumber]);
}
});
chart.series[0].setData(seriesData, true);
I have marked Ricardos answer however my question involved a tad more that I didn't explain properly.
I was updating the pie chart through AJAX from JSON generated by a PHP Backend. When I applied new data to the pie chart it would break.
Using Ricardos answer I was able to find out it is because I have a different number of points so I cannot just update the pie chart I must remake it like so:
browser_chart_config.series[0].data = data.browsers;
browser_chart = new Highcharts.Chart(browser_chart_config);
This will allow you to update a chart when you have a different number of points.
Hope it helps,
EDIT: I also found out that this is a known issue with HighCharts: https://github.com/highslide-software/highcharts.com/issues/542
//initialise
var new_data;
new_data = [{ name: 'load percentage', y: 10.0, color: '#b2c831' },{ name: 'rest', y: 60.0, color: '#3d3d3d' }];
function requestData()
{
$.ajax({
url: 'live-server-data.php',
success: function(point)
{
var series = chart.series[0];
var y_val = parseInt(point[1]);
var x_val = 100 - y_val;
console.log(point[0]+ "," +point[1] );//["0"]
new_data = [{ name: 'load percentage', y:y_val, color: '#b2c831' },{ name: 'rest', y:x_val, color: '#3d3d3d' }];
series.setData(new_data);
// call it again after one second
},
cache: false
});
}