Blender json export; "animation" missing - animation

I'm trying to figure out how basic animations are exported and used with three.js. I made a geometry in blender and exported it to JSON. Since i'm useing three.js v 69, the use of THREE.animationHandler is deprecated. I found a working example for my version of the library, but it works only with the JSON that comes with the example that comes with the three.js library avalible here: http://threejs.org/examples/models/skinned/knight.js.
MY JSON file outputs this error: TypeError: a is undefined three.min.js:682.
I can't find a syntax difference between the files.
var loader = new THREE.JSONLoader(),
animatedMesh;
loader.load( './123.json', function ( geometry, materials ) {
var originalMaterial = materials[ 0 ];
originalMaterial.skinning = true;
animatedMesh = new THREE.SkinnedMesh( geometry, originalMaterial );
// Instantiate the animation
var animation = new THREE.Animation(
animatedMesh,
geometry.animation
);
animation.play();
});
scene.add( animatedMesh );
When I check geometry.animation[0].hierarchy.lenght first in the function that the loader calls, it gives and error when I use my JSON. When I use knight.js I get the correct number of the animations; 80.
The JSON i exported for the test:
{ "metadata": {
"formatVersion" : 3.1,
"generatedBy" : "Blender 2.7 Exporter",
"vertices" : 8,
"faces" : 6,
"normals" : 8,
"colors" : 0,
"uvs" : [],
"materials" : 1,
"morphTargets" : 0,
"bones" : 1
},
"scale" : 1.000000,
"vertices" : [0.282971,-0.059365,-0.277163,0.278713,-0.0459321,0.283946,-0.282552,-0.0482188,0.279742,-0.278294,-0.0616519,-0.281367,0.268505,3.65467,-0.366188,0.264248,3.66811,0.194921,-0.297017,3.66582,0.190716,-0.29276,3.65239,-0.370392],
"faces" : [35,0,1,2,3,0,0,1,2,3,35,4,7,6,5,0,4,5,6,7,35,0,4,5,1,0,0,4,7,1,35,1,5,6,2,0,1,7,6,2,35,2,6,7,3,0,2,6,5,3,35,4,0,3,7,0,4,0,3,5],
"uvs" : [],
"normals" : [0.583941,-0.588641,-0.559008,0.575182,-0.560991,0.595325,-0.579455,-0.565691,0.586657,-0.570696,-0.593341,-0.567644,0.579455,0.565691,-0.586657,-0.575182,0.560991,-0.595325,-0.583941,0.588641,0.559008,0.570696,0.593341,0.567644],
"skinIndices" : [0,-1,0,-1,0,-1,0,-1,0,-1,0,-1,0,-1,0,-1],
"skinWeights" : [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
"morphTargets" : [],
"bones" : [{"parent":-1,"name":"Bone","pos":[0,0,-0],"rotq":[0.707107,0,-0,0.707107],"scl":[3.4158,3.4158,3.4158]}],
"animation" : [{"name":"ArmatureAction","fps":24,"length":1.625,"hierarchy":[{"parent":-1,"keys":[{"time":0,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.0416667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.0833333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.125,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.166667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.208333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.25,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.291667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.333333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.375,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.416667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.458333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.5,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.541667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.583333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.625,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.666667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.708333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.75,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.791667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.833333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.875,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.916667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.958333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.04167,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.08333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.125,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.16667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.20833,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.25,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.29167,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.33333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.375,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.41667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.45833,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.5,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.54167,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.58333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.625,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]}]}]}],
"colors" : [],
"materials" : [
{
"DbgColor": 15658734,
"DbgIndex": 0,
"DbgName": "Material",
"blending": "NormalBlending",
"colorAmbient": [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
"colorDiffuse": [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
"colorEmissive": [0.0, 0.0, 0.0],
"colorSpecular": [0.5, 0.5, 0.5],
"depthTest": true,
"depthWrite": true,
"shading": "Lambert",
"specularCoef": 50,
"transparency": 1.0,
"transparent": false,
"vertexColors": false
} ] }

It was my mistake, there are certain conditions in Blender to make the right export to JSON. Also in some models its cales animation, in mine its animations. The correct code is: var animation = new THREE.Animation( animatedMesh, geometry.animations[0] );

Related

how to put threejs building on mapbox to its real place

currently i've load eiffel tower obj file, and render it using threejs, but how can i put the building on map to its place in real world. i use mapgox-gl-js to handle map issues, for its convenience on 3d map.
style: {
"version": 8,
"sources": {
"satellite": {
"type": "raster",
"url": "mapbox://mapbox.satellite",
"tileSize": 256
},
"canvas": {
type: 'canvas',
canvas: 'idOfMyHTMLCanvas',
// animate: true,
coordinates: [
[-74.02204952394804, 40.706782422418456],
[-73.99115047610259, 40.706782422418456],
[-73.99115047610259, 40.72021689994298],
[-74.02204952394804, 40.72021689994298]
],
contextType: 'webgl'
}
},
"layers": [{
"id": "satellite",
"type": "raster",
"source": "satellite"
}, {
"id": "video",
"type": "raster",
"source": "canvas"
}]
}
thank you for any help.
You may want to check out Threebox, which is designed to sync a Three.js scene graph with a Mapbox GL JS map.
This question is quite old, but indeed as suggested by #lauren-budorick, it took me 5 minutes to do this sample using the latest version of threebox and the result is like this
<script>
mapboxgl.accessToken = 'PASTE HERE YOUR TOKEN';
var origin = [2.294514, 48.857475];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9',
center: origin,
zoom: 18,
pitch: 60,
bearing: 0
});
map.on('style.load', function () {
map
.addLayer({
id: 'custom_layer',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, mbxContext) {
window.tb = new Threebox(
map,
mbxContext,
{
defaultLights: true,
}
);
// import tower from an external glb file, downscaling it to real size
// IMPORTANT: .glb is not a standard MIME TYPE, you'll have to add it to your web server config,
// otherwise you'll receive a 404 error
var options = {
obj: '/3D/eiffel/eiffel.glb',
type: 'gltf',
scale: 0.01029,
units: 'meters',
rotation: { x: 0, y: 0, z: 0 }, //default rotation
adjustment: { x: -0.5, y: -0.5, z: 0 } // place the center in one corner for perfect positioning and rotation
}
tb.loadObj(options, function (model) {
model.setCoords(origin); //position
model.setRotation({ x: 0, y: 0, z: 45.7 }); //rotate it
tb.add(model);
})
},
render: function (gl, matrix) {
tb.update();
}
});
})
</script>
I just stumbled across this question and wanted to provide an updated answer for anyone else who ends up here. At the time the question was asked, this was not possible in Mapbox GL JS without a plugin but it can be achieved now with the CustomLayerInterface.
Here's an example of adding a Three.js model to a Mapbox GL JS map.

