Designing Charts

With Justinmind, you can create and manage charts and graphs in your prototypes.
Charts in Justinmind
There are a few different methods you can use to create charts, check out each method below:

Using Justinmind assets

You can use widgets from Justinmind widget libraries to create a chart.

Charts widget library: Use the charts widget library to see a number of readymade charts to place onto the Canvas. Some contain images of charts that aren’t editable, while others are made of rectangle or line elements that you can move and customize.

To add the Charts widget library to your prototypes:

  1. Download the library here.Add charts library
  2. Go to Justinmind and navigate to the Widgets tab of the main menu. There, click ‘Add/Remove libraries’.Add widget libraries
  3. In the widget library dialog, click to the ‘My libraries’ tab.
  4. Click ‘Import library’ and browse through your files to find and select the Charts widget library, which will be labeled ‘Charts.jpl’.Find charts.jpl
  5. Once you’ve imported the library, click the ‘Add to widgets’ button. Once you’ve done so, click the button again to remove the library. Add charts to your library
  6. Exit the dialog, and look to the Widgets palette. You’ll now see a variety of charts to place in your prototypes.Drag charts to the Canvas

Build with basic or other widgets: Use the rectangle, line, and other shape widgets to build a chart. Bar chart using basic widgets
Once you’ve created your chart, you can make it interactive using Resize events. Here’s an example:
Interactions with bar chart
Values entered into the Input Text Fields will resize the corresponding rectangle – or bar – in the chart. To recreate this example, just create an “On Click” + “Resize” event for the ‘Submit’ button, and resize each rectangle’s height according to its corresponding Input Text Field’s value.
Resize the bar chart

Using an external embeddable chart resource

Using the HTML widget, you can embed charts generated through websites, such as Google Sheets or Google Charts. Once you’ve created your chart, check to see if the site has an embed feature. Embed code published
Copy and paste the generated code into the HTML widget into Justinmind.
Paste HTML into widget
You might need to manually add the height and width into the embed code so that the entire chart and its data will show in the HTML widget. You can do this at the beginning of the embed code, where it says “iframe”.
Specify the width and height in the html widget