PlotlyJS - Set length of category axis in Surface Plot - javascript

I am trying to manually set the length of a category axis. In detail I want the length of the x axis equal to the length of the y axis. So far I tried diverse layout settings from plotly manual without results.
var layout = {
width: 400,
height: 300,
plot_bgcolor: '#98ff6d',
};
var data = [{
z: [
[1, 20, 10, 12, 1, 1, 20, 10, 12, 1],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 20, 12, 0],
[1, 20, 10, 12, 1, 13, 20, 0, 12, 21],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 1, 12],
[1, 20, 10, 12, 1, 1, 20, 10, 12, 14],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 13, 4, 12, 16, 1, 21, 20, 0, 18],
[1, 20, 0, 12, 1, 21, 65, 10, 12, 1],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 15, 0],
[1, 20, 10, 12, 1, 1, 30, 10, 12, 14],
[24, 13, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 29, 1, 19, 31],
[1, 20, 10, 12, 1, 31, 0, 10, 12, 19],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 11, 21],
[1, 0, 10, 12, 1, 1, 10, 10, 12, 21],
[24, 1, 0, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 1, 19, 36],
[1, 20, 10, 12, 1, 21, 21, 10, 12, 31],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 12, 4, 12, 16, 1, 21, 43, 12, 18],
[1, 20, 10, 12, 1, 1, 39, 10, 12, 13],
[24, 1, 12, 19, 0, 1, 20, 12, 2, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 1, 11],
[1, 20, 10, 12, 1, 19, 38, 10, 12, 16],
[24, 12, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 29, 4, 12, 3],
[1, 20, 0, 12, 1, 1, 23, 10, 12, 11],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 19, 4, 12, 16, 1, 20, 10, 12, 19],
[1, 20, 10, 12, 1, 1, 24, 10, 12, 0],
[24, 1, 12, 19, 023, 1, 22, 10, 12, 1],
[8, 1, 41, 12, 16, 1, 20, 10, 12, 11]
],
x: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10'],
y: ['Messung 1', 'Messung 2', 'Messung 3',
'Messung 4', 'Messung 5', 'Messung 6',
'Messung 7', 'Messung 8', 'Messung 9',
'Messung 10', 'Messung 11', 'Messung 12',
'Messung 13', 'Messung 14', 'Messung 15',
'Messung 16', 'Messung 17', 'Messung 18',
'Messung 19', 'Messung 20', 'Messung 21',
'Messung 22', 'Messung 23', 'Messung 24',
'Messung 25', 'Messung 26', 'Messung 27',
'Messung 28', 'Messung 29', 'Messung 30',
'Messung 31', 'Messung 32', 'Messung 33',
'Messung 34', 'Messung 35', 'Messung 36'
],
type: 'surface'
}];
Plotly.newPlot('plot', data, layout, {
displayModeBar: true,
displaylogo: false
});
#plot {
height: 100vh, width:100vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified plotly.js JavaScript -->
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"></div>


Give your layout Object a scene, and set your desired range on its axis, yaxis, and (if you like) zaxis properties. E.g.
var MIN_VAL = -100, MAX_VAL = 100;
var layout = {
scene:{
axis: {
nticks: 10,
range: [ MIN_VAL, MAX_VAL ]
},
yaxis: {
nticks: 10,
range: [ MIN_VAL, MAX_VAL ]
},
zaxis: {
nticks: 7,
range: [ MIN_VAL, MAX_VAL ]
},
aspectmode: "manual",
aspectratio: { x: 1, y: 1, z: 0.7 },
bgcolor : '#98ff6d'
},
autosize: false,
width: 400,
height: 300,
margin: { l: 0, r: 0, b: 50, t: 50, pad: 4 }
};
Plotly.newPlot('plot', data, layout);
Plotly has a working example (that shows the use of even more layout options) on CodePen.

Related

Having trouble accessing the nested values of my object. JavaScript