Formatting currency when exporting amCharts

I'm working with amCharts 3.20.9, I sucesfully draw a graph and may export the data into an XLSX file. However, one of the columns I'm exporting is a currency, is there a way of setting such a format in the resulting file?
The script I have for the graph is:
var chart = AmCharts.makeChart("graph", {
"type" : "serial",
"theme" : "light",
"dataProvider" : data,
"valueAxes" : [ {
"stackType": "regular",
"gridColor" : "#FFFFFF",
"gridAlpha" : 0.2,
"dashLength" : 0,
"title" : "Metros cúbicos"
} ],
"gridAboveGraphs" : true,
"startDuration" : 1,
"graphs" : graphs,
"chartCursor" : {
"categoryBalloonEnabled" : false,
"cursorAlpha" : 0,
"zoomable" : false
},
"categoryField" : "formatedTime",
"categoryAxis" : {
"gridPosition" : "start",
"gridAlpha" : 0,
"tickPosition" : "start",
"tickLength" : 20,
"parseDates" : false,
"labelsEnabled": true,
"labelFrequency": 3
},
"export" : {
"enabled" : true,
"fileName" : "Reporte",
"exportTitles" : true,
"exportFields" : fields,
"columnNames" : columnNames,
"menu" : [ {
"class" : "export-main",
"menu" : [ "PDF", "XLSX" ]
} ]
}
});
Where:
graphs contains the graphs definitions, something like:
[{
"balloonText" : "[[formatedTime]]: <b>[[" + sites[i] + "]]</b>",
"balloonFunction" : formater,
"lineThickness": 1,
"lineAlpha" : 0.2,
"type" : "line",
"valueField" : sites[i]
}];
fields: ["formatedTime", "Viva Villavicencio", "Viva Villavicencio_COST_"]
columnNames: {"formatedTime": "Fecha", "Viva Villavicencio": "Metros cúbicos para: Viva Villavicencio", "Viva Villavicencio_COST_": "Costo para: Viva Villavicencio"}
So far so good, I have my xlsx with the proper data, but at the end I want the column "Viva Villavicencio_COST_" be defined as a currency in the resulting file and therefore formatted and displayed that way.
Any help will be appreciated.
Have a look at the processData option. It takes a callback function that lets you make changes to your dataset before it gets written to your exported file.
So, add to your code:
"export": {
"processData": function(data){
for(var i = 0; i < data.length; i++){
data[i].Viva Villavicencio_COST_ = toCurrency(data[i].Viva Villavicencio_COST_);
}
return data;
}
...
}
This function returns the exact dataset as before, but with a formatted Viva Villavicencio_COST_ field.
Then, add the function toCurrency. I don't believe amCharts has a function built in for formatting. If you need a better formatting function you could use something like numeral.js or accounting.js, but for now try:
function toCurrency(value){
return '$' + value;
}
Complete docs for the export plugin are here: https://github.com/amcharts/export
Hope that helps.

