Dynamically add data to series in Highcharts

Dynamically add data to series in Highcharts - javascript

I´m trying to update my highchart serie appending new data.
My series look like:
series: [{
name: 'Serie1',
data:[
{
x: 0,
low: Date.UTC(2013, 07, 03, 0, 00, 00),
high: Date.UTC(2013, 07, 03, 4, 0, 0),
cliente:[{nombre:'Pepe',
Partida:'11111',
Bandejas:'35'},
{nombre:'Pepe1',
Partida:'222',
Bandejas:'50'}]
},
{
x: 0,
low: Date.UTC(2013, 07, 03, 5, 0, 0),
high: Date.UTC(2013, 07, 03, 9, 0, 0)
},
{
x: 0,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
}
]
},
{
name: 'Serie2',
data:[
{
x: 2,
low: Date.UTC(2013, 07, 03, 4, 0, 0),
high: Date.UTC(2013, 07, 03, 10, 0, 0)
},
{
x: 2,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
},
{
x: 2,
low: Date.UTC(2013, 07, 03, 0, 0, 0),
high: Date.UTC(2013, 07, 03, 2, 0, 0)
},
{
x: 2,
low: Date.UTC(2013, 07, 03, 11, 0, 0),
high: Date.UTC(2013, 07, 03, 18, 0, 0)
}
]
}
]
When I click a button I want to append new data inside "Serie 1".
I´ve tried chart.series[pos].setData(newdata); and it works, but delete all the previous data.
I´ve also tried using chart.series[pos-1].data.push(newdata); but it doesn´t work.
Any solution?

You can use addPoint function which allows to add new data.

Related

How do I filter an array of arrays using an array?

How do I filter an array of arrays (myNumbers) against an array (result) to get only the values that appear in result per each array in myNumbers?
Specifically, given:
var result = [02, 03, 04, 06, 07, 11, 12, 13];
var myNumbers = [
[01, 03, 04, 05, 09, 10, 12, 14],
[01, 03, 04, 05, 06, 08, 10, 12],
[01, 02, 04, 05, 06, 08, 10, 12],
[01, 03, 04, 05, 06, 09, 12, 13],
[01, 02, 03, 05, 06, 08, 10, 11]
];
Output should be:
[
[03, 04, 12],
[03, 04, 06, 12],
[02, 04, 06, 12],
[03, 04, 06, 12, 13],
[02, 03, 06, 11],
]
I'm only able to filter one array at a time:
// This only filters it for myNumbers[0]
var confereResult = result.filter(function (number) {
if (myNumbers[0].indexOf(number) == -1)
return number;
console.log(number);
});
How do I go through the whole list instead?

You could map the result of the filtering.
var filter = [02, 03, 04, 06, 07, 11, 12, 13],
array = [[01, 03, 04, 05, 09, 10, 12, 14], [01, 03, 04, 05, 06, 08, 10, 12], [01, 02, 04, 05, 06, 08, 10, 12], [01, 03, 04, 05, 06, 09, 12, 13], [01, 02, 03, 05, 06, 08, 10, 11]],
result = array.map(a => filter.filter(f => a.includes(f)));
console.log(result.map(a => a.join(' ')));
.as-console-wrapper { max-height: 100% !important; top: 0; }

Iterate throught the myNumbers array and apply a filter to each row.
var result = [02, 03, 04, 06, 07, 11, 12, 13];
var myNumbers = [
[01, 03, 04, 05, 09, 10, 12, 14],
[01, 03, 04, 05, 06, 08, 10, 12],
[01, 02, 04, 05, 06, 08, 10, 12],
[01, 03, 04, 05, 06, 09, 12, 13],
[01, 02, 03, 05, 06, 08, 10, 11]
];
myNumbers.forEach((arr, i) => {
myNumbers[i] = arr.filter((val) => {
return result.indexOf(val) != -1;
});
});
console.log(myNumbers);