So I am trying to create a function that will list all the stats of a specific player in below object. I am simply trying to return the nested object associated with the playerName itself. I'm guessing map isn't working for me here. Instead I am returning an array of the individual letters of the name "Jeff Adrien". Can someone help me understand where I am going wrong?
//Code in question
function playerStats(playerName) {
let specificPlayer = allPlayers().players
if (playerName === specificPlayer) {
return specificPlayer
}
const stats = Object.values(playerName).map((nums) => {
return [nums]
})
return stats.flat()
}
console.log(playerStats('Jeff Adrien'))
// details
function allPlayers() {
const everyPlayer = Object.assign(homePlayers, awayPlayers)
return everyPlayer
}
const gameObject = () => {
return {
home: {
teamName: 'Brooklyn Nets',
colors: ['black', 'white'],
players: {
'Alan Anderson': {
number: 0,
shoe: 16,
points: 22,
rebounds: 12,
assists: 12,
steals: 3,
blocks: 1,
slamDunks: 1,
},
'Reggie Evans': {
number: 30,
shoe: 14,
points: 12,
rebounds: 12,
assists: 12,
steals: 12,
blocks: 12,
slamDunks: 7,
},
'Brook Lopez': {
number: 11,
shoe: 17,
points: 17,
rebounds: 19,
assists: 10,
steals: 3,
blocks: 1,
slamDunks: 15,
},
'Mason Plumlee': {
number: 1,
shoe: 19,
points: 26,
rebounds: 12,
assists: 6,
steals: 3,
blocks: 8,
slamDunks: 5,
},
'Jason Terry': {
number: 31,
shoe: 15,
points: 19,
rebounds: 2,
assists: 2,
steals: 4,
blocks: 11,
slamDunks: 1,
},
},
},
away: {
teamName: 'Charlotte Hornets',
colors: ['turquoise', 'purple'],
players: {
'Jeff Adrien': {
number: 4,
shoe: 18,
points: 10,
rebounds: 1,
assists: 1,
steals: 2,
blocks: 7,
slamDunks: 2,
},
'Bismak Biyombo': {
number: 0,
shoe: 16,
points: 12,
rebounds: 4,
assists: 7,
steals: 7,
blocks: 15,
slamDunks: 10,
},
'DeSagna Diop': {
number: 4,
shoe: 14,
points: 24,
rebounds: 12,
assists: 12,
steals: 4,
blocks: 5,
slamDunks: 5,
},
'Ben Gordon': {
number: 8,
shoe: 15,
points: 33,
rebounds: 3,
assists: 2,
steals: 1,
blocks: 1,
slamDunks: 0,
},
'Brendan Haywood': {
number: 33,
shoe: 15,
points: 6,
rebounds: 12,
assists: 12,
steals: 22,
blocks: 5,
slamDunks: 12,
},
},
},
}
}

wow I was trying to work with an array and turn it into an object somehow.. it just clicked for me
function playerStats(playerName) {
for (const player in allPlayers()) {
if (player === playerName) {
return allPlayers()[player]
}
}
}

Move y-Axis and hide in Chart.JS V3

So I've created this chart, and I'm trying to move the axis around so the Dark red is on the left, and the Blue and the sub of the bar charts is displayed, but I'm having trouble moving the dark red to the right side of this graf. I did try to use the position: 'right', but nothing changed.
I'm trying to make it look like this:
But I can only get this:
var canvas = document.createElement('canvas');
div = document.getElementById('container');
canvas.id = "myChart";
canvas.style.zIndex = 8;
div.appendChild(canvas);
const labels = [
'8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7'
];
const data = {
labels: labels,
datasets: [{
label: 'Red',
backgroundColor: 'rgb(255,0,0)',
borderColor: 'rgb(255,0,0)',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Yellow',
backgroundColor: 'rgb(255,255,0)',
borderColor: 'rgb(255,255,0)',
data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Orange',
backgroundColor: 'rgb(255,159,64)',
borderColor: 'rgb(255,159,64)',
data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Grey light',
backgroundColor: 'rgb(224,224,224)',
borderColor: 'rgb(224,224,224)',
data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Blue',
backgroundColor: 'rgb(30,144,255)',
borderColor: 'rgb(30,144,255)',
data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328],
stack: 'combined_first',
yAxisID: 'GreyDaBlue',
order: 1
},
{
label: 'Dark Red',
backgroundColor: 'rgb(165,42,42)',
borderColor: 'rgb(165,42,42)',
data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45],
stack: 'combined_second',
yAxisID: 'DarkR',
order: 2
},
{
label: 'Dark Grey',
backgroundColor: 'rgb(80,80,80)',
borderColor: 'rgb(80,80,80)',
data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
stack: 'combined_third',
yAxisID: 'GreyDaBlue',
order: 3
}
]
};
const config = {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'WDC History Chart'
},
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
drag: {
enabled: true
},
mode: 'x',
}
}
},
scales: {
y: {
stacked: true
}
}
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>
So how do I move the Dark Red y-axis over to the right side?

I could use the DarkR id and position it right in scales like this
var canvas = document.createElement('canvas');
div = document.getElementById('container');
canvas.id = "myChart";
canvas.style.zIndex = 8;
div.appendChild(canvas);
const labels = [
'8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7'
];
const data = {
labels: labels,
datasets: [{
label: 'Red',
backgroundColor: 'rgb(255,0,0)',
borderColor: 'rgb(255,0,0)',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Yellow',
backgroundColor: 'rgb(255,255,0)',
borderColor: 'rgb(255,255,0)',
data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Orange',
backgroundColor: 'rgb(255,159,64)',
borderColor: 'rgb(255,159,64)',
data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Grey light',
backgroundColor: 'rgb(224,224,224)',
borderColor: 'rgb(224,224,224)',
data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Blue',
backgroundColor: 'rgb(30,144,255)',
borderColor: 'rgb(30,144,255)',
data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328],
stack: 'combined_first',
yAxisID: 'GreyDaBlue',
order: 1
},
{
label: 'Dark Red',
backgroundColor: 'rgb(165,42,42)',
borderColor: 'rgb(165,42,42)',
data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45],
stack: 'combined_second',
yAxisID: 'DarkR',
order: 2
},
{
label: 'Dark Grey',
backgroundColor: 'rgb(80,80,80)',
borderColor: 'rgb(80,80,80)',
data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
stack: 'combined_third',
yAxisID: 'GreyDaBlue',
order: 3
}
]
};
const config = {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'WDC History Chart'
},
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
drag: {
enabled: true
},
mode: 'x',
}
}
},
scales: {
y: {
stacked: true
},
DarkR: {
position: 'right', // `axis` is determined by the position as `'y'`
}
}
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>