How to add colorAxis to non-plotted categoryAxis?

Updated fiddle, courtesy of echonax.
I am trying to apply color coding to segments of a line plot in dimple.js, similar to this example. Specifically, I have some categorical data (the "status" field), where I want each status to correspond to a specific color.
I've tried all variations of addColorAxis that I can think of, but the solution eludes me.
Here's what I have so far:
var svg = dimple.newSvg("#chartContainer", 1000, 1000);
chart = new dimple.chart(svg);
chart.setBounds(100, 100, 500, 300);
x = chart.addCategoryAxis("x", "project");
y = chart.addTimeAxis("y", "date", "%Y-%m-%d", "%Y-%m-%d");
y.addOrderRule("date");
var lines = chart.addSeries(["project"], dimple.plot.line, [x, y]);
lines.data = [
{ "date" : '2016-01-01', "project" : "Grape", "status" : 1 },
{ "date" : '2016-01-08', "project" : "Grape", "status" : -2 },
{ "date" : '2016-01-07', "project" : "Apple", "status" : 3 },
{ "date" : '2016-01-08', "project" : "Apple", "status" : 1 },
{ "date" : '2016-01-02', "project" : "Banana", "status" : -2 },
{ "date" : '2016-01-15', "project" : "Banana", "status" : 2 },
];
lines.lineWeight = 5;
lines.lineMarkers = true;
Related: It seems like y.addGroupOrderRule("date", false); does have no effect at all for reversing the dates. I'd like the oldest dates at top, and newest dates at the bottom. Can't figure it out.
Edit
My latest attempt was to replicate the colorAxis example for a single category, save for swapping the x and y axes.
var grape = [
{ "date" : '2016-01-01', "status" : 0, "fake_x" : 1},
{ "date" : '2016-01-08', "status" : 1, "fake_x" : 1}];
var svg = dimple.newSvg("#chartContainer", 590, 400);
var myChart = new dimple.chart(svg, grape);
myChart.setBounds(60, 30, 500, 300);
var x = myChart.addCategoryAxis("x", "fake_x");
var y = myChart.addTimeAxis("y", "date");
// Order the x axis by date
y.addOrderRule("date");
// Min price will be green, middle price yellow and max red
myChart.addColorAxis("status", ["green", "yellow", "red"]);
// Add a thick line with markers
var lines = myChart.addSeries(null, dimple.plot.line);
lines.lineWeight = 5;
lines.lineMarkers = true;
// Draw the chart
myChart.draw();
The result has the same problems though:
var chart = new dimple.chart(svg);
is the line that breaks your code
I've changed it to
var chart = new dimple.chart(svg,data);
and now it works.
Here is an updated fiddle
http://jsfiddle.net/1hotquwf/8/
Got it to work for a single axis, will post an update if/when I get it to work for the category axis as well.
var grape = [
{ "date" : '2016-01-01', "status" : 0, "fake_x" : 1},
{ "date" : '2016-01-15', "status" : 3, "fake_x" : 1},
{ "date" : '2016-01-08', "status" : 1, "fake_x" : 1}];
var svg = dimple.newSvg("#chartContainer", 590, 400);
// Create and Position a Chart
var chart = new dimple.chart(svg, grape);
chart.setBounds(60, 30, 500, 300);
var x = chart.addCategoryAxis("y", "date")
chart.addMeasureAxis("x", "fake_x");
// Order the x axis by date
x.addOrderRule("date");
// Min price will be green, middle price yellow and max red
chart.addColorAxis("status", ["green", "yellow", "red"]);
// Add a thick line with markers
var lines = chart.addSeries(null, dimple.plot.line);
lines.lineWeight = 5;
lines.lineMarkers = true;

three.js shadermaterial not working at all

