Streaming live at 10am (PST)

Help with custom code line chart integration


#1

i tried pasting the javascript chart code and also google charts code into the embed box, BUT it shows blank when i publish the site.

just suggest any other way that i can just embed some line chart in my website.

Project link:
https://preview.webflow.com/preview/fantastic-project-2b47e3?preview=c4a1f0a43577fa3a45f28b5205935b71

Line chart code reference: https://canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/line/earthquakes_monthly/


#2

Hi @Gaurav_Singh,

Here is an example implementation that you can clone: https://webflow.com/website/line-chart-example

Here is a video showing how to do it:

Here is the custom code pasted into the head of the site in custom code:

  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      theme: "theme2",
      title:{
        text: "Earthquakes - per month"
      },
      animationEnabled: true,
      axisX: {
        valueFormatString: "MMM",
        interval:1,
        intervalType: "month"
        
      },
      axisY:{
        includeZero: false
        
      },
      data: [
      {        
        type: "line",
        //lineThickness: 3,        
        dataPoints: [
        { x: new Date(2012, 00, 1), y: 450 },
        { x: new Date(2012, 01, 1), y: 414},
        { x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
        { x: new Date(2012, 03, 1), y: 460 },
        { x: new Date(2012, 04, 1), y: 450 },
        { x: new Date(2012, 05, 1), y: 500 },
        { x: new Date(2012, 06, 1), y: 480 },
        { x: new Date(2012, 07, 1), y: 480 },
        { x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
        { x: new Date(2012, 09, 1), y: 500 },
        { x: new Date(2012, 10, 1), y: 480 },
        { x: new Date(2012, 11, 1), y: 510 }
        
        ]
      }
      
      
      ]
    });

chart.render();
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>

I hope this helps.


#3

It worked Thanks,
but i want two charts in one page, because i am making a dashboard demo so i require multiple charts. Could you help with that?