Home forums Using CanvasJS Cant render more than 1 chart

This topic contains 1 reply, has 2 voices, and was last updated by  Suyash Singh 4 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #14794

    jdemarco1122
    Member

    I try to render 3 charts in a single page, but only render the las one, can someone tell me what i doing wrong?
    Thanks a lot.

    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>Resumen Patentamiento<small>Taraborelli Automobile</small></h1>
        </section>
        <!-- Main content -->
        <section class="content">
            <div id="content">
                <div class="row">
                    <div class="box box-primary text-center">
                        <div class="box-body">
    
                                <div class="col-xs-12">
                                    <div id="1" style="height: 400px; width: 100%;">
                                    </div>
                                </div>
    
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="box box-primary text-center">
                        <div class="box-body">
    
                                <div class="col-xs-12">
                                    <div id="2" style="height: 400px; width: 100%;">
                                    </div>
                                </div>
    
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="box box-primary text-center">
                        <div class="box-body">
    
                                <div class="col-xs-12">
                                    <div id="3" style="height: 400px; width: 100%;">
                                    </div>
                                </div>
    
                        </div>
                    </div>
                </div>
            </div>
        </section>
    
    </div>
    <script type="text/javascript">
    	window.onload = function () {
            CanvasJS.addCultureInfo("es",
        {
          decimalSeparator: ",",// Observe ToolTip Number Format
          digitGroupSeparator: ".", // Observe axisY labels
          months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
    
        });
    		var chart1 = new CanvasJS.Chart("1", {
                theme: "theme1",
                culture: "es",
                axisX:{
                valueFormatString:"MMMM"
            },
    
    			title:{
    				text: "Patentamientos Plan de Ahorro",
    				fontSize: 20
    			},
                            animationEnabled: true,
    			axisX:{
    
    				gridColor: "Silver",
    				tickColor: "silver",
    				valueFormatString: "MMMM"
    
    			},
                            toolTip:{
                              shared:true
                            },
    			theme: "theme1",
    			axisY: {
    				gridColor: "Silver",
    				tickColor: "silver"
    			},
    			legend:{
    				verticalAlign: "center",
    				horizontalAlign: "right"
    			},
    
    			data: [
    			{
    				type: "line",
    				showInLegend: true,
    				lineThickness: 2,
    				name: "2015",
    				markerType: "circle",
    				color: "#F08080",
    				dataPoints: [
    				{ x: new Date(2016, 00, 1), y: <?php echo $penero15["PA"]; ?> },
    				{ x: new Date(2016, 01, 1), y: <?php echo $pfebrero15["PA"]; ?> },
    				{ x: new Date(2016, 02, 1), y: <?php echo $pmarzo15["PA"]; ?> },
    				{ x: new Date(2016, 03, 1), y: <?php echo $pabril15["PA"]; ?> },
    				{ x: new Date(2016, 04, 1), y: <?php echo $pmayo15["PA"]; ?> },
    				{ x: new Date(2016, 05, 1), y: <?php echo $pjunio15["PA"]; ?> },
    				{ x: new Date(2016, 06, 1), y: <?php echo $pjulio15["PA"]; ?> },
    				{ x: new Date(2016, 07, 1), y: <?php echo $pagosto15["PA"]; ?> },
    				{ x: new Date(2016, 08, 1), y: <?php echo $pseptiembre15["PA"]; ?> },
    				{ x: new Date(2016, 09, 1), y: <?php echo $poctubre15["PA"]; ?> },
    				{ x: new Date(2016, 10, 1), y: <?php echo $pnoviembre15["PA"]; ?> },
                    { x: new Date(2016, 11, 1), y: <?php echo $pdicmebre15["PA"]; ?> }
    				]
    			},
    			{
    				type: "line",
    				showInLegend: true,
    				name: "2016",
    				color: "#20B2AA",
    				lineThickness: 2,
                    markerType: "square",
                    color: "#15ac7a",
    				dataPoints: [
                        { x: new Date(2016, 00, 1), y: <?php echo $penero16["PA"]; ?> },
                        { x: new Date(2016, 01, 1), y: <?php echo $pfebrero16["PA"]; ?> },
                        { x: new Date(2016, 02, 1), y: <?php echo $pmarzo16["PA"]; ?> },
                        { x: new Date(2016, 03, 1), y: <?php echo $pabril16["PA"]; ?> },
                        { x: new Date(2016, 04, 1), y: <?php echo $pmayo16["PA"]; ?> },
                        { x: new Date(2016, 05, 1), y: <?php echo $pjunio16["PA"]; ?> },
                        { x: new Date(2016, 06, 1), y: <?php echo $pjulio16["PA"]; ?> },
                        { x: new Date(2016, 07, 1), y: <?php echo $pagosto16["PA"]; ?> },
                        { x: new Date(2016, 08, 1), y: <?php echo $pseptiembre16["PA"]; ?> },
                        { x: new Date(2016, 09, 1), y: <?php echo $poctubre16["PA"]; ?> },
                        { x: new Date(2016, 10, 1), y: <?php echo $pnoviembre16["PA"]; ?> },
                        { x: new Date(2016, 11, 1), y: <?php echo $pdicmebre16["PA"]; ?> }
    				]
    			},
                {
    				type: "line",
    				showInLegend: true,
    				name: "2017",
    				color: "#20B2AA",
    				lineThickness: 2,
                    markerType: "triangle",
                    color: "#a0ac15",
    				dataPoints: [
                        { x: new Date(2016, 00, 1), y: <?php if(!isset($penero17)){echo 0;}else{echo $penero17["PA"];} ?> },
        				{ x: new Date(2016, 01, 1), y: <?php if(!isset($pfebrero17)){echo 0;}else{echo $pfebrero17["PA"];} ?> },
        				{ x: new Date(2016, 02, 1), y: <?php if(!isset($pmarzo17)){echo 0;}else{echo $pmarzo17["PA"];} ?> },
        				{ x: new Date(2016, 03, 1), y: <?php if(!isset($pabril17)){echo 0;}else{echo $pabril17["PA"];} ?> },
        				{ x: new Date(2016, 04, 1), y: <?php if(!isset($pmayo17)){echo 0;}else{echo $pmayo17["PA"];} ?> },
        				{ x: new Date(2016, 05, 1), y: <?php if(!isset($pjunio17)){echo 0;}else{echo $pjunio17["PA"];} ?> },
        				{ x: new Date(2016, 06, 1), y: <?php if(!isset($pjulio17)){echo 0;}else{echo $pjulio17["PA"];} ?> },
        				{ x: new Date(2016, 07, 1), y: <?php if(!isset($pagosto17)){echo 0;}else{echo $pagosto17["PA"];} ?> },
        				{ x: new Date(2016, 08, 1), y: <?php if(!isset($pseptiembre17)){echo 0;}else{echo $pseptiembre17["PA"];} ?> },
        				{ x: new Date(2016, 09, 1), y: <?php if(!isset($poctubre17)){echo 0;}else{echo $poctubre17["PA"];} ?> },
        				{ x: new Date(2016, 10, 1), y: <?php if(!isset($pnoviembre17)){echo 0;}else{echo $pnoviembre17["PA"];} ?> },
                        { x: new Date(2016, 11, 1), y: <?php if(!isset($pdicmebre17)){echo 0;}else{echo $pdicmebre17["PA"];} ?> }
    				]
    			}
    
    			],
              legend:{
                cursor:"pointer",
                itemclick:function(e){
                  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                  	e.dataSeries.visible = false;
                  }
                  else{
                    e.dataSeries.visible = true;
                  }
                  chart1.render();
                }
              }
    		});
    
    chart1.render();
    chart1 = {};
    
    }
    
    	window.onload = function () {
            CanvasJS.addCultureInfo("es",
        {
          decimalSeparator: ",",// Observe ToolTip Number Format
          digitGroupSeparator: ".", // Observe axisY labels
          months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
    
        });
    		var chart2 = new CanvasJS.Chart("2", {
                theme: "theme1",
                culture: "es",
                axisX:{
                valueFormatString:"MMMM"
            },
    
    			title:{
    				text: "Patentamientos Convencional",
    				fontSize: 20
    			},
                            animationEnabled: true,
    			axisX:{
    
    				gridColor: "Silver",
    				tickColor: "silver",
    				valueFormatString: "MMMM"
    
    			},
                            toolTip:{
                              shared:true
                            },
    			theme: "theme1",
    			axisY: {
    				gridColor: "Silver",
    				tickColor: "silver"
    			},
    			legend:{
    				verticalAlign: "center",
    				horizontalAlign: "right"
    			},
    
    			data: [
    			{
    				type: "line",
    				showInLegend: true,
    				lineThickness: 2,
    				name: "2015",
    				markerType: "circle",
    				color: "#F08080",
    				dataPoints: [
    				{ x: new Date(2016, 00, 1), y: <?php echo $penero15["TotalConvencionales"]; ?> },
    				{ x: new Date(2016, 01, 1), y: <?php echo $pfebrero15["TotalConvencionales"]; ?> },
    				{ x: new Date(2016, 02, 1), y: <?php echo $pmarzo15["TotalConvencionales"]; ?> },
    				{ x: new Date(2016, 03, 1), y: <?php echo $pabril15["TotalConvencionales"]; ?> },
    				{ x: new Date(2016, 04, 1), y: <?php echo $pmayo15["TotalConvencionales"]; ?> },
    				{ x: new Date(2016, 05, 1), y: <?php echo $pjunio15["TotalConvencionales"]; ?> },
    				{ x: new Date(2016, 06, 1), y: <?php echo $pjulio15["TotalConvencionales"]; ?> },
    				{ x: new Date(2016, 07, 1), y: <?php echo $pagosto15["TotalConvencionales"]; ?> },
    				{ x: new Date(2016, 08, 1), y: <?php echo $pseptiembre15["TotalConvencionales"]; ?> },
    				{ x: new Date(2016, 09, 1), y: <?php echo $poctubre15["TotalConvencionales"]; ?> },
    				{ x: new Date(2016, 10, 1), y: <?php echo $pnoviembre15["TotalConvencionales"]; ?> },
                    { x: new Date(2016, 11, 1), y: <?php echo $pdicmebre15["TotalConvencionales"]; ?> }
    				]
    			},
    			{
    				type: "line",
    				showInLegend: true,
    				name: "2016",
    				color: "#20B2AA",
    				lineThickness: 2,
                    markerType: "square",
                    color: "#15ac7a",
    				dataPoints: [
                        { x: new Date(2016, 00, 1), y: <?php echo $penero16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 01, 1), y: <?php echo $pfebrero16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 02, 1), y: <?php echo $pmarzo16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 03, 1), y: <?php echo $pabril16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 04, 1), y: <?php echo $pmayo16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 05, 1), y: <?php echo $pjunio16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 06, 1), y: <?php echo $pjulio16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 07, 1), y: <?php echo $pagosto16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 08, 1), y: <?php echo $pseptiembre16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 09, 1), y: <?php echo $poctubre16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 10, 1), y: <?php echo $pnoviembre16["TotalConvencionales"]; ?> },
                        { x: new Date(2016, 11, 1), y: <?php echo $pdicmebre16["TotalConvencionales"]; ?> }
    				]
    			},
                {
    				type: "line",
    				showInLegend: true,
    				name: "2017",
    				color: "#20B2AA",
    				lineThickness: 2,
                    markerType: "triangle",
                    color: "#a0ac15",
    				dataPoints: [
                        { x: new Date(2016, 00, 1), y: <?php if(!isset($penero17)){echo 0;}else{echo $penero17["TotalConvencionales"];} ?> },
        				{ x: new Date(2016, 01, 1), y: <?php if(!isset($pfebrero17)){echo 0;}else{echo $pfebrero17["TotalConvencionales"];} ?> },
        				{ x: new Date(2016, 02, 1), y: <?php if(!isset($pmarzo17)){echo 0;}else{echo $pmarzo17["TotalConvencionales"];} ?> },
        				{ x: new Date(2016, 03, 1), y: <?php if(!isset($pabril17)){echo 0;}else{echo $pabril17["TotalConvencionales"];} ?> },
        				{ x: new Date(2016, 04, 1), y: <?php if(!isset($pmayo17)){echo 0;}else{echo $pmayo17["TotalConvencionales"];} ?> },
        				{ x: new Date(2016, 05, 1), y: <?php if(!isset($pjunio17)){echo 0;}else{echo $pjunio17["TotalConvencionales"];} ?> },
        				{ x: new Date(2016, 06, 1), y: <?php if(!isset($pjulio17)){echo 0;}else{echo $pjulio17["TotalConvencionales"];} ?> },
        				{ x: new Date(2016, 07, 1), y: <?php if(!isset($pagosto17)){echo 0;}else{echo $pagosto17["TotalConvencionales"];} ?> },
        				{ x: new Date(2016, 08, 1), y: <?php if(!isset($pseptiembre17)){echo 0;}else{echo $pseptiembre17["TotalConvencionales"];} ?> },
        				{ x: new Date(2016, 09, 1), y: <?php if(!isset($poctubre17)){echo 0;}else{echo $poctubre17["TotalConvencionales"];} ?> },
        				{ x: new Date(2016, 10, 1), y: <?php if(!isset($pnoviembre17)){echo 0;}else{echo $pnoviembre17["TotalConvencionales"];} ?> },
                        { x: new Date(2016, 11, 1), y: <?php if(!isset($pdicmebre17)){echo 0;}else{echo $pdicmebre17["TotalConvencionales"];} ?> }
    				]
    			}
    
    			],
              legend:{
                cursor:"pointer",
                itemclick:function(e){
                  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                  	e.dataSeries.visible = false;
                  }
                  else{
                    e.dataSeries.visible = true;
                  }
                  chart2.render();
                }
              }
    		});
    
    chart2.render();
    chart2 = {};
    }
    
    	window.onload = function () {
            CanvasJS.addCultureInfo("es",
        {
          decimalSeparator: ",",// Observe ToolTip Number Format
          digitGroupSeparator: ".", // Observe axisY labels
          months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
    
        });
    		var chart3 = new CanvasJS.Chart("3", {
                theme: "theme1",
                culture: "es",
                axisX:{
                valueFormatString:"MMMM"
            },
    
    			title:{
    				text: "Patentamientos Venta Directa",
    				fontSize: 20
    			},
                            animationEnabled: true,
    			axisX:{
    
    				gridColor: "Silver",
    				tickColor: "silver",
    				valueFormatString: "MMMM"
    
    			},
                            toolTip:{
                              shared:true
                            },
    			theme: "theme1",
    			axisY: {
    				gridColor: "Silver",
    				tickColor: "silver"
    			},
    			legend:{
    				verticalAlign: "center",
    				horizontalAlign: "right"
    			},
    
    			data: [
    			{
    				type: "line",
    				showInLegend: true,
    				lineThickness: 2,
    				name: "2015",
    				markerType: "circle",
    				color: "#F08080",
    				dataPoints: [
    				{ x: new Date(2016, 00, 1), y: <?php echo $penero15["VentaDirecta"]; ?> },
    				{ x: new Date(2016, 01, 1), y: <?php echo $pfebrero15["VentaDirecta"]; ?> },
    				{ x: new Date(2016, 02, 1), y: <?php echo $pmarzo15["VentaDirecta"]; ?> },
    				{ x: new Date(2016, 03, 1), y: <?php echo $pabril15["VentaDirecta"]; ?> },
    				{ x: new Date(2016, 04, 1), y: <?php echo $pmayo15["VentaDirecta"]; ?> },
    				{ x: new Date(2016, 05, 1), y: <?php echo $pjunio15["VentaDirecta"]; ?> },
    				{ x: new Date(2016, 06, 1), y: <?php echo $pjulio15["VentaDirecta"]; ?> },
    				{ x: new Date(2016, 07, 1), y: <?php echo $pagosto15["VentaDirecta"]; ?> },
    				{ x: new Date(2016, 08, 1), y: <?php echo $pseptiembre15["VentaDirecta"]; ?> },
    				{ x: new Date(2016, 09, 1), y: <?php echo $poctubre15["VentaDirecta"]; ?> },
    				{ x: new Date(2016, 10, 1), y: <?php echo $pnoviembre15["VentaDirecta"]; ?> },
                    { x: new Date(2016, 11, 1), y: <?php echo $pdicmebre15["VentaDirecta"]; ?> }
    				]
    			},
    			{
    				type: "line",
    				showInLegend: true,
    				name: "2016",
    				color: "#20B2AA",
    				lineThickness: 2,
                    markerType: "square",
                    color: "#15ac7a",
    				dataPoints: [
                        { x: new Date(2016, 00, 1), y: <?php echo $penero16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 01, 1), y: <?php echo $pfebrero16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 02, 1), y: <?php echo $pmarzo16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 03, 1), y: <?php echo $pabril16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 04, 1), y: <?php echo $pmayo16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 05, 1), y: <?php echo $pjunio16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 06, 1), y: <?php echo $pjulio16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 07, 1), y: <?php echo $pagosto16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 08, 1), y: <?php echo $pseptiembre16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 09, 1), y: <?php echo $poctubre16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 10, 1), y: <?php echo $pnoviembre16["VentaDirecta"]; ?> },
                        { x: new Date(2016, 11, 1), y: <?php echo $pdicmebre16["VentaDirecta"]; ?> }
    				]
    			},
                {
    				type: "line",
    				showInLegend: true,
    				name: "2017",
    				color: "#20B2AA",
    				lineThickness: 2,
                    markerType: "triangle",
                    color: "#a0ac15",
    				dataPoints: [
                        { x: new Date(2016, 00, 1), y: <?php if(!isset($penero17)){echo 0;}else{echo $penero17["VentaDirecta"];} ?> },
        				{ x: new Date(2016, 01, 1), y: <?php if(!isset($pfebrero17)){echo 0;}else{echo $pfebrero17["VentaDirecta"];} ?> },
        				{ x: new Date(2016, 02, 1), y: <?php if(!isset($pmarzo17)){echo 0;}else{echo $pmarzo17["VentaDirecta"];} ?> },
        				{ x: new Date(2016, 03, 1), y: <?php if(!isset($pabril17)){echo 0;}else{echo $pabril17["VentaDirecta"];} ?> },
        				{ x: new Date(2016, 04, 1), y: <?php if(!isset($pmayo17)){echo 0;}else{echo $pmayo17["VentaDirecta"];} ?> },
        				{ x: new Date(2016, 05, 1), y: <?php if(!isset($pjunio17)){echo 0;}else{echo $pjunio17["VentaDirecta"];} ?> },
        				{ x: new Date(2016, 06, 1), y: <?php if(!isset($pjulio17)){echo 0;}else{echo $pjulio17["VentaDirecta"];} ?> },
        				{ x: new Date(2016, 07, 1), y: <?php if(!isset($pagosto17)){echo 0;}else{echo $pagosto17["VentaDirecta"];} ?> },
        				{ x: new Date(2016, 08, 1), y: <?php if(!isset($pseptiembre17)){echo 0;}else{echo $pseptiembre17["VentaDirecta"];} ?> },
        				{ x: new Date(2016, 09, 1), y: <?php if(!isset($poctubre17)){echo 0;}else{echo $poctubre17["VentaDirecta"];} ?> },
        				{ x: new Date(2016, 10, 1), y: <?php if(!isset($pnoviembre17)){echo 0;}else{echo $pnoviembre17["VentaDirecta"];} ?> },
                        { x: new Date(2016, 11, 1), y: <?php if(!isset($pdicmebre17)){echo 0;}else{echo $pdicmebre17["VentaDirecta"];} ?> }
    				]
    			}
    
    			],
              legend:{
                cursor:"pointer",
                itemclick:function(e){
                  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                  	e.dataSeries.visible = false;
                  }
                  else{
                    e.dataSeries.visible = true;
                  }
                  chart3.render();
                }
              }
    		});
    
    chart3.render();
    chart3 = {};
    }
    </script>
        <script src="js/canvasjs.min.js"></script>
    
    #14798

    Suyash Singh
    Moderator

    @jdemarco1122,

    Please have a look at this jsfiddle.

    ___
    Suyash Singh
    Team CanvasJS

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

You must be logged in to reply to this topic.