JSONLoader with texture - three.js
I made a shape with texture in Blender and exported it. Then with json loader displayed it. Almost everything is fine, geometry good, texture you can see on shape, but no colors. Just black and withe. How to display texture colours? What I am doing wrong?
Json file:
{
"metadata" :
{
"formatVersion" : 3.1,
"generatedBy" : "Blender 2.65 Exporter",
"vertices" : 64,
"faces" : 92,
"normals" : 64,
"colors" : 0,
"uvs" : [133],
"materials" : 1,
"morphTargets" : 0,
"bones" : 0
},
"scale" : 1.000000,
"materials" : [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Material",
"blending" : "NormalBlending",
"colorAmbient" : [0.44769230556029527, 0.44769230556029527, 0.44769230556029527],
"colorDiffuse" : [0.44769230556029527, 0.44769230556029527, 0.44769230556029527],
"colorSpecular" : [0.0, 0.0, 0.0],
"depthTest" : true,
"depthWrite" : true,
"mapNormal" : "texture3.jpg",
"mapNormalFactor" : -0.058823585510253906,
"mapNormalWrap" : ["repeat", "repeat"],
"shading" : "Phong",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
}],
"vertices" : [-1.37836e-07,-2.55512,-2.55512,-1.37836e-07,2.55512,-2.55512,0.498479,-2.55512,-2.50602,0.498479,2.55512,-2.50602,0.977802,-2.55512,-2.36062,0.977802,2.55512,-2.36062,1.41955,-2.55512,-2.1245,1.41955,2.55512,-2.1245,1.80674,-2.55512,-1.80674,1.80674,2.55512,-1.80674,2.1245,-2.55512,-1.41955,2.1245,2.55512,-1.41955,2.36062,-2.55512,-0.977801,2.36062,2.55512,-0.977801,2.50602,-2.55512,-0.498479,2.50602,2.55512,-0.498479,2.55512,-2.55512,4.14106e-07,2.55512,2.55512,1.90731e-07,2.50602,-2.55512,0.498479,2.50602,2.55512,0.498479,2.36062,-2.55512,0.977802,2.36062,2.55512,0.977802,2.1245,-2.55512,1.41955,2.1245,2.55512,1.41955,1.80674,-2.55512,1.80674,1.80674,2.55512,1.80674,1.41955,-2.55512,2.1245,1.41955,2.55512,2.1245,0.977801,-2.55512,2.36062,0.977801,2.55512,2.36062,0.498478,-2.55512,2.50602,0.498478,2.55512,2.50602,-9.68575e-07,-2.55512,2.55512,-9.68575e-07,2.55512,2.55512,-0.49848,-2.55512,2.50602,-0.49848,2.55512,2.50602,-0.977803,-2.55512,2.36062,-0.977803,2.55512,2.36062,-1.41955,-2.55512,2.1245,-1.41955,2.55512,2.1245,-1.80674,-2.55512,1.80674,-1.80674,2.55512,1.80674,-2.12451,-2.55512,1.41955,-2.12451,2.55512,1.41955,-2.36062,-2.55512,0.977801,-2.36062,2.55512,0.9778,-2.50602,-2.55512,0.498477,-2.50602,2.55512,0.498477,-2.55512,-2.55512,-1.86021e-06,-2.55512,2.55512,-2.08358e-06,-2.50602,-2.55512,-0.498481,-2.50602,2.55512,-0.498481,-2.36062,-2.55512,-0.977804,-2.36062,2.55512,-0.977804,-2.1245,-2.55512,-1.41955,-2.1245,2.55512,-1.41955,-1.80674,-2.55512,-1.80674,-1.80674,2.55512,-1.80674,-1.41955,-2.55512,-2.12451,-1.41955,2.55512,-2.12451,-0.977799,-2.55512,-2.36062,-0.977799,2.55512,-2.36062,-0.498475,-2.55512,-2.50602,-0.498475,2.55512,-2.50602],
"morphTargets" : [],
"normals" : [0,-0.68569,-0.727866,0,0.68569,-0.727866,0.142003,0.68569,-0.713889,0.142003,-0.68569,-0.713889,0.278542,0.68569,-0.672475,0.278542,-0.68569,-0.672475,0.40437,0.68569,-0.605213,0.40437,-0.68569,-0.605213,0.514664,0.68569,-0.514664,0.514664,-0.68569,-0.514664,0.605213,0.68569,-0.40437,0.605213,-0.68569,-0.40437,0.672475,0.68569,-0.278542,0.672475,-0.68569,-0.278542,0.713889,0.68569,-0.142003,0.713889,-0.68569,-0.142003,0.727866,0.68569,0,0.727866,-0.68569,0,0.713889,0.68569,0.142003,0.713889,-0.68569,0.142003,0.672475,0.68569,0.278542,0.672475,-0.68569,0.278542,0.605213,0.68569,0.40437,0.605213,-0.68569,0.40437,0.514664,0.68569,0.514664,0.514664,-0.68569,0.514664,0.40437,0.68569,0.605213,0.40437,-0.68569,0.605213,0.278542,0.68569,0.672475,0.278542,-0.68569,0.672475,0.142003,0.68569,0.713889,0.142003,-0.68569,0.713889,0,0.68569,0.727866,0,-0.68569,0.727866,-0.142003,0.68569,0.713889,-0.142003,-0.68569,0.713889,-0.278542,0.68569,0.672475,-0.278542,-0.68569,0.672475,-0.40437,0.68569,0.605213,-0.40437,-0.68569,0.605213,-0.514664,0.68569,0.514664,-0.514664,-0.68569,0.514664,-0.605213,0.68569,0.40437,-0.605213,-0.68569,0.40437,-0.672475,0.68569,0.278542,-0.672475,-0.68569,0.278542,-0.713889,0.68569,0.142003,-0.713889,-0.68569,0.142003,-0.727866,0.68569,0,-0.727866,-0.68569,0,-0.713889,0.68569,-0.142003,-0.713889,-0.68569,-0.142003,-0.672475,0.68569,-0.278542,-0.672475,-0.68569,-0.278542,-0.605213,0.68569,-0.40437,-0.605213,-0.68569,-0.40437,-0.514664,0.68569,-0.514695,-0.514664,-0.68569,-0.514695,-0.40437,0.68569,-0.605213,-0.40437,-0.68569,-0.605213,-0.278542,0.68569,-0.672475,-0.278542,-0.68569,-0.672475,-0.142003,0.68569,-0.713889,-0.142003,-0.68569,-0.713889],
"colors" : [],
"uvs" : [[0.595239,0.415587,0.593966,0.00043,0.633876,0.000307,0.63515,0.415464,0.671471,0.000192,0.672745,0.415349,0.705306,8.8e-05,0.70658,0.415245,0.73408,0,0.735354,0.415157,0.735354,0.417126,0.73408,0.832282,0.705306,0.832194,0.70658,0.417037,0.671472,0.83209,0.672745,0.416934,0.633877,0.831975,0.63515,0.416818,0.593966,0.831853,0.59524,0.416696,0.553274,0.831728,0.554547,0.416571,0.513363,0.831605,0.514637,0.416449,0.475768,0.83149,0.477042,0.416333,0.441933,0.831386,0.443207,0.41623,0.41316,0.831298,0.414433,0.416141,0.736627,0.832106,0.735354,0.416949,0.769188,0.416845,0.770462,0.832002,0.806783,0.41673,0.808057,0.831887,0.846694,0.416608,0.847967,0.831764,0.887386,0.416483,0.88866,0.83164,0.927297,0.41636,0.92857,0.831517,0.964892,0.416245,0.966165,0.831402,0.998726,0.416141,1,0.831298,0.998726,0,1,0.415157,0.966165,0.415261,0.964892,0.000104,0.92857,0.415376,0.927297,0.000219,0.88866,0.415498,0.887386,0.000342,0.847967,0.415623,0.846694,0.000466,0.808057,0.415746,0.806783,0.000589,0.770462,0.415861,0.769188,0.000704,0.736627,0.415965,0.735354,0.000808,0.41316,0.000985,0.441933,0.000896,0.443207,0.416053,0.475768,0.000793,0.477042,0.415949,0.513363,0.000677,0.514637,0.415834,0.226926,0.41316,0.266837,0.421098,0.304432,0.436671,0.338267,0.459278,0.186233,0.41316,0.367041,0.488053,0.146323,0.421098,0.389648,0.521887,0.108727,0.436671,0.405221,0.559482,0.074893,0.459279,0.41316,0.599393,0.046119,0.488053,0.41316,0.640086,0.023511,0.521887,0.405221,0.679997,0.007939,0.559483,0.389648,0.717592,0,0.599393,0.367041,0.751426,0,0.640086,0.338267,0.7802,0.007939,0.679997,0.304432,0.802808,0.023511,0.717592,0.266837,0.81838,0.046119,0.751427,0.226926,0.826319,0.074893,0.780201,0.186233,0.826319,0.108728,0.802808,0.146323,0.81838,0.554547,0.415711,0.553274,0.000555,0.304432,0.023511,0.338267,0.046119,0.367041,0.074893,0.266837,0.007939,0.389648,0.108728,0.226926,0,0.405221,0.146323,0.186233,0,0.41316,0.186234,0.146323,0.007939,0.41316,0.226926,0.108728,0.023511,0.405221,0.266837,0.074893,0.046119,0.389648,0.304432,0.046119,0.074893,0.367041,0.338267,0.023511,0.108728,0.338267,0.367041,0.007939,0.146323,0.304432,0.389649,0,0.186233,0.266837,0.405221,0,0.226926,0.007939,0.266837,0.023511,0.304432,0.146322,0.405221,0.046119,0.338267,0.108727,0.389648,0.074893,0.367041]],
"faces" : [43,0,1,3,2,0,0,1,2,3,0,1,2,3,43,2,3,5,4,0,3,2,4,5,3,2,4,5,43,4,5,7,6,0,5,4,6,7,5,4,6,7,43,6,7,9,8,0,7,6,8,9,7,6,8,9,43,8,9,11,10,0,10,11,12,13,9,8,10,11,43,10,11,13,12,0,13,12,14,15,11,10,12,13,43,12,13,15,14,0,15,14,16,17,13,12,14,15,43,14,15,17,16,0,17,16,18,19,15,14,16,17,43,16,17,19,18,0,19,18,20,21,17,16,18,19,43,18,19,21,20,0,21,20,22,23,19,18,20,21,43,20,21,23,22,0,23,22,24,25,21,20,22,23,43,22,23,25,24,0,25,24,26,27,23,22,24,25,43,24,25,27,26,0,27,26,28,29,25,24,26,27,43,26,27,29,28,0,30,31,32,33,27,26,28,29,43,28,29,31,30,0,33,32,34,35,29,28,30,31,43,30,31,33,32,0,35,34,36,37,31,30,32,33,43,32,33,35,34,0,37,36,38,39,33,32,34,35,43,34,35,37,36,0,39,38,40,41,35,34,36,37,43,36,37,39,38,0,41,40,42,43,37,36,38,39,43,38,39,41,40,0,43,42,44,45,39,38,40,41,43,40,41,43,42,0,46,47,48,49,41,40,42,43,43,42,43,45,44,0,49,48,50,51,43,42,44,45,43,44,45,47,46,0,51,50,52,53,45,44,46,47,43,46,47,49,48,0,53,52,54,55,47,46,48,49,43,48,49,51,50,0,55,54,56,57,49,48,50,51,43,50,51,53,52,0,57,56,58,59,51,50,52,53,43,52,53,55,54,0,59,58,60,61,53,52,54,55,43,54,55,57,56,0,29,62,63,64,55,54,56,57,43,56,57,59,58,0,64,63,65,66,57,56,58,59,43,58,59,61,60,0,66,65,67,68,59,58,60,61,42,35,33,31,0,69,70,71,34,32,30,42,35,31,29,0,69,71,72,34,30,28,42,37,35,29,0,73,69,72,36,34,28,42,37,29,27,0,73,72,74,36,28,26,42,39,37,27,0,75,73,74,38,36,26,42,39,27,25,0,75,74,76,38,26,24,42,41,39,25,0,77,75,76,40,38,24,42,41,25,23,0,77,76,78,40,24,22,42,43,41,23,0,79,77,78,42,40,22,42,43,23,21,0,79,78,80,42,22,20,42,45,43,21,0,81,79,80,44,42,20,42,45,21,19,0,81,80,82,44,20,18,42,47,45,19,0,83,81,82,46,44,18,42,47,19,17,0,83,82,84,46,18,16,42,49,47,17,0,85,83,84,48,46,16,42,49,17,15,0,85,84,86,48,16,14,42,51,49,15,0,87,85,86,50,48,14,42,51,15,13,0,87,86,88,50,14,12,42,53,51,13,0,89,87,88,52,50,12,42,53,13,11,0,89,88,90,52,12,10,42,55,53,11,0,91,89,90,54,52,10,42,55,11,9,0,91,90,92,54,10,8,42,57,55,9,0,93,91,92,56,54,8,42,57,9,7,0,93,92,94,56,8,6,42,59,57,7,0,95,93,94,58,56,6,42,59,7,5,0,95,94,96,58,6,4,42,61,59,5,0,97,95,96,60,58,4,42,3,61,5,0,98,97,96,2,60,4,42,3,63,61,0,98,99,97,2,62,60,42,3,1,63,0,98,100,99,2,1,62,43,1,0,62,63,0,1,0,101,102,1,0,63,62,43,60,61,63,62,0,68,67,102,101,61,60,62,63,42,30,32,34,0,103,104,105,31,33,35,42,28,30,34,0,106,103,105,29,31,35,42,28,34,36,0,106,105,107,29,35,37,42,26,28,36,0,108,106,107,27,29,37,42,26,36,38,0,108,107,109,27,37,39,42,24,26,38,0,110,108,109,25,27,39,42,24,38,40,0,110,109,111,25,39,41,42,22,24,40,0,112,110,111,23,25,41,42,22,40,42,0,112,111,113,23,41,43,42,20,22,42,0,114,112,113,21,23,43,42,20,42,44,0,114,113,115,21,43,45,42,18,20,44,0,116,114,115,19,21,45,42,18,44,46,0,116,115,117,19,45,47,42,16,18,46,0,118,116,117,17,19,47,42,16,46,48,0,118,117,119,17,47,49,42,14,16,48,0,120,118,119,15,17,49,42,14,48,50,0,120,119,121,15,49,51,42,12,14,50,0,122,120,121,13,15,51,42,12,50,52,0,122,121,123,13,51,53,42,10,12,52,0,124,122,123,11,13,53,42,10,52,54,0,124,123,125,11,53,55,42,8,10,54,0,126,124,125,9,11,55,42,8,54,56,0,126,125,69,9,55,57,42,6,8,56,0,127,126,69,7,9,57,42,6,56,58,0,127,69,73,7,57,59,42,4,6,58,0,128,127,73,5,7,59,42,4,58,60,0,128,73,129,5,59,61,42,2,4,60,0,130,128,129,3,5,61,42,2,60,62,0,130,129,131,3,61,63,42,0,2,62,0,132,130,131,0,3,63],
"bones" : [],
"skinIndices" : [],
"skinWeights" : [],
"animation" : {}
}
Code to load mesh is :
var loader = new THREE.JSONLoader();
loader.load('cylinder.js', function(geo, mat){
var materials = new THREE.MeshFaceMaterial( mat );
var mesh = new THREE.Mesh(geo, materials);
mesh.position.y=0;
mesh.position.x=5;
loadJson(mesh );
});
function loadJson(mesh){
scene.add( mesh );
}
Result:
Your material in your JSON file does not look right:
You have
"mapNormal" : "texture3.jpg"
and it should be
"mapDiffuse" : "texture3.jpg"
three.js r.55
Related
nested object is undefined - Ajax call Response - Json Parser
My Ajax call is as follows
function onMapClick(e) {
$.ajax({
type: "GET",
url: GET_MAP_PT_INFO_URI,
data: { "lat": e.latlng.lat, "lng": e.latlng.lng },
dataType: 'json',
success: function (d) {
LoadPointDetails(d);
},
error: function () {
if (debugState) console.log("Error in call for chart data.");
}
});
}
function LoadPointDetails(obj) {
currPointDet = obj;
var objParsed = JSON.parse(obj);
console.log(objParsed);
...
}
My console log returns the following Json:
{"general" : {"id" : 45423920, "timestamp" : "2019-06-30T23:41:38.2", "run_id" : 29211, "track_id" : 10317, "link_id" : 983544872, "dir" : "T", "vehicle_name" : "Transporter", "prev_id" : 45423919, "next_id" : 45423921, "track_start" : "2019-06-30T23:31:12.7", "track_end" : "2019-07-01T00:34:15.6", "img_path" : "https://xyz-abc.s3-ap-southeast-2.amazonaws.com/somecode/1/123444.jpg", "notes" : null, "flag" : null}, "spatial" : {"lat" : -23.7830482, "lng" : 133.877221, "bearing" : 165, "speed_can_kmh" : 82, "speed_sat_kmh" : 81, "vert_velocity" : 0}, "line_data" : {"line_0_type_l" : "solid", "line_0_type_r" : "dashed", "line_0_qual_l" : "excellent", "line_0_qual_r" : "high", "line_0_width_l" : 0.13, "line_0_width_r" : 0.16, "line_1_type_l" : "solid", "line_1_type_r" : "solid", "line_1_width_l" : 0.14, "line_1_width_r" : 0.21, "line_2_type_l" : "dashed", "line_2_type_r" : "dashed", "line_2_width_l" : 0.00, "line_2_width_r" : 0.00, "ldw_left_on" : false, "ldw_right_on" : false, "ldw_off" : false, "ldw_left_avail" : true, "ldw_right_avail" : true}, "sign_data" : {"sign_type_1" : null, "sign_type_2" : null, "sign_type_3" : null, "sign_type_4" : null, "sign_type_5" : null, "sign_type_6" : null, "sign_type_7" : null}, "previous_sign_data" : {"sign_type_1" : 9, "sign_type_2" : 9, "sign_type_3" : 0, "sign_type_4" : 0, "sign_type_5" : 0, "sign_type_6" : 0, "sign_type_7" : 0}, "GeoJson" : {"type":"Feature","geometry":{"type":"Point","coordinates":[133.877221,-23.7830482]},"properties":{"id":45423920}}}
but when i try to access objParsed.general it is undefined
I want to read img_path.
What am I missing?
maybe you can get it directly:
function LoadPointDetails(obj) {
var img = obj.general.img_path;
alert(img);
}
In my test, I have an api:
public IActionResult getData()
{
var b = new { id = "45423920", img_path = "https://xyz-abc.s3-ap-southeast-2.amazonaws.com/somecode/1/123444.jpg" };
var c = new { lat = -23.7830482, lng = 133.877221 };
var a = new { general = b, spatial = c };
return Json(a);
}
Then my Ajax call:
$("#btn3").click(function() {
$.ajax({
type: "GET",
url: 'https://localhost:7151/home/getData',
data: { "lat": 111, "lng": 222 },
dataType: 'json',
success: function (d) {
LoadPointDetails(d);
},
error: function () {
if (debugState) console.log("Error in call for chart data.");
}
});
})
I found my answer here
My JSon was double encoded:
function LoadPointDetails(obj) {
currPointDet = obj;
var objParsed = JSON.parse(obj.trim());
var obj2 = JSON.parse(objParsed);
console.log(obj2.general);
}
This worked!
How to change a key in gltf file?
I want to change this key value 0.5 on
"baseColorFactor" : [
0.004314713645726442,
0.42002472281455994,
0,
0.5
],
This is the complete object
"materials" : [
{
"alphaMode" : "BLEND",
"doubleSided" : true,
"emissiveFactor" : [
0,
0,
0
],
"name" : "dgray",
"pbrMetallicRoughness" : {
"baseColorFactor" : [
0.004314713645726442,
0.42002472281455994,
0,
0.5
],
"metallicFactor" : 0,
"roughnessFactor" : 0.5
}
},
{
"alphaMode" : "BLEND",
"doubleSided" : true,
"emissiveFactor" : [
0,
0,
0
],
"name" : "Material.004",
"pbrMetallicRoughness" : {
"baseColorFactor" : [
0.034654635936021805,
0.29569298028945923,
0,
0.5
],
"metallicFactor" : 0,
"roughnessFactor" : 0.5
}
}
],
i tried materials[0].pbrMetallicRoughness.baseColorFactor[3] = 1; but doesnt work,
that is from gltf file. i want the gltf to change transparency when the user clicks on it.
This is the code:
const domEvents = new THREEx.domEvents(camera, renderer.domElement);
domEvents.addEventListener(obj, 'click', event => {
materials[0].pbrMetallicRoughness.baseColorFactor[3] = 1;
});
CK editor Table Tools Toolbar
I have a problem with my CK editor, the following addon is installed but does not show in toolbar: http://ckeditor.com/addon/tabletoolstoolbar
I used builder for create my editor here you can find the config:
var CKBUILDER_CONFIG = {
skin: 'office2013',
preset: 'full',
ignore: [
'.bender',
'bender.js',
'bender-err.log',
'bender-out.log',
'dev',
'.DS_Store',
'.editorconfig',
'.gitattributes',
'.gitignore',
'gruntfile.js',
'.idea',
'.jscsrc',
'.jshintignore',
'.jshintrc',
'less',
'.mailmap',
'node_modules',
'package.json',
'README.md',
'tests'
],
plugins : {
'a11yhelp' : 1,
'about' : 1,
'autosave' : 1,
'basicstyles' : 1,
'bidi' : 1,
'blockquote' : 1,
'clipboard' : 1,
'colorbutton' : 1,
'colordialog' : 1,
'contextmenu' : 1,
'dialogadvtab' : 1,
'div' : 1,
'elementspath' : 1,
'enterkey' : 1,
'entities' : 1,
'filebrowser' : 1,
'find' : 1,
'flash' : 1,
'floatingspace' : 1,
'font' : 1,
'format' : 1,
'forms' : 1,
'horizontalrule' : 1,
'htmlwriter' : 1,
'iframe' : 1,
'image' : 1,
'imagebrowser' : 1,
'indentblock' : 1,
'indentlist' : 1,
'justify' : 1,
'language' : 1,
'link' : 1,
'list' : 1,
'liststyle' : 1,
'magicline' : 1,
'maximize' : 1,
'newpage' : 1,
'pagebreak' : 1,
'pastefromword' : 1,
'pastetext' : 1,
'preview' : 1,
'print' : 1,
'removeformat' : 1,
'resize' : 1,
'save' : 1,
'scayt' : 1,
'selectall' : 1,
'showblocks' : 1,
'showborders' : 1,
'smiley' : 1,
'sourcearea' : 1,
'specialchar' : 1,
'stylescombo' : 1,
'tab' : 1,
'table' : 1,
'tabletools' : 1,
'tabletoolstoolbar' : 1,
'templates' : 1,
'toolbar' : 1,
'undo' : 1,
'widget' : 1,
'wsc' : 1,
'wysiwygarea' : 1,
'youtube' : 1
},
languages : {
'en' : 1,
'hu' : 1
}
};
Can anybody help what is the problem?
Problem solved the plugin does not add to toolbar. Find the toolbarGroups in ckeditor.js and add the following: name : "tables", groups : ["table", "tablerow", "tablecolumn", "tablecell", "tablecellmergesplit"]
reset particular values with COMPASS / SASS
Assume I have the following class
.hello {
border: 1px solid black;
border-radius: 50%;
}
is there any possibility to achieve the following in SASS/COMPASS?
.hello.world {
#include <some-reset-mixin-whatever>(border-bottom-left-radius, border-bottom-right-radius, border-bottom);
}
Instead of
.hello.world {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
?
I know I can write this mixin on my own, but I want to have it as general as possible and would be good if COMPASS already has it.
It seems that compass does not offer reset out of box, but here's one very simple reset mixin that just picks default css values from a list.
// usage:
.some-element {
#include reset(margin, border, transform, width, visibility);
}
#mixin reset($properties...) {
#each $property in $properties {
#{$property}: map-get($defaults, $property);
}
}
$defaults: (
animation : none,
animation-delay : 0,
animation-direction : normal,
animation-duration : 0,
animation-fill-mode : none,
animation-iteration-count : 1,
animation-name : none,
animation-play-state : running,
animation-timing-function : ease,
backface-visibility : visible,
background : 0,
background-attachment : scroll,
background-clip : border-box,
background-color : transparent,
background-image : none,
background-origin : padding-box,
background-position : 0 0,
background-position-x : 0,
background-position-y : 0,
background-repeat : repeat,
background-size : auto auto,
border : 0,
border-style : none,
border-width : medium,
border-color : inherit,
border-bottom : 0,
border-bottom-color : inherit,
border-bottom-left-radius : 0,
border-bottom-right-radius : 0,
border-bottom-style : none,
border-bottom-width : medium,
border-collapse : separate,
border-image : none,
border-left : 0,
border-left-color : inherit,
border-left-style : none,
border-left-width : medium,
border-radius : 0,
border-right : 0,
border-right-color : inherit,
border-right-style : none,
border-right-width : medium,
border-spacing : 0,
border-top : 0,
border-top-color : inherit,
border-top-left-radius : 0,
border-top-right-radius : 0,
border-top-style : none,
border-top-width : medium,
bottom : auto,
box-shadow : none,
box-sizing : content-box,
caption-side : top,
clear : none,
clip : auto,
color : inherit,
columns : auto,
column-count : auto,
column-fill : balance,
column-gap : normal,
column-rule : medium none currentColor,
column-rule-color : currentColor,
column-rule-style : none,
column-rule-width : none,
column-span : 1,
column-width : auto,
content : normal,
counter-increment : none,
counter-reset : none,
cursor : auto,
direction : ltr,
display : inline,
empty-cells : show,
float : none,
font : normal,
font-family : inherit,
font-size : medium,
font-style : normal,
font-variant : normal,
font-weight : normal,
height : auto,
hyphens : none,
left : auto,
letter-spacing : normal,
line-height : normal,
list-style : none,
list-style-image : none,
list-style-position : outside,
list-style-type : disc,
margin : 0,
margin-bottom : 0,
margin-left : 0,
margin-right : 0,
margin-top : 0,
max-height : none,
max-width : none,
min-height : 0,
min-width : 0,
opacity : 1,
orphans : 0,
outline : 0,
outline-color : invert,
outline-style : none,
outline-width : medium,
overflow : visible,
overflow-x : visible,
overflow-y : visible,
padding : 0,
padding-bottom : 0,
padding-left : 0,
padding-right : 0,
padding-top : 0,
page-break-after : auto,
page-break-before : auto,
page-break-inside : auto,
perspective : none,
perspective-origin : 50% 50%,
position : static,
quotes : '\201C' '\201D' '\2018' '\2019',
right : auto,
tab-size : 8,
table-layout : auto,
text-align : inherit,
text-align-last : auto,
text-decoration : none,
text-decoration-color : inherit,
text-decoration-line : none,
text-decoration-style : solid,
text-indent : 0,
text-shadow : none,
text-transform : none,
top : auto,
transform : none,
transform-style : flat,
transition : none,
transition-delay : 0s,
transition-duration : 0s,
transition-property : none,
transition-timing-function : ease,
unicode-bidi : normal,
vertical-align : baseline,
visibility : visible,
white-space : normal,
widows : 0,
width : auto,
word-spacing : normal,
z-index : auto
);
jqplot changes the color of graph on mouse hover when graph has many data points
$.jqplot(
this.loadAvgChartId,
loadAvgChartData,
{
height : 130,
width : 410,
fontSize : '9px',
seriesColors : [ '#3aa5dc',
'#032ecf' ],
series : [ {
label : 'Load-5',
showMarker : false,
lineWidth : 1,
shadowDepth : 0,
shadowOffset : 1.25,
}, {
label : 'Load-15',
showMarker : false,
lineWidth : 1,
shadowDepth : 0
} ],
legend : {
show : false
},
grid : {
gridLineColor : '#EBEBEB',
gridLineWidth : 1.0,
show : false,
shadow : false,
shadowDepth : 0,
background : '#FFF',
drawBorder : false,
borderColor : '#999',
borderWidth : '1.0'
},
cursor : {
zoom : false,
showToolTip : false,
showVerticalLine : false,
showCursorLegend : false,
intersectionThreshold : 20,
style: 'default'
},
highlighter : {
bringSeriesToFront: this.isIE7?false:true,
shadow : false,
lineWidthAdjust: 1,
sizeAdjust: -3,
tooltipLocation: 'n',
tooltipAxes: 'both',
formatString: '<i>%s</i><br/><b>%s</b>',
useAxesFormatters : true
},
axes : {
xaxis : {
renderer : $.jqplot.DateAxisRenderer,
syncTicks : true,
tickOptions : {
showGridline : true,
formatString : this.nmdLoadAvgs[this.selectedLoadAvg].curTickFormatString
},
labelPosition : 'start',
tickInterval : this.nmdLoadAvgs[this.selectedLoadAvg].curTickInterval,
min : minXaxisTick,
max : maxXaxisTick
},
yaxis : {
tickOptions : {
showGridline : false,
showMark : false
},
//tickInterval : .5,
pad: 1.4,
min : 0.0,
max: maxYaxisTick,
numberTicks: 3
}
}
}
);
this worked for me:
jqplot changes the color of graph on mouse hover
seriesDefaults:
{
rendererOptions:
{
highlightMouseOver: false
}
}