Login to Ask a Question or Reply
You must be logged in to post your query.
Home › Forums › Chart Support › Cant render more than 1 chart
Cant render more than 1 chart
- This topic has 1 reply, 2 voices, and was last updated 7 years, 7 months ago by
Suyash Singh.
Viewing 2 posts - 1 through 2 (of 2 total)
-
April 8, 2017 at 2:52 am #14794
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>April 8, 2017 at 10:48 am #14798
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.