You can loop on myNumbers and push result into an array, like
var result = [02, 03, 04, 06, 07, 11, 12, 13];
var myNumbers = [
[01, 03, 04, 05, 09, 10, 12, 14],
[01, 03, 04, 05, 06, 08, 10, 12],
[01, 02, 04, 05, 06, 08, 10, 12],
[01, 03, 04, 05, 06, 09, 12, 13],
[01, 02, 03, 05, 06, 08, 10, 11]
];
var confereResult = []
myNumbers.forEach(function (val) {
confereResult.push(result.filter(function (number) {
if (val.indexOf(number) == -1)
return number;
}));
})
console.log(confereResult)

How to correctly use datetime data on the continuous axis of a Google Chart?

So as seen in the code snippet below, I'm just trying to create a chart/control combination dashboard via Google Charts and I'm having some difficulties with datetime fields, despite following the reference material on that.
My areas of confusion are as follows:
1. Why do the dates shown on the chart appear to be off by one month? I've entered dates for August & September, yet September & October are showing up on the chart.
2. Why does the chart displayed for the ChartRangeFilter appear to jump back to older dates (around the October 2 mark)?
google.charts.load('current', {
packages: ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
[{
"type": "datetime",
"label": "date"
}, {
"type": "number",
"label": "presence"
}],
["Date(2017, 08, 29, 12, 17, 25)", 1],
["Date(2017, 08, 29, 15, 06, 39)", 0],
["Date(2017, 08, 29, 17, 28, 27)", 1],
["Date(2017, 08, 30, 09, 14, 33)", 0],
["Date(2017, 08, 30, 13, 17, 28)", 1],
["Date(2017, 08, 30, 14, 03, 52)", 0],
["Date(2017, 08, 30, 17, 31, 12)", 1],
["Date(2017, 08, 30, 22, 14, 45)", 0],
["Date(2017, 08, 30, 22, 15, 48)", 1],
["Date(2017, 08, 31, 08, 41, 30)", 0],
["Date(2017, 08, 31, 13, 22, 06)", 1],
["Date(2017, 08, 31, 13, 33, 33)", 0],
["Date(2017, 08, 31, 15, 23, 41)", 1],
["Date(2017, 08, 31, 15, 48, 11)", 0],
["Date(2017, 08, 31, 22, 15, 45)", 1],
["Date(2017, 09, 01, 09, 18, 40)", 0],
["Date(2017, 09, 01, 19, 29, 50)", 1],
["Date(2017, 09, 02, 11, 24, 07)", 0],
["Date(2017, 09, 02, 14, 13, 04)", 1],
["Date(2017, 09, 03, 09, 48, 48)", 0],
["Date(2017, 09, 03, 13, 27, 42)", 1],
["Date(2017, 09, 03, 13, 51, 46)", 0],
["Date(2017, 09, 03, 15, 44, 59)", 1],
["Date(2017, 09, 04, 10, 02, 20)", 0]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var chart_options = {
"legend": { "position": "none" },
"vAxis": {
"ticks": [{
"f": "Not Present",
"v": 0
}, {
"f": "Present",
"v": 1
}],
"maxValue": 1,
"minValue": 0
},
"title": "Chart"
};
var chart = new google.visualization.ChartWrapper({
'chartType': 'SteppedAreaChart',
'containerId': 'chart',
'options': chart_options
});
var control_options = {
"filterColumnLabel": "date"
};
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': control_options,
});
dashboard.bind(control, chart);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart" style="width: 100%; height: 100%"></div>
<div id="control" style="width: 100%; height: 100%"></div>
</div>

How to process a list of complex data structures