How to normalize a histogram with Danfo.js?

I need to get normalized histogram.
So in Danfo notebooks I tried syntax like this:
s = new dfd.Series([1, 3, 2, 2, 2, 6, 10, 10, 34, 40, 51, 90, 90, 90, 90, 1, 3, 2, 2, 2, 6, 10, 10, 34, 40, 51, 90, 90, 90, 90, 1, 3, 2, 2, 2, 6, 10, 10, 34, 40, 51, 90, 90, 90, 90, 1, 3, 2, 2, 2, 6, 10, 10, 34, 40, 51, 90, 90, 90, 90, 1, 3, 2, 2, 2, 6, 10, 10, 34, 40, 51, 90, 90, 90, 90, 75])
s.plot(this_div()).hist({histnorm: 'probability', layout: {title: 'Normalized Histogram'}})
But it looks like danfo.js ignores Plotly histnorm trace attribute.
So the question is: Is it possible to use Plotly trace attributes with danfojs's plots, and if it's possible then what is correct syntax for that?

Google visualisation charts - colors

I am working on project were I have to put different colors on the graph, between some zone's. I want color in blue , red , yellow, green
This is my result
I want something like this
This is my code
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = google.visualization.arrayToDataTable([
['Week', 'Zone 0 - 60%', 'Zone 60 - 70%', 'Zone 70 - 80%', 'Zone 80 - 90%', 'Zone 90% +'],
['W45', 10, 24, 20, 32, 18],
['W46', 16, 22, 23, 30, 16],
['W47', 28, 19, 29, 30, 12],
['W48', 26, 25, 23, 10, 16],
['W49', 28, 19, 29, 40, 12],
['W50', 16, 22, 23, 30, 16],
['W60', 28, 19, 29, 30, 12],
['W61', 26, 25, 23, 10, 16],
['W62', 28, 19, 29, 40, 12],
['W63', 16, 22, 23, 30, 16],
['W64', 28, 19, 29, 30, 12],
['W65', 26, 25, 23, 10, 16],
['W66', 28, 19, 29, 40, 12],
['W67', 28, 19, 29, 30, 12],
['W68', 26, 25, 23, 10, 16],
['W69', 28, 19, 29, 40, 12],
['W70', 16, 22, 23, 30, 16],
['W71', 28, 19, 29, 30, 12],
['W72', 26, 25, 23, 10, 16],
['W73', 28, 19, 29, 40, 12]
]);
var options = {
width: '100%',
height: '100%',
chartArea: {
width: '90%',
height: '80%',
},
bar: { groupWidth: '75%' },
isStacked: true
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));

use a classic chart, instead of a material chart
classic --> packages: ['corechart'] + google.visualization.ColumnChart
material --> packages: ['bar'] + google.charts.Bar
material charts are limited when it comes to available options for styling
see for options not available for material --> Tracking Issue for Material Chart Feature Parity
there is an option to style a classic chart similar to material
theme: 'material'
see following working snippet...
google.charts.load('current', {
callback: drawStuff,
packages: ['corechart']
});
function drawStuff() {
var data = google.visualization.arrayToDataTable([
['Week', 'Zone 0 - 60%', 'Zone 60 - 70%', 'Zone 70 - 80%', 'Zone 80 - 90%', 'Zone 90% +'],
['W45', 10, 24, 20, 32, 18],
['W46', 16, 22, 23, 30, 16],
['W47', 28, 19, 29, 30, 12],
['W48', 26, 25, 23, 10, 16],
['W49', 28, 19, 29, 40, 12],
['W50', 16, 22, 23, 30, 16],
['W60', 28, 19, 29, 30, 12],
['W61', 26, 25, 23, 10, 16],
['W62', 28, 19, 29, 40, 12],
['W63', 16, 22, 23, 30, 16],
['W64', 28, 19, 29, 30, 12],
['W65', 26, 25, 23, 10, 16],
['W66', 28, 19, 29, 40, 12],
['W67', 28, 19, 29, 30, 12],
['W68', 26, 25, 23, 10, 16],
['W69', 28, 19, 29, 40, 12],
['W70', 16, 22, 23, 30, 16],
['W71', 28, 19, 29, 30, 12],
['W72', 26, 25, 23, 10, 16],
['W73', 28, 19, 29, 40, 12]
]);
var options = {
width: '100%',
height: '100%',
chartArea: {
width: '90%',
height: '80%',
top: 48
},
bar: { groupWidth: '75%' },
isStacked: true,
theme: 'material',
legend: {
maxLines: 2,
position: 'top'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="top_x_div"></div>

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.

Categories