I've been fiddling around with three.js a bit, and im stumped when it comes to THREE.ShaderMaterial. it started out with copy/pasting directly from the example, shown here: http://threejs.org/examples/#webgl_materials_normalmap
i copied it into a function that just returns the material. it wouldnt work (error, i'll get to the specifics later), so i removed all the uniforms that had been set and went for a complete blank material. just to see if the same error would still show.
so here's my code:
var testmaterial = function(params){
var shader = THREE.ShaderLib[ "normalmap" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms};
var material = new THREE.ShaderMaterial( parameters );
return material;
};
nothing fancy you'd say, and i'd agree, however, the browser seems to disagree. here's the error i just cant seem to get rid of:
error X6077: texld/texldb/texldp/dsx/dsy instructions with r# as source cannot be used inside dynamic conditional 'if' blocks, dynamic conditional subroutine calls, or loop/rep with break*.
does anyone have the slightest clue on what i'm doing wrong? any help would be greatly appreciated.
The shader you chose, namely normalmap, requires some input uniforms to be set.
If you look at https://github.com/mrdoob/three.js/blob/r68/src/renderers/shaders/ShaderLib.js#L595 you will see the variables that are null:
"tDisplacement": { type: "t", value: null },
"tDiffuse" : { type: "t", value: null },
"tCube" : { type: "t", value: null },
"tNormal" : { type: "t", value: null },
"tSpecular" : { type: "t", value: null },
"tAO" : { type: "t", value: null },
So either you need to set these or since you are just fiddling around try another simple shader that does not require inputs. Seems that most others do not require input uniforms to be set.
EDIT:
You also need to compute the models' tangents.
But for that you need to use a different pattern.
var geometry = new THREE.SphereGeometry(100, 50, 50);
geometry.computeTangents();
var material = myShaderMaterial({
//enableAO : 0,
enableDiffuse : 1,
//enableSpecular : 0,
//enableReflection : 0,
enableDisplacement : 1,
tDisplacement : THREE.ImageUtils.loadTexture('textures/planets/earthbump1k.jpg'),
tDiffuse : THREE.ImageUtils.loadTexture('textures/planets/earthbump1k.jpg'),
//tCube : planet.maps.planet.
tNormal : THREE.ImageUtils.loadTexture('textures/planets/earthbump1k.jpg'),
//tSpecular : planet.maps.planet.
//tAO : planet.maps.planet.
});
var mesh = new THREE.Mesh(geometry, material);

Force ticks to be whole numbers

Exactly the same as this question, but since I don't have the reputation to upvote it (and can't answer it), I'm going to have to ask it again...
Given a graph like the following, how can I force the ticks to always be whole numbers, even if the graph is empty? At the moment, if there is no data for the graph, it will go 0, 0.2, 0.4, 0.6, 0.8, 1.0, but in the context of this graph, that makes no sense - what is being displayed can only consist of whole numbers. If the numbers involved are very small, it can occasionally display as, e.g., 1.0, 1.5, 2.0, 2.5, 3.0, 3.5 (etc), which again is not ideal. As the graph represents things that have happened over the course of the day, it will start out at zero each day and slowly grow, resetting to zero the next day. Ideally, I would like the ticks to start out at 0, 1, 2, 3, 4, 5, and then scale appropriately with the data.
Any suggestions? I've tried tickInterval: 1 (and 5 and 50...) in both the X and Y axes, but that didn't seem to do anything... Maybe a bug in JQPlot?
EDIT: JSFiddle Example showing the problem.
$.jqplot('chartdiv', [ data.a, data.b ], {
title : "Title",
stackSeries : true,
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
rendererOptions : {
barMargin : 15,
barDirection : 'horizontal'
},
pointLabels : {
show : true,
stackedValue : false
},
},
seriesColors : [ "#651811", "#126542" ],
axesDefaults : {
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
tickOptions : {
fontSize : '8pt'
}
},
axes : {
xaxis : {
label : "X-Label",
},
yaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
ticks : [ "T1", "T2", "T3", "T4" ],
tickOptions : {
angle : -75
},
label : "Y-Label",
labelRenderer : $.jqplot.CanvasAxisLabelRenderer,
labelOptions : {
angle : -90
},
}
},
highlighter : {
show : false,
showTooltip : false,
},
legend : {
show : true,
location : 'e',
placement : 'outside',
labels : [ 'L1', 'L2' ]
}
});
You might have better luck setting the max and min values for the axis, then let JQPlot fill in the tick values.
// This is YOUR data set
var series = [882, 38, 66, 522, 123, 400, 777];
var max;
if (series.length > 0) {
// Instead of letting JQPlot pick the scale on the y-axis, let's figure out our own.
var series_max = Math.max.apply(null, series);
var digits = max.toString().length;
var scale = Math.pow(10, max_digits - 1);
max = (Math.ceil(series_max / scale)) * scale;
} else {
// Since you sometimes have an empty dataset, then just pick an arbitrary max.
max = 10;
}
$.jqplot(
'foo',
[series],
{
axes: {
yaxis: {
min: 0,
max: max
}
}
// Put your other config stuff here
}
)
This basic approach works for any integers. If you are using floats and they are greater than 1, you can still use this approach by casting your "series_max" to int. If you are using floats less than 1, this approach may not be suitable: it will always pick 1 as the y-axis max.

Resources