In High Charts i have an array as follows,
But if i try to set extremes of the chart by returning the Highest value of the Array, its showing NaN Error.
function aoDashboardData() {
var data = [
{ type: "",
data: [{
x: 0.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 0.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 0.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 0.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 0.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 0.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 1.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 1.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 1.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 1.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 1.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 1.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 2.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 2.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 2.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 2.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 2.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 2.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 3.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 3.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 3.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 3.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 3.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 3.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 4.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 4.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 4.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 1.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 4.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 4.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
,
{
type: "",
data: [{
x: 5.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 5.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 5.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 5.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 5.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 5.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
,
{
type: "",
data: [{
x: 6.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 6.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 6.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 6.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 6.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 6.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
,
{
type: "",
data: [{
x: 7.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 7.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 7.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 1.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 7.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 7.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
]
return data;
}
The code i tried to get the maximum value is :
MinAssortmentValue = Math.min.apply(Math, chartlength);
Here is the updated jsFiddle link : http://jsfiddle.net/sarav4gs/jbmk9tb1/3/
Can Anyone help me to fix it? Thanks in advance!!

... referring to this comment of mine - How to process a list of complex data structures - the sketched approach might look like that, even though I still do not really know what are the object properties of a chart item you are going to compare and/or extract ...
var
chart = $('#ao-projectssummry-chart').highcharts(),
minMaxValues = chart.series.reduce(function (collector, item, idx/*, list*/) {
var
dataMin = item.dataMin,
dataMax = item.dataMax,
minValue = Math.min(collector.minValue, dataMin),
maxValue = Math.max(collector.maxValue, dataMax);
if (minValue == dataMin) {
collector.minValue = dataMin;
collector.minValueItemIndex = idx;
}
if (maxValue == dataMax) {
collector.maxValue = dataMax;
collector.maxValueItemIndex = idx;
}
return collector;
}, {
minValue: Number.POSITIVE_INFINITY,
maxValue: Number.NEGATIVE_INFINITY,
minValueItemIndex: -1,
maxValueItemIndex: -1
}),
minAssortmentValue = minMaxValues.minValue,
maxAssortmentValue = minMaxValues.maxValue;
console.log("minMaxValues : ", minMaxValues);
console.log("minAssortmentValue, maxAssortmentValue : ", minAssortmentValue, maxAssortmentValue);
Pasting the just provided code snipped into the console of your provided fiddle does cause the following output:
minMaxValues : Object {
minValue: 1458000000000,
maxValue: 1485820800000,
minValueItemIndex: 9,
maxValueItemIndex: 14
}
minAssortmentValue, maxAssortmentValue : 1458000000000 1485820800000

Highcharts - Data won't get loaded into chart on Android WebView

The configuration has been pre-tested on Fiddler and it's all working, but somehow it stopped working when i implemented it in Android's webview.
In my web interface class, I have a method which returns the data, and so I called the method in the HTML file in the script section as follow
var glucose = Android.getGlucoseData();
The debug console shows the following output of the glucose var (please don't mind the fake data)
[
[Date.UTC(2016, 4, 02, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 03, 00,
00 ,00), 0.0],[Date.UTC(2016, 4, 04, 00, 00 ,00), 0.0],[Date.UTC(2016,
4, 05, 19, 16, 00), 8.65999984741211],[Date.UTC(2016, 4, 06, 16, 55,
00), 9.65999984741211],[Date.UTC(2016, 4, 06, 17, 19, 00),
3.6600000858306885],[Date.UTC(2016, 4, 06, 17, 30, 00), 9.65999984741211],[Date.UTC(2016, 4, 07, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 08, 00, 00 ,00), 0.0]
]
And when I passed it into the chart
series: [{
name: 'Glucose',
data: glucose,
marker: {
enabled: true
},
tooltip: {
valueSuffix: ' mmol/L'
}
}...
It does not render the data at all. HOWEVER if i do the following, which is essentially the same as the above, it WORKS.
var glucose = [
[Date.UTC(2016, 4, 02, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 03, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 04, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 05, 19, 16, 00), 8.65999984741211],[Date.UTC(2016, 4, 06, 16, 55, 00), 9.65999984741211],[Date.UTC(2016, 4, 06, 17, 19, 00), 3.6600000858306885],[Date.UTC(2016, 4, 06, 17, 30, 00), 9.65999984741211],[Date.UTC(2016, 4, 07, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 08, 00, 00 ,00), 0.0]
]
From the above, you can realise i'm just literally hardcoding the data produced by Android.getGlucoseData(); into the variable.
May I know what did I do wrong?

The issue can be caused by using Date.UTC() in JSON, which is not evaluated when you load data. In other words, you cannot use functiosn in JSON. At the beginning, try to hardcode the timestamps (onyl for testing) and check if chart is printed or not.

highcharts,highstock,symbol is undefiend

I'm able to have some output with highstocks timeline chart, but when I hover on the chart, for every inch that my cursor moves, I get a javascript error:symbol is undefiend,
is is the url to image from my error
this is my markup:
<div style="padding: 10px">
<style>
.highcharts-container {
direction: ltr;
}
</style>
<div id="widget47"></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
window.chart = new Highcharts.StockChart({
'chart': {
'renderTo': 'widget47'
},
'exporting': {
'enabled': true
},
'title': {
'text': 'sale report in time period'
},
'yAxis': {
'plotLines': [{
'value': 1,
'width': 2,
'color': 'silver'
}]
},
'credits': {
'enabled': false
},
'rangeSelector': {
'selected': 4
},
'plotOptions': {
'series': {
'compare': 'value'
}
},
'series': [{
'name': 'M1POS',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 2100000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 0,
'_symbolIndex': 0,
'marker': {
'enabled': true
}
}, {
'name': 'Cipherlab PDA CP50',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 2100000.],
[Date.UTC(2013, 11, 03, 11, 07, 19), 6300000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 1,
'_symbolIndex': 1,
'marker': {
'enabled': true
}
}, {
'name': 'Cipherlab PDA CP 60',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 2100000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 2,
'_symbolIndex': 2,
'marker': {
'enabled': true
}
}, {
'name': 'Cipherlab PDA CP30',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 4200000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 3,
'_symbolIndex': 3,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA M3T(WiFi.Bluetooth)',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 4500000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 4,
'_symbolIndex': 4,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA 6200(Wifi.Scanner.Bluthooth)',
'data': [
[Date.UTC(2013, 09, 11, 10, 47, 45), 7700000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 5,
'_symbolIndex': 5,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA 6500(Gsm.Wifi.Scaner.Camera.Bluthooth.Gps)',
'data': [
[Date.UTC(2013, 09, 11, 10, 48, 02), 1800000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 6,
'_symbolIndex': 6,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA B8000',
'data': [
[Date.UTC(2013, 09, 11, 10, 48, 39), 1700000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 7,
'_symbolIndex': 7,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA MM3(WiFi.Scanner.Bluetooth)',
'data': [
[Date.UTC(2013, 09, 11, 10, 48, 39), 1800000.]
],
'_colorIndex': 8,
'_symbolIndex': 8,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA Orange stylus pen',
'data': [
[Date.UTC(2013, 09, 11, 10, 51, 08), 3500000.]
],
'_colorIndex': 9,
'_symbolIndex': 9,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA Orange(GSM.Wifi.Scaner.Camera.Bluthooth.GPS.RFID)',
'data': [
[Date.UTC(2013, 09, 11, 10, 51, 44), 500000.]
],
'_colorIndex': 10,
'_symbolIndex': 10,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA M3T (WiFi Scaner Bluetooth)',
'data': [
[Date.UTC(2013, 09, 11, 10, 51, 44), 500000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.]
],
'_colorIndex': 11,
'_symbolIndex': 11,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA Sky(GSM.Wifi.Scaner.Camera.Bluthooth.GPS.RFID)',
'data': [
[Date.UTC(2013, 09, 11, 10, 53, 02), 1100000.]
],
'_colorIndex': 12,
'_symbolIndex': 12,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA Sky(Gsm.Wifi.Scaner.Camera.Bluthooth.Gps)',
'data': [
[Date.UTC(2013, 09, 11, 10, 53, 02), 1100000.]
],
'_colorIndex': 13,
'_symbolIndex': 13,
'marker': {
'enabled': true
}
}, {
'name': 'M3 PDA Sky(Wifi.Bluthooth)',
'data': [
[Date.UTC(2013, 09, 11, 10, 53, 02), 1100000.]
],
'_colorIndex': 14,
'_symbolIndex': 14,
'marker': {
'enabled': true
}
}, {
'name': 'Pars تبلت صنعتی پی دی ای صنعتی',
'data': [
[Date.UTC(2014, 01, 15, 08, 35, 03), 90000.],
[Date.UTC(2014, 01, 29, 10, 30, 12), 14000.],
[Date.UTC(2014, 02, 18, 09, 16, 19), 20000.],
[Date.UTC(2014, 02, 19, 09, 15, 34), 30000.],
[Date.UTC(2014, 02, 20, 10, 37, 38), 0.],
[Date.UTC(2014, 02, 22, 12, 07, 59), 0.]
],
'_colorIndex': 15,
'_symbolIndex': 15,
'marker': {
'enabled': true
}
}, {
'name': 'LCD 9',
'data': [
[Date.UTC(2014, 01, 15, 08, 35, 03), 187300.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.],
[Date.UTC(2014, 02, 19, 09, 15, 34), 30000.],
[Date.UTC(2014, 02, 20, 10, 38, 14), 0.],
[Date.UTC(2014, 02, 22, 12, 08, 31), 0.]
],
'_colorIndex': 16,
'_symbolIndex': 16,
'marker': {
'enabled': true
}
}, {
'name': 'Test Pack',
'data': [
[Date.UTC(2014, 01, 15, 11, 10, 52), 192000.]
],
'_colorIndex': 17,
'_symbolIndex': 17,
'marker': {
'enabled': true
}
}, {
'name': 'dsssffsdf',
'data': [
[Date.UTC(2014, 01, 15, 11, 11, 14), 96000.]
],
'_colorIndex': 18,
'_symbolIndex': 18,
'marker': {
'enabled': true
}
}, {
'name': 'LCD 10',
'data': [
[Date.UTC(2014, 01, 15, 11, 14, 32), 52500.],
[Date.UTC(2014, 01, 29, 10, 30, 12), 14000.],
[Date.UTC(2014, 02, 01, 09, 14, 53), 24500.],
[Date.UTC(2014, 02, 18, 09, 16, 19), 30000.],
[Date.UTC(2014, 02, 20, 10, 37, 38), 0.],
[Date.UTC(2014, 02, 22, 12, 07, 59), 0.]
],
'_colorIndex': 19,
'_symbolIndex': 19,
'marker': {
'enabled': true
}
}, {
'name': 'LCD 6',
'data': [
[Date.UTC(2014, 01, 15, 11, 27, 33), 7500.],
[Date.UTC(2014, 01, 29, 10, 30, 12), 14000.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.],
[Date.UTC(2014, 02, 20, 10, 38, 47), 0.],
[Date.UTC(2014, 02, 22, 12, 07, 59), 0.]
],
'_colorIndex': 20,
'_symbolIndex': 20,
'marker': {
'enabled': true
}
}, {
'name': 'LCD 7',
'data': [
[Date.UTC(2014, 01, 15, 11, 28, 25), 1300.],
[Date.UTC(2014, 02, 18, 09, 16, 49), 10000.],
[Date.UTC(2014, 02, 20, 10, 38, 14), 0.],
[Date.UTC(2014, 02, 22, 12, 07, 59), 0.]
],
'_colorIndex': 21,
'_symbolIndex': 21,
'marker': {
'enabled': true
}
}, {
'name': 'Woosim Mobile Printer PortiW40',
'data': [
[Date.UTC(2014, 01, 29, 10, 30, 12), 14000.]
],
'_colorIndex': 22,
'_symbolIndex': 22,
'marker': {
'enabled': true
}
}, {
'name': 'Woosim Mobile Printer WSP-i250',
'data': [
[Date.UTC(2014, 02, 18, 09, 16, 19), 20000.]
],
'_colorIndex': 23,
'_symbolIndex': 23,
'marker': {
'enabled': true
}
}]
});
/*]]>*/
</script>
as you can see my data is ordered by date in ascending format, but I get error #15??
any help is appreciated.

The undefined symbol error appears when you specify a value of 5 or above for _symbolIndex. I'm not sure what your _symbolIndex settings are meant to be doing, they're not part of the API docs, but if you take them out, the problem goes away.
The error 15 is being caused by a misordered date. The Date.UTC function (confusingly) expects a zero-based month parameter but you're giving it one-based months, so where you've got:
Date.UTC(2014, 01, 29, 10, 30, 12)
you haven't set January 29th as you might expect, you've set February 29th (in a non leap year) which JavaScript interprets as March 1st.

We Keep Coding

JavaScript is the programming language of the Web.

Dynamically add data to series in Highcharts - javascript

You can use addPoint function which allows to add new data.

Related

How do I filter an array of arrays using an array?

How to correctly use datetime data on the continuous axis of a Google Chart?

How to process a list of complex data structures

Highcharts - Data won't get loaded into chart on Android WebView

highcharts,highstock,symbol is undefiend

Categories

Resources