Home forums Using CanvasJS How to display multiple charts

This topic contains 3 replies, has 2 voices, and was last updated by  XPS 1 month, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24222

    XPS

    Hi, I’m new to HTML.
    While I can display one of the following charts I struggle to display more then one chart.
    Can someone please explain to me whats wrong?

    Thanks in advance

    text

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function () {

    var chart1 = new CanvasJS.Chart(“chartContainer1”, {
    animationEnabled: true,
    theme: “light2”,
    title:{
    text: “”
    },
    axisX:{
    valueFormatString: “YYYY”,
    crosshair: {
    enabled: true,
    snapToDataPoint: true
    }
    },
    axisY: {
    title: “”,
    minimum: 35000,
    maximum: 65000,
    crosshair: {
    enabled: true
    }
    },
    toolTip:{
    shared:true
    },
    legend:{
    cursor:”pointer”,
    verticalAlign: “bottom”,
    horizontalAlign: “left”,
    dockInsidePlotArea: true,
    itemclick: toogleDataSeries
    },
    data: [{
    type: “line”,
    showInLegend: true,
    name: “worked hours”,
    markerType: “square”,
    xValueFormatString: “DD MMM, YYYY”,
    dataPoints: [
    { x: new Date(1991, 0, 1), y: 60261 },
    { x: new Date(1992, 0, 1), y: 59902 },
    { x: new Date(1993, 0, 1), y: 58250 },
    { x: new Date(1994, 0, 1), y: 58105 },
    { x: new Date(1995, 0, 1), y: 57999 },
    { x: new Date(1996, 0, 1), y: 57352 },
    { x: new Date(1997, 0, 1), y: 56907 },
    { x: new Date(1998, 0, 1), y: 57364 },
    { x: new Date(1999, 0, 1), y: 57716 },
    { x: new Date(2000, 0, 1), y: 57960 },
    { x: new Date(2001, 0, 1), y: 57401 },
    { x: new Date(2002, 0, 1), y: 56705 },
    { x: new Date(2003, 0, 1), y: 55850 },
    { x: new Date(2004, 0, 1), y: 55946 },
    { x: new Date(2005, 0, 1), y: 55500 },
    { x: new Date(2006, 0, 1), y: 56467 },
    { x: new Date(2007, 0, 1), y: 57437 },
    { x: new Date(2008, 0, 1), y: 57950 },
    { x: new Date(2009, 0, 1), y: 56133 },
    { x: new Date(2010, 0, 1), y: 57013 },
    { x: new Date(2011, 0, 1), y: 57909 },
    { x: new Date(2012, 0, 1), y: 57835 },
    { x: new Date(2013, 0, 1), y: 57668 },
    { x: new Date(2014, 0, 1), y: 58336 },
    { x: new Date(2015, 0, 1), y: 58923 },
    { x: new Date(2016, 0, 1), y: 59286 }
    ]
    },
    {
    type: “line”,
    showInLegend: true,
    name: “employed”,
    lineDashType: “dash”,
    dataPoints: [
    { x: new Date(1991, 0, 1), y: 38790 },
    { x: new Date(1992, 0, 1), y: 38283 },
    { x: new Date(1993, 0, 1), y: 37786 },
    { x: new Date(1994, 0, 1), y: 37798 },
    { x: new Date(1995, 0, 1), y: 37958 },
    { x: new Date(1996, 0, 1), y: 37969 },
    { x: new Date(1997, 0, 1), y: 37947 },
    { x: new Date(1998, 0, 1), y: 38407 },
    { x: new Date(1999, 0, 1), y: 39031 },
    { x: new Date(2000, 0, 1), y: 39917 },
    { x: new Date(2001, 0, 1), y: 39809 },
    { x: new Date(2002, 0, 1), y: 39630 },
    { x: new Date(2003, 0, 1), y: 39200 },
    { x: new Date(2004, 0, 1), y: 39337 },
    { x: new Date(2005, 0, 1), y: 39326 },
    { x: new Date(2006, 0, 1), y: 39635 },
    { x: new Date(2007, 0, 1), y: 40325 },
    { x: new Date(2008, 0, 1), y: 40856 },
    { x: new Date(2009, 0, 1), y: 40892 },
    { x: new Date(2010, 0, 1), y: 41020 },
    { x: new Date(2011, 0, 1), y: 41577 },
    { x: new Date(2012, 0, 1), y: 42061 },
    { x: new Date(2013, 0, 1), y: 42319 },
    { x: new Date(2014, 0, 1), y: 42672 },
    { x: new Date(2015, 0, 1), y: 43069 },
    { x: new Date(2016, 0, 1), y: 43638 }
    ]
    }]
    });
    chart1.render();

    function toogleDataSeries(e){
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    } else{
    e.dataSeries.visible = true;
    }
    chart1.render();
    }

    }
    </script>
    </head>
    <body>
    <div id=”chartContainer1″ style=”height: 370px; width: 100%;”></div>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    </body>
    </html>

    more text

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function () {

    var chart2 = new CanvasJS.Chart(“chartContainer2”, {
    animationEnabled: true,
    theme: “light2”,
    title:{
    text: “”
    },
    axisX:{
    valueFormatString: “YYYY”,
    crosshair: {
    enabled: true,
    snapToDataPoint: true
    }
    },
    axisY: {
    title: “%”,
    minimum: 90,
    maximum: 115,
    crosshair: {
    enabled: true
    }
    },
    toolTip:{
    shared:true
    },
    legend:{
    cursor:”pointer”,
    verticalAlign: “bottom”,
    horizontalAlign: “left”,
    dockInsidePlotArea: true,
    itemclick: toogleDataSeries
    },
    data: [{
    type: “line”,
    showInLegend: true,
    name: “standardized worked hours”,
    markerType: “square”,
    xValueFormatString: “DD MMM, YYYY”,
    dataPoints: [
    { x: new Date(1991, 0, 1), y: 100 },
    { x: new Date(1992, 0, 1), y: 99.4042581437414 },
    { x: new Date(1993, 0, 1), y: 96.6628499361113 },
    { x: new Date(1994, 0, 1), y: 96.4222299663132 },
    { x: new Date(1995, 0, 1), y: 96.2463284711505 },
    { x: new Date(1996, 0, 1), y: 95.1726655714309 },
    { x: new Date(1997, 0, 1), y: 94.4342111813611 },
    { x: new Date(1998, 0, 1), y: 95.1925789482418 },
    { x: new Date(1999, 0, 1), y: 95.7767046680274 },
    { x: new Date(2000, 0, 1), y: 96.1816099965152 },
    { x: new Date(2001, 0, 1), y: 95.253978526742 },
    { x: new Date(2002, 0, 1), y: 94.0990026717114 },
    { x: new Date(2003, 0, 1), y: 92.6801745739367 },
    { x: new Date(2004, 0, 1), y: 92.8394815884237 },
    { x: new Date(2005, 0, 1), y: 92.0993677502862 },
    { x: new Date(2006, 0, 1), y: 93.7040540316291 },
    { x: new Date(2007, 0, 1), y: 95.3137186571746 },
    { x: new Date(2008, 0, 1), y: 96.1650155158394 },
    { x: new Date(2009, 0, 1), y: 93.1497983770598 },
    { x: new Date(2010, 0, 1), y: 94.6101126765238 },
    { x: new Date(2011, 0, 1), y: 96.0969781450689 },
    { x: new Date(2012, 0, 1), y: 95.9741789880686 },
    { x: new Date(2013, 0, 1), y: 95.6970511607839 },
    { x: new Date(2014, 0, 1), y: 96.8055624699225 },
    { x: new Date(2015, 0, 1), y: 97.7796584855877 },
    { x: new Date(2016, 0, 1), y: 98.3820381341166 }
    ]
    },
    {
    type: “line”,
    showInLegend: true,
    name: “standardized employed”,
    lineDashType: “dash”,
    dataPoints: [
    { x: new Date(1991, 0, 1), y: 100 },
    { x: new Date(1992, 0, 1), y: 98.692962103635 },
    { x: new Date(1993, 0, 1), y: 97.4117040474349 },
    { x: new Date(1994, 0, 1), y: 97.4426398556329 },
    { x: new Date(1995, 0, 1), y: 97.8551172982728 },
    { x: new Date(1996, 0, 1), y: 97.8834751224542 },
    { x: new Date(1997, 0, 1), y: 97.8267594740913 },
    { x: new Date(1998, 0, 1), y: 99.0126321216808 },
    { x: new Date(1999, 0, 1), y: 100.621294147976 },
    { x: new Date(2000, 0, 1), y: 102.905387986595 },
    { x: new Date(2001, 0, 1), y: 102.626965712813 },
    { x: new Date(2002, 0, 1), y: 102.165506573859 },
    { x: new Date(2003, 0, 1), y: 101.056973446765 },
    { x: new Date(2004, 0, 1), y: 101.410157257025 },
    { x: new Date(2005, 0, 1), y: 101.381799432844 },
    { x: new Date(2006, 0, 1), y: 102.178396493942 },
    { x: new Date(2007, 0, 1), y: 103.957205465326 },
    { x: new Date(2008, 0, 1), y: 105.326114978087 },
    { x: new Date(2009, 0, 1), y: 105.418922402681 },
    { x: new Date(2010, 0, 1), y: 105.748904356793 },
    { x: new Date(2011, 0, 1), y: 107.184841453983 },
    { x: new Date(2012, 0, 1), y: 108.432585717969 },
    { x: new Date(2013, 0, 1), y: 109.097705594225 },
    { x: new Date(2014, 0, 1), y: 110.00773395205 },
    { x: new Date(2015, 0, 1), y: 111.0311936066 },
    { x: new Date(2016, 0, 1), y: 112.498066511988 }
    ]
    }]
    });
    chart2.render();

    function toogleDataSeries(e){
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    } else{
    e.dataSeries.visible = true;
    }
    chart2.render();
    }

    }
    </script>
    </head>
    <body>
    <div id=”chartContainer2″ style=”height: 370px; width: 100%;”></div>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    </body>
    </html>

    closing text

    #24231

    @xps,

    An HTML document can only have one html tag and one body tag. To display multiple charts in a page, you can have multiple chart-containers (div in this case) and have just one script-tag where you create both chart1 and chart2 and render them. Please take a look at this tutorial on Rendering Multiple Charts in a Page.

    Also please take a look at tutorial on HTML and this stackoverflow thread for more info.


    Vishwas R
    Team CanvasJS

    #24247

    XPS

    Solved

    Thank you very much.
    Now I can show everyone how and why the euro fails.

    [Economics] How Germany became the Euro export world champion
    https://einfache-standards.blogspot.com/2018/12/economics-how-germany-became-euro_21.html

    [Wirtschaft] Wie Deutschland zum Euro-Exportweltmeister wurde
    https://einfache-standards.blogspot.com/2018/12/wirtschaft-wie-deutschland-zum-euro_21.html

    #24248

    XPS

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function () {

    var chart = new CanvasJS.Chart(“chartContainer1”, {
    animationEnabled: true,
    theme: “light2”,
    title:{
    text: “”
    },
    axisX:{
    valueFormatString: “YYYY”,
    crosshair: {
    enabled: true,
    snapToDataPoint: true
    }
    },
    axisY: {
    title: “”,
    minimum: 35000,
    maximum: 65000,
    crosshair: {
    enabled: true
    }
    },
    toolTip:{
    shared:true
    },
    legend:{
    cursor:”pointer”,
    verticalAlign: “bottom”,
    horizontalAlign: “left”,
    dockInsidePlotArea: true,
    itemclick: toogleDataSeries
    },
    data: [{
    type: “line”,
    showInLegend: true,
    name: “worked hours”,
    markerType: “square”,
    xValueFormatString: “DD MMM, YYYY”,
    dataPoints: [
    { x: new Date(2015, 0, 1), y: 58923 },
    { x: new Date(2016, 0, 1), y: 59286 }
    ]
    },
    {
    type: “line”,
    showInLegend: true,
    name: “employed”,
    lineDashType: “dash”,
    dataPoints: [
    { x: new Date(2015, 0, 1), y: 43069 },
    { x: new Date(2016, 0, 1), y: 43638 }
    ]
    }]
    });
    chart.render();

    function toogleDataSeries(e){
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    } else{
    e.dataSeries.visible = true;
    }
    chart.render();
    }

    var chart = new CanvasJS.Chart(“chartContainer2”, {
    animationEnabled: true,
    theme: “light2”,
    title:{
    text: “”
    },
    axisX:{
    valueFormatString: “YYYY”,
    crosshair: {
    enabled: true,
    snapToDataPoint: true
    }
    },
    axisY: {
    title: “%”,
    minimum: 90,
    maximum: 115,
    crosshair: {
    enabled: true
    }
    },
    toolTip:{
    shared:true
    },
    legend:{
    cursor:”pointer”,
    verticalAlign: “bottom”,
    horizontalAlign: “left”,
    dockInsidePlotArea: true,
    itemclick: toogleDataSeries
    },
    data: [{
    type: “line”,
    showInLegend: true,
    name: “standardized worked hours”,
    markerType: “square”,
    xValueFormatString: “DD MMM, YYYY”,
    dataPoints: [
    { x: new Date(2015, 0, 1), y: 97.7796584855877 },
    { x: new Date(2016, 0, 1), y: 98.3820381341166 }
    ]
    },
    {
    type: “line”,
    showInLegend: true,
    name: “standardized employed”,
    lineDashType: “dash”,
    dataPoints: [
    { x: new Date(2015, 0, 1), y: 111.0311936066 },
    { x: new Date(2016, 0, 1), y: 112.498066511988 }
    ]
    }]
    });
    chart.render();

    function toogleDataSeries(e){
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    } else{
    e.dataSeries.visible = true;
    }
    chart.render();
    }

    var chart = new CanvasJS.Chart(“chartContainer3”, {
    animationEnabled: true,
    theme: “light2”,
    title:{
    text: “”
    },
    axisX:{
    valueFormatString: “YYYY”,
    crosshair: {
    enabled: true,
    snapToDataPoint: true
    }
    },
    axisY: {
    title: “%”,
    minimum: 80,
    maximum: 160,
    crosshair: {
    enabled: true
    }
    },
    toolTip:{
    shared:true
    },
    legend:{
    cursor:”pointer”,
    verticalAlign: “bottom”,
    horizontalAlign: “left”,
    dockInsidePlotArea: true,
    itemclick: toogleDataSeries
    },
    data: [{
    type: “line”,
    showInLegend: true,
    name: “Unit-Labour-Costs Germany”,
    markerType: “square”,
    xValueFormatString: “DD MMM, YYYY”,
    dataPoints: [
    { x: new Date(2016, 0, 1), y: 117.8723404 },
    { x: new Date(2017, 0, 1), y: 120.106383 }
    ]
    },
    {
    type: “line”,
    showInLegend: true,
    name: “Unit-Labour-Costs Greece”,
    markerType: “square”,
    xValueFormatString: “DD MMM, YYYY”,
    dataPoints: [
    { x: new Date(2016, 0, 1), y: 130.239521 },
    { x: new Date(2017, 0, 1), y: 130.988024 }
    ]
    },
    {
    type: “line”,
    showInLegend: true,
    name: “Unit-Labour-Costs Spain”,
    markerType: “square”,
    xValueFormatString: “DD MMM, YYYY”,
    dataPoints: [
    { x: new Date(2016, 0, 1), y: 131.0533516 },
    { x: new Date(2017, 0, 1), y: 131.3269494 }
    ]
    },
    {
    type: “line”,
    showInLegend: true,
    name: “Unit-Labour-Costs France”,
    markerType: “square”,
    xValueFormatString: “DD MMM, YYYY”,
    dataPoints: [
    { x: new Date(2016, 0, 1), y: 130.5315204 },
    { x: new Date(2017, 0, 1), y: 131.3967862 }
    ]
    },
    {
    type: “line”,
    showInLegend: true,
    name: “Unit-Labour-Costs Italy”,
    markerType: “square”,
    xValueFormatString: “DD MMM, YYYY”,
    dataPoints: [
    { x: new Date(2016, 0, 1), y: 140.8355795 },
    { x: new Date(2017, 0, 1), y: 140.1617251 }
    ]
    },
    {
    type: “line”,
    showInLegend: true,
    name: “Unit-Labour-Costs Netherlands”,
    lineDashType: “dash”,
    dataPoints: [
    { x: new Date(2016, 0, 1), y: 131.4465409 },
    { x: new Date(2017, 0, 1), y: 132.0754717 }
    ]
    }]
    });
    chart.render();

    function toogleDataSeries(e){
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    } else{
    e.dataSeries.visible = true;
    }
    chart.render();
    }

    }
    </script>
    </head>
    <body>

    text

    <div id=”chartContainer1″ style=”height: 370px; width: 100%;”></div>

    <br />
    <br />

    more text

    <div id=”chartContainer2″ style=”height: 370px; width: 100%;”></div>

    even more text

    <div id=”chartContainer3″ style=”height: 370px; width: 100%;”></div>

    last chance for text

    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    </body>
    </html>

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

You must be logged in to reply to this topic.