Home › Forums › Chart Support › One chart works only on Chrome

One chart works only on Chrome

Viewing 3 posts - 1 through 3 (of 3 total)
  • June 11, 2015 at 6:23 pm #9082

    giancocietto

    Hi! I have one chart in my page that works only when I open the page using Chrome. It’s a chart created by some data I have in a database. This is a plugin with full compatibility with all browsers, so how can I fix this problem?
    Home page:
    <!doctype html>
    <html>
    <head>
    <meta charset=”utf-8″>
    <title>Prova grafici</title>
    <script src=”js/jquery-1.11.3.min”></script>
    <script src=”js/jquery.canvasjs.min”></script>
    <script src=”js/function.js”></script>
    <link rel=”stylesheet” type=”text/css” href=”css/style.css”>
    </head>

    <body>
    <div id=”div_day”>
    <label for=”selectDate”>Seleziona il giorno: </label>
    <select id=”selectDate”>
    </select>
    </div>
    <div id=”chartContainer” style=”height: 300px; width: 100%;”></div>
    <div id=”chartContainerEn” style=”height: 300px; width: 100%;”></div>
    </body>
    </html>
    ___________________________________________________________
    This is my jQuery function page

    $(document).ready(function(){
    var vettore=[];
    var vettore2=new Array();
    var vettoreEn=new Array();
    var pickDate;
    var dateN,dateName;

    $.ajax({
    cache:false,
    type:”POST”,
    dataType: “json”,
    url:”sday.php”,
    success:function(msg){
    pickDate=msg;

    $.each(pickDate, function(key, value) {
    $(‘#selectDate’)
    .append($(‘<option>’, { value : key })
    .text(value));
    });

    }

    });

    $.ajax({
    cache:false,
    type:”POST”,
    dataType: “json”,
    url:”dr.php”,
    success:function(msg3){
    $(‘body’).append(“<h1>SUCCESS</h1>”);
    vettore=msg3;
    vettore.push(msg3);
    //console.log(“Vettore: “+vettore);
    var dps=[];
    var volt=[];
    var orario=[];
    //console.log(“Vettore LENGTH: “+vettore.length);
    for(var i=0;i<vettore.length;i++)
    {
    if(i==0)
    {
    volt.push(parseFloat(vettore[i]));
    }
    else if(i%2==0)
    {
    volt.push(parseFloat(vettore[i]));
    }
    else if(i%2!=0)
    {
    orario.push(vettore[i]);
    }
    }

    //console.log(“Orario: “+orario);
    //console.log(“Volt: “+volt);

    for(var i=0;i<orario.length;i++)
    {

    dps.push({x: new Date(orario[i]), y: volt[i]});

    }
    //console.log(“DPS: “+dps);
    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    exportEnabled: true,
    height:500,
    title: {
    text: “Grafico voltaggio”,
    },
    axisX:{
    title: “Ora del giorno”,
    labelAngle: 150,
    //minimum: 0,
    //maximum: 23,
    intervalType: “hour”,
    interval: 1,
    valueFormatString: “H”,

    },
    axisY:{
    title: “Volt”,
    minimum: 0,
    maximum: 300,
    interval: 50,
    suffix: “V”,
    },
    axisY2:{
    title: “Secondary Y Axis”,
    },

    data: [
    {
    type: “line”,
    dataPoints: dps,
    }
    ]
    });
    chart.render();

    }

    });

    $.ajax({
    cache:false,
    type:”POST”,
    dataType: “json”,
    url:”enr.php”,
    success:function(msg2){
    $(‘body’).append(“<h1>SUCCESS ENR</h1>”);
    //console.log(msg2);
    vettoreEn=msg2;
    vettoreEn.push(msg2);

    var dpsEn=[];
    var valEn=[];
    var orarioEn=[];
    //console.log(“Lunghezza VettoreEn: “+vettoreEn.length);
    for(var i=0;i<vettoreEn.length;i++)
    {
    if(i==0)
    {
    valEn.push(parseFloat(vettoreEn[i]));
    }
    else if(i%2==0)
    {
    valEn.push(parseFloat(vettoreEn[i]));
    }
    else if(i%2!=0)
    {
    orarioEn.push(vettoreEn[i]);
    }
    }

    var finoaqui=Math.round((vettoreEn.length-1)/2)
    //console.log(“Limite: “+finoaqui);
    for(var i=0;i<finoaqui;i++)
    {
    var rand=Math.random();
    dpsEn.push({x: orarioEn[i], y: rand});
    }
    //console.log(“DPS EN: “+dpsEn);

    var chartEn = new CanvasJS.Chart(“chartContainerEn”,
    {
    exportEnabled: true,
    height:500,
    title: {
    text: “Grafico Energia”,
    },
    axisX:{
    title: “Ora del giorno”,
    labelAngle: 150,
    minimum: 0,
    maximum: 23,
    intervalType: “hour”,
    interval: 1,
    /*valueFormatString: “HH DDD”,*/

    },
    axisY:{
    title: “Energia”,
    minimum: 0,
    maximum: 1,
    interval: 0.2,
    },
    axisY2:{
    title: “Secondary Y Axis”,
    },

    data: [
    {
    type: “column”,
    dataPoints: dpsEn,
    },
    /*{
    type: “splineArea”,
    dataPoints: dpsEn,
    }*/
    ]
    });
    chartEn.render();
    }
    });

    $(“#selectDate”).change(function(){
    dateN=$(“#selectDate”).val();
    console.log(“N data: “+dateN);
    var dateName=$(“#selectDate option[value='”+dateN+”‘]”).text();
    console.log(“Data sel: “+dateName);
    $.ajax({
    cache:false,
    type:”POST”,
    data:{dateName:dateName},
    dataType: “json”,
    url:”dr2.php”,
    success:function(msg){
    vettore2=msg;
    console.log(msg);

    var dps2=[];
    var volt2=[];
    var orario2=[];
    console.log(vettore2);
    for(var i=0;i<vettore2.length;i++)
    {
    if(i==0)
    {
    volt2.push(parseFloat(vettore2[i]));
    }
    else if(i%2==0)
    {
    volt2.push(parseFloat(vettore2[i]));
    }
    else if(i%2!=0)
    {
    orario2.push(vettore2[i]);
    }
    }
    for(var i=0;i<orario2.length;i++)
    {
    dps2.push({x: new Date(orario2[i]), y: volt2[i]});
    }
    console.log(“DPS Click: “+dps2);
    var chart = new CanvasJS.Chart(“chartContainer”, {
    exportEnabled: true,
    height:500,
    title: {
    text: “Grafico voltaggio”,
    },
    axisX:{
    title: “Ora del giorno”,
    labelAngle: 150,
    intervalType: “hour”,
    interval: 1,
    valueFormatString: “H”,

    },
    axisY:{
    title: “Volt”,
    minimum: 0,
    maximum: 300,
    interval: 50,
    suffix: “V”,
    },
    axisY2:{
    title: “Secondary Y Axis”,
    },

    data: [
    {
    type: “line”,
    dataPoints: dps2,
    }
    ]});
    //chart.options.data[0].dataPoints = dps2;
    chart.render();
    var updateChart = function() {

    chart.options.data[0].dataPoints = dps2;
    chart.render();

    }
    setInterval(function(){updateChart()},60000);
    }
    });
    });
    });

    Thank you for your time

    June 11, 2015 at 7:33 pm #9084

    giancocietto

    I just tried to set manually some data and it works. It seems that it don’t like data from AJAX request…

    June 16, 2015 at 7:29 pm #9092

    Anjali

    giancocietto,

    Without looking into your JSON data it’s hard to guess the problem so please post your JSON response here so that we can have a look ?

    __
    Anjali